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

2021-08-02 18:33:01 阅读：287 来源： 互联网

标签：index pagination vue pageSize 重置 current onPageChange 序号 antd

问题描述：

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

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

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

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

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

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

解决方法：

　　配置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>

标签：index,pagination,vue,pageSize,重置,current,onPageChange,序号,antd
来源： https://www.cnblogs.com/coderxin/p/15091142.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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