VUE + element-ui表格分页解决方案

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_41127584/article/details/102566560

之前用过一款框架Layui，其中的表格分页

var laypage = layui.laypage;

指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染

最近使用element-ui做table遇到了一些问题，记录一下

表格数据序号问题

<el-table-column label="序号" type="index" show-overflow-tooltip width="50" align="center">
</el-table-column>

设置 type="index"即可，show-overflow-tooltip 当内容过长被隐藏时显示 tooltip

<el-table 
			:data="EnterpriseList.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
			:header-cell-style="{background:'#eef1f6',color:'#606266'}"
			highlight-current-row
			@current-change="handleTableChange"
			>

:data=“EnterpriseList.slice((currentPage-1)pagesize,currentPagepagesize)” 是设置分页数据中最重要的属性，在不同分页显示不同的数据

<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="currentPage"
			:page-sizes="[5, 10, 20, 30]"
			:page-size="pagesize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total">
		</el-pagination>

分页组件属性配置如上，对应methods中的回调函数如下

methods:{
			handleSizeChange(val) {
				this.pagesize = val
				console.log(this.pagesize);
			},
			handleCurrentChange(val) {
				this.currentPage = val
				console.log(this.currentPage);
			},

pagesize:10 ,currentPage: 1为data中的默认页面容量及当前页面，根据自己的业务配置即可

computed:{
			...mapState(['EnterpriseList']),
			total(){
				return this.EnterpriseList.length
			}
		},

total总页数由接口返回数据长度计算而来