antd vue表格分页序号重置问题

问题描述:

  使用antd表格a-table组件时,有时需要展示每条数据的序号。

  通常在columns定义时写为如下形式:

const columns = [
  {
    title: '序号',
    align: 'center',
    width: 100,
    customRender: (text, record, index) => `${index + 1}`
  }
}

在不设置分页的情况下,即pagination="false",表格数据单页显示,且序号正常

antd vue表格分页序号重置问题

如果需要分页,配置pagination="true"(默认,也可以不写),会导致切换页面后序号重新从1开始

antd vue表格分页序号重置问题

很明显,我们期待上图中第二页序号应从11开始,因此只要拿到currentPagepageSize,便可以计算当前页的正确序号。

解决方法:

  配置pagination对象,【序号】书写为插槽形式。

1、data中定义pagination:

pagination: {
    current: 1,
    defaultCurrent: 1,
    pageSize: 10,
    onChange: this.onPageChange.bind(this)
}

2、method中增加onPageChange方法:

onPageChange (current) {
     this.pagination.current = current
}

3、【序号】书写为插槽形式:

const columns = [
  {
    title: '序号',
    align: 'center',
    width: 200,
    scopedSlots: { customRender: 'dataIndex' }
  }
]

4、table组件配置:

<a-table
    :columns="columns"
    :dataSource="dataSource"
    bordered
    :pagination="pagination"
    :rowKey="(record, index) => index"
    :loading="tableLoading">
    <template slot="dataIndex" slot-scope="text, record, index">
      <span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
    </template>
</a-table>

antd vue表格分页序号重置问题

上一篇:mybatis无效比较:invalid comparison:java.util.data and java.lang.string


下一篇:React-Antd-表单-时间类控件