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

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

<template>
	<el-dialog
		title="超期库存明细"
		custom-class="quantity-dialog"
		:visible.sync="dialogTableVisible"
		append-to-body
		width="70%"
	>
		<el-table
			:data="tableconfig.tabledata"
			border
			style="width: 100%"
		>
		</el-table>
		<el-pagination
			:current-page="tableconfig.currentpage"
			:page-sizes="tableconfig.pagesizes"
			:page-size="tableconfig.pagesize"
			:total="tableconfig.total"
			background
			layout="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>