ant-design-vue纯前端分页

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

由于项目需求需要采取前端分页方式，最后找到解决方式

<a-table
        size="default"
        bordered
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :pagination="false"
      >
     ...此处省略部分代码
</a-table>
<a-pagination
        size="middle"
        v-model="current"
        :pageSize="pageSize"
        @change="pageNumberChange"
        @showSizeChange="sizeChange"
        :pageSizeOptions="sizeList"
        :total="total"
        showSizeChanger
        showQuickJumper
/>

data中定义

sizeList: ['5','10', '20', '30'], //一页能显示条数
pageSize: 10, //当前页显示多少条
current: 1, //当前页
total: 0, //总条数,在获取后台数据时将数组的length赋值给total

分页操作

//分页页数的改变
pageNumberChange(current, size) {
     this.current = current;
     this.pageSize = size;
     this.dataSource = this.getShowSource();
},
 //  分页显示条数的变化
sizeChange(current, size) {
     this.current = current;
     this.pageSize = size;
     this.dataSource = this.getShowSource();
},
//实现分页效果
getShowSource() {
     var keyValue = 0;
     var data = this.showSource;//后端返回的全部数据
     for (var i = 0; i < data.length; i++) {
       keyValue = keyValue + 1;
       let key = { key: keyValue };
       data[i] = Object.assign(data[i], key);
     }
     var start = this.pageSize * this.current - this.pageSize;
     var end = this.pageSize * this.current;
     return data.slice(start, end);
},

以上是 ant-design-vue纯前端分页 的全部内容， 来源链接： utcz.com/z/378702.html

回到顶部