参考链接:
https://www.cnblogs.com/emmamayday/p/14240948.html
https://blog.csdn.net/qq_38344500/article/details/105995886
1、使用render
在 columns 中添加字段
{ title: '序号', dataIndex: 'index', key: 'index', align: 'center', 50, customRender: (text,record,index) => `${index+1}`, },
使用customRender函数来渲染序号的数据,在customRender函数中:
1、text表示是序号一列默认显示的数据
2、record表示是一行的所有数据
3、index表示Table表格数据的下标,也就是数组的下标
因为数组的下标是从0开始的,所以需要+1。
这样设置不改变原数据中序号,只改变表格一页的中所显示数据的序号:如一页显示10条数据,那么本页的序号则是从1~10
这个只能解决不会翻页的自增问题,如果翻页会出现下一页也是从1开始
2、使用 slot 插槽
在 columns 中添加字段
const columns = [ { title: '序号', dataIndex: 'index', key: 'index', align: 'center', 50, // customRender: (text, record, index) => `${index + 1}`. scopedSlots: { customRender: 'num' } }, ]
data已经定义了 current 以及 pageSize
在 a-table 组件添加
<a-table :columns="columns" :data-source="data" :pagination="false" rowKey="id" bordered > <span slot="num" slot-scope="text, record, index" > {{(current-1)*pageSize+parseInt(index)+1}} </span> </a-table>
这样ant-design的VUE的table分页绑定的pagination就可以实现分页序号自增了,后一页的开始是前一页最后序号的+1了