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