前端 / 技术 · 2022年1月13日 0

Ant-design-vue 的 table 表格添加序号列

{
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    align: 'center',
    width: 50,
    customRender: (text,record,index) => `${index+1}`,
 }

使用customRender函数来渲染序号的数据,在customRender函数中:

  1. text:序号一列默认显示的数据
  2. record:一行的所有数据
  3. index:Table表格数据的下标,也就是数组的下标

数组的下标是从0开始的,所以需要+1。

这样设置不改变原数据中序号,只改变表格一页的中所显示数据的序号:如一页显示10条数据,那么本页的序号则是从1~10。

https://www.antdv.com/components/table/