<template>
<div>
<el-table :data="tableList" border>
<el-table-column label="序列" prop="index"></el-table-column>
<el-table-column label="内容" prop="data">
</el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchdata.pageindex" :page-sizes="[2, 5, 20, 50]"
:page-size="searchdata.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
// 数据源
tabledata: [
{ index: 1, data: '第一条' }, { index: 2, data: '第二条' }, { index: 3, data: '第三条' }, { index: 4, data: '第四条' },
{ index: 5, data: '第五条' }, { index: 6, data: '第六条' }, { index: 7, data: '第七条' }, { index: 8, data: '第八条' },
{ index: 9, data: '第九条' }, { index: 10, data: '第十条' }, { index: 11, data: '第11条' }, { index: 12, data: '第12条' }
],
// 实际数据
tableList: [],
// 默认
searchdata: {
pagesize: 10,
pageindex: 1,
},
// 总数
total: 0,
}
},
created() {
this.pageList()
},
methods: {
handleSizeChange(val) {
this.searchdata.pagesize = val;
this.pageList();
},
handleCurrentChange(val) {
this.searchdata.pageindex = val;
this.pageList();
},
// 分页
pageList() {
this.tableList = this.tabledata.slice(
this.searchdata.pagesize * (this.searchdata.pageindex - 1),
this.searchdata.pageindex * this.searchdata.pagesize
);
this.total = this.tabledata.length;
},
}
}
</script>
实现前端分页
于 2024-08-28 15:27:08 首次发布