Vue + Ant Design Vue 的分页pagination

最新推荐文章于 2025-03-19 16:58:10 发布

原创最新推荐文章于 2025-03-19 16:58:10 发布

· 5.6k 阅读

23 ·

版权

文章标签：

#vue.js

table 的分页属性pagination

如上图，是用Ant Design创建表格时的分页，下面是我在做项目结合后台给的接口写的代码：

      <a-table
        :pagination="paginationOpt"
        :columns="columns"
        :dataSource="data"
        bordered 
        :rowKey="record => record.id"
        size="small"
      >
      </a-table>

pagination 是分页器属性，paginationOpt是他的值，在data中设置他的值

点击查看分页的api https://www.antdv.com/components/pagination-cn/#api

export default {
  data () {
    return {
     paginationOpt: {
        defaultCurrent: 1,  // 默认当前页数
        defaultPageSize: 10,   // 默认当前页显示数据的大小
        total: 0, // 总数，必须先有
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '30', '40'],
        showTotal: total => `共 ${total} 条`, // 显示总数
        onShowSizeChange: (current, pageSize) => {
          this.paginationOpt.defaultCurrent = 1
          this.paginationOpt.defaultPageSize = pageSize
          this.getList()  //显示列表的接口名称
        }, 
       // 改变每页数量时更新显示
        onChange: (current, size) => {
          this.paginationOpt.defaultCurrent = current
          this.paginationOpt.defaultPageSize = size
          this.getList()
        } // 点击页码事件
      }
    }
  },
  methods: {
    // 查询列表
    getList () {
      const list = { ...this.order }
      const { defaultCurrent, defaultPageSize } = this.paginationOpt
      list.page = JSON.stringify({
        size: defaultPageSize,
        current: defaultCurrent
      })
     // orderList是后台的接口
      orderList(list).then(res => {
        const { total = 0, records = [] } = res.result.datas
        this.paginationOpt.total = total
        this.data = records  //data 是table的dataSource值
      })
    }
  }
}