js静态数据分页展示

data() {
return {
tableData: [], // 当前页的数据，用于给表格展示用的
tableDataAll: [], // 需要拿来分页的总数据
pagination: {
totalRows: 0, //总条数
pageSize: 10, //每页显示条数
pageNumber: 1
}
}
}

methods: {
currentChange(val) {
//页码改变
this.pagination.pageNumber = val;
this.dataPagination(this.tableDataAll);
},
sizeChange(val) {
//切换每页显示条数
this.pagination.pageSize = val;
this.dataPagination(this.tableDataAll);
},
// 数据分页
dataPagination(dataList) {
if (!dataList || dataList.length <=0) {
dataList = [];
this.tableData = [];
}
if (dataList.length <= this.maxUsePage) {
this.tableData = dataList;
return;
}
let pageNo = this.pagination.pageNumber;
let pageSize = this.pagination.pageSize;
var offset = (pageNo - 1) * pageSize;
this.pagination.totalRows = dataList.length;
this.tableData = (offset + pageSize >= dataList.length) ? dataList.slice(offset, dataList.length) : dataList.slice(offset, offset + pageSize);
}
},
mounted: function() {
this.$nextTick(function () {
// 初始化渲染
this.pagination.pageNumber = 1
// 得到总数据tableDataAll进行分页
this.dataPagination(this.tableDataAll);
})
}