vue+Ant design a-table分页器使用

 vue+Ant design a-table分页器使用  当前页current设置生效

  
    {{ index + 1 }}
  
  

重点看 :pagination="pagination"  和   @change="tablePaginationChange"

data () {
    return {
      columns: columns,
      detail: [],
      pagination: {
        current: 1,
        // defaultCurrent: 1,
        total: 0, // 总数
        showSizeChanger: true,
        pageSizeOptions: ['1', '10', '20', '40', '80', '100'],
        showTotal: total => `共 ${total} 条`, // 分页中显示总的数据
        // hideOnSinglePage: true, // 只有一页时是否隐藏分页器
        pageSize: 1 // 每页条数，所有页设置统一的条数
      }
    }
    },

// 分页发生变化触发的事件
methods: {
     
      tablePaginationChange (pagination) {
        // console.log(pagination)
        this.pagination.current = pagination.current  // 重新设置当前页
        this.pagination.pageSize = pagination.pageSize
      }
    }

created () {
      this.$watch('visible', () => {
        
          const modelId = this.model.id
          getDataList({ id: id }).then((res) => {
            const pagination = { ...this.pagination }
            pagination.current = 1
            // 重新设置当前页 才会生效
            this.tablePaginationChange(pagination)
            this.detail = res.data
          })
        
    })

注意 当前页current 要生效 需要重置下 tablePaginationChange

 官网参考

Ant Design VueAn enterprise-class UI components based on Ant Design and Vuehttps://www.antdv.com/components/pagination-cn/#API

Ant Design VueAn enterprise-class UI components based on Ant Design and Vuehttps://www.antdv.com/components/table-cn/#components-table-demo-basic-usage