RuoYi-Vue前端分页

1. el-table表格

<el-table
	v-loading="loading"
	:data="dataList.slice((pageNum - 1) * pageSize, pageNum * pageSize)">
	...省略部分...
el-table>

2. 声明变量

data() {
	return {
		// 遮罩层
		loading: true,
		// 表格数据
		dataList: [],
		// 当前页码
		pageNum: 1,
		// 每页数据大小
		pageSize: 10,
		// 总条数
		total: 0,
	};
},

其中的total在获取到数据后赋值

3. pagination分页器

<pagination
	v-show="total > 0"
	:total="total"
	:page="pageNum"
	:limit="pageSize"
	:autoScroll="false"
	@pagination="handlePagination"
 />

4. 分页回调方法

methods: {
	/** 分页回调处理 */
	handlePagination: function (data) {
		this.pageNum = this.pageSize != data.limit ? 1 : data.page;
		this.pageSize = data.limit;
	},
}

上面的效果是切换分页大小时候会跳转到第一页，如果不需要回到第一页可以直接this.pageNum = data.page