每一處都寫了注釋，還是很容易看懂的
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-504927.html
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-504927.html
<template>
<div class="home">
<el-table :data="tableData()" style="width: 100%">
<el-table-column type="index" width="50" />
<el-table-column prop="date" label="日期" width="180" />
<el-table-column prop="name" label="名字" width="180" />
<el-table-column prop="address" label="地址" />
</el-table>
<div class="example-pagination-block">
<!-- <div class="example-demonstration">分頁(yè)</div> -->
<el-pagination
background
layout="prev, pager, next ,total,sizes"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
name: "HomeView",
components: {},
setup() {
//表格的全數(shù)據(jù)（這里是自定義的列表，要看分頁(yè)效果自行往此數(shù)組內(nèi)加數(shù)據(jù)）
const allTableData = [
{
date: "2016-05-03",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-02",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-04",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-01",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
];
//表格用到的參數(shù)
const state = reactive({
page: 1,
limit: 10,
total: allTableData.length,
});
//前端限制分頁(yè)（tableData為當(dāng)前展示頁(yè)表格）
const tableData = () => {
return allTableData.filter(
(item, index) =>
index < state.page * state.limit &&
index >= state.limit * (state.page - 1)
);
};
//改變頁(yè)碼
const handleCurrentChange = (e) => {
state.page = e;
};
//改變頁(yè)數(shù)限制
const handleSizeChange = (e) => {
state.limit = e;
};
return {
allTableData,
tableData,
handleCurrentChange,
handleSizeChange,
...toRefs(state),
};
},
});
</script>
到了這里，關(guān)于vue3+element Plus實(shí)現(xiàn)表格前端分頁(yè)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
