vue el-pagination分页

vue el-pagination分页 使用

① 写一个分页
html 中的样式
current-page 是当前页码
page-sizes 是可选一页多少条
page-size 是当前选中的有多少条
total 是一共有多少条记录
layout 是element中el-pagination组件的一些属性
当点击分页时，可以点击第几页和一页多少条，分别对应current-change和size-change，这两个应该分开写

<el-pagination
    background
    layout="total, sizes, prev, pager, next, jumper"
    class="table-page"
    :current-page="currentPage"
    :page-sizes="[10, 20, 50]"
    :page-size="pageSize"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
></el-pagination>

② 记得在data中定义以上属性

data() {
	return {
		currentPage: 1, // 右边 当前批次分页
		pageSize: 10, // 右边 批次分页大小
		total: 0, // 右边 批次分页个数
	}
}

③ 写变化时的函数，一般是重新获取数据（如果有排序需求，记得加上排序参数）

handleSizeChange(val) {
    this.pageSize1 = val;
    this.fetchRightData(this.selectProduct, this.order, this.order_by);
},
handleCurrentChange(val) {
    this.currentPage1 = val;
    this.fetchRightData(this.selectProduct, this.order, this.order_by);
},