问题描述:
使用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>