vue-antd 分页pagination相关重置问题

1、在data中声明 pagination变量

      pagination: {
        total: 0,
        pageNum: 1,
        pageSize: 10, //每页中显示10条数据
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50'], //每页中显示的数据
        showTotal: (total) => `共有 ${total} 条数据`, //分页中显示总的数据
        showQuickJumper: true,
        onShowSizeChange: (current, pageSize) => that.pageSize = pageSize, // 改变每页数量时更新显示 
     // 注:在使用onShowSizeChange方法是需在return{}外声明个that , let that = this改变this指向问题否则无效
      },
2、在a-table中引入
          <a-table 
            :columns="columns" 
            :data-source="data"
            :pagination="pagination" // 分页
            :rowKey="record=>record.id" // 唯一值辨认  提高diff算法同时防止不必要的报错提示
            @change="handleTableChange"   //分页事件@change
            />
3、在handleTableChange事件中如果想重值页码需要添加字段current ,再要想让每页显示多少条动态生效需要添加pageSize 并重新赋值给data中声明的pagination 变量
    //分页事件
    handleTableChange(val, filters, sorter) {
      console.log(val)
      const pager = { ...this.pagination  };
      pager.current = val.current;  // 查看文档可知current 是改变页码数必要字段
      pager.pageSize = val.pageSize;  // 查看文档可知pageSize是改变动态条数必要字段
      console.log(pager)
      // console.log(filters)
      this.pagination = pager;
      this.refresh(val.current, val.pageSize)  //接口方法根据个人情况具体使用
    },
4、重置生效必须调用handleTableChange()方法
    //重置
    reset() {
      this.queryParam = {}
      let val = {
        current: 1,
        pageSize: 10
      }
      this.handleTableChange(val)
    },
如有帮助请好评关注:谢谢您的支持
原文地址:https://www.cnblogs.com/huoshengmiao/p/14770950.html