el-table
表格
<el-table
v-loading="loading"
:data="dataList.slice((pageNum - 1) * pageSize, pageNum * pageSize)">
...省略部分...
</el-table>
- 声明变量
data() {
return {
// 遮罩层
loading: true,
// 表格数据
dataList: [],
// 当前页码
pageNum: 1,
// 每页数据大小
pageSize: 10,
// 总条数
total: 0,
};
},
其中的
total
在获取到数据后赋值
pagination
分页器
<pagination
v-show="total > 0"
:total="total"
:page="pageNum"
:limit="pageSize"
:autoScroll="false"
@pagination="handlePagination"
/>
- 分页回调方法
methods: {
/** 分页回调处理 */
handlePagination: function (data) {
this.pageNum = this.pageSize != data.limit ? 1 : data.page;
this.pageSize = data.limit;
},
}
上面的效果是切换分页大小时候会跳转到第一页,如果不需要回到第一页可以直接
this.pageNum = data.page