前端分页（万不得已版本）

其实不应该前端分页的，但如果产品要展示分页样式，那就分一下。

<template><el-dialogtitle="超期库存明细"custom-class="quantity-dialog":visible.sync="dialogTableVisible"append-to-bodywidth="70%"><el-table:data="tableconfig.tabledata"borderstyle="width: 100%"></el-table><el-pagination:current-page="tableconfig.currentpage":page-sizes="tableconfig.pagesizes":page-size="tableconfig.pagesize":total="tableconfig.total"backgroundlayout="total,sizes,prev, pager, next,jumper"@size-change="handleSizeChange"@current-change="handleCurrentChange"style="text-align: right;margin-top: 10px;"/></el-dialog>
</template>
<script>
export default {data() {return {dialogTableVisible: false,tabledata: [],tableconfig: {tabledata: [],pagesizes: [5, 10, 20, 50],currentpage: 1,pagesize: 10,total: 0,},};},methods: {showDialog(data) {//一次性获取后端数据this.tabledata = data;this.tableconfig.total = Number(data.length);setTimeout(() => {this.$nextTick(() => {this.getPagedData();});}, 100);this.dialogTableVisible = true;},//分页方法getPagedData() {const start =(this.tableconfig.currentpage - 1) * this.tableconfig.pagesize;const end = start + this.tableconfig.pagesize;this.tableconfig.tabledata = this.tabledata.slice(start, end);},handleSizeChange(val) {this.tableconfig.currentpage = 1;this.tableconfig.pagesize = val;this.getPagedData();},handleCurrentChange(val) {this.tableconfig.currentpage = val;this.getPagedData();},},
};
</script>