Vue 利用el-table和el-pagination组件，简简单单实现表格前端分页

个别业务场景，需求前端实现分页，处理一些特殊数据和交互，来满足不同的业务的条件，今天抽空写了个demo，效果如下：

代码：

<template><div class="paging"><div class="box_body"><el-table :data="tableData" border size="small" style="width: 100%"><el-table-columnlabel="序号"prop="num"min-width="150"></el-table-column><el-table-columnlabel="姓名"prop="name"min-width="150"></el-table-column><el-table-columnlabel="性别"prop="sex"min-width="150"></el-table-column><el-table-columnlabel="年龄"prop="age"min-width="150"></el-table-column></el-table><!--===分页=====--><el-pagination:current-page="pageinfo.page":page-sizes="[10, 20, 30, 40]":page-size="pageinfo.size"layout="total, sizes, prev, pager, next, jumper":total="pageinfo.total"@size-change="handleSizeChange"@current-change="handleCurrentChange"style="margin-bottom: 3px"></el-pagination></div></div>
</template><script>
export default {name: "paging",data() {return {// 从后端获取到的所有表格数据sourceTableData: [],// 页面要显示的表格数据tableData: [],// 分页信息pageinfo: {page: 1,size: 10,total: 0,},};},created() {// 页面初始化时生成100条数据，模拟从后端获取所有数据let arr = [];for (let i = 0; i < 100; i++) {let obj = {};obj.num = i + 1;obj.name = "name" + (i + 1);obj.sex = Math.round(Math.random()) == 0 ? "男" : "女";obj.age = 20 + Math.round(Math.random() * 30);arr.push(obj);}this.sourceTableData = arr;// 初始化算出第一页数据this.tableData = this.currentChangePage(this.pageinfo.size,this.pageinfo.page);this.pageinfo.total = this.sourceTableData.length;},methods: {/** 切换每页显示条数 */handleSizeChange(val) {this.pageinfo.page = 1;this.pageinfo.size = val;this.tableData = this.currentChangePage(val, this.pageinfo.page);},/** 切换分页 */handleCurrentChange(val) {this.pageinfo.page = val;this.tableData = this.currentChangePage(this.pageinfo.size, val);},// 分页方法(用于表格数据后端不分页，放到前端做分页)currentChangePage(size, current) {const tablePush = [];let array = JSON.parse(JSON.stringify(this.sourceTableData));array.forEach((item, index) => {if (size * (current - 1) <= index && index <= size * current - 1) {tablePush.push(item);}});return tablePush;},},
};
</script><style>
.paging {width: 100%;height: 100%;
}
.box_body {width: 1200px;margin: 50px auto;
}
</style>

有同学要用el-table组件做前端分页的可以直接复制粘贴拿去使用，动手能力强的同学可以再我这个基础上再次二次封装成组件去使用，方便随时调用。