AntD table自定义分页器

• table内定义

<a-table
  :pagination="pagination"
>

• 初始化

data () {
  return {
    pagination: {
      // 默认当前页，每页显示数量，总数
      current: 1, 
      pageSize: 10,
      total: 0,
      showSizeChange: true, //可改变每页数量
      pageSizeOption: ['10', '20', '50', '100'],
      showTotal: total => `共 ${total} 条数`，
      onChange: (current, pageSize) => this.pageChange(current, pageSize),
      onShowSizeChange: (current, pageSize) => this.pageSizeChange(current, pageSize)
    }
  }
}

• 初始化请求api赋值给total

• 方法

methods: {
  pageChange (current, pageSize) {
    this.pagination.current = current
    //下面再请求分页接口，重新渲染数据
  },
  pageSizeChange (current, pageSize) {
    // 请求分页接口，重新渲染数据
  }
}