vue中静态数据怎么分页(以el-table为例子)

时间:2023-02-09 18:12:45

背景:

从别处选择一些数据在界面上用列表展示,列表为静态数据,故需要做分页处理。

解决方案:

Array.prototype.slice()截取数据,slice(begin,end),从begin开始到end结束,不包括end,返回值是截取的数据,返回值类型为数组,不会改变原数组

代码:

<el-table :data="taskList.slice((data.pageNum - 1) * data.pageSize, data.pageNum * data.pageSize)" stripe style="width: 100%">
</el-table>
<el-pagination @current-change="handleCurrentChange" :current-page.sync="data.pageNum" :page-size="data.pageSize" layout="pager, next, jumper" :total="taskList.length">
</el-pagination>
export default {
data() {
return {
taskList: [],
data: {
pageNum: 1,
pageSize: 10,
},
methods: {
handleCurrentChange(val) {
this.pageNum = val;
},

}