Ant Design Vue-table 序号自增的问题 翻页自增

参考链接:

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了

原文地址:https://www.cnblogs.com/deny/p/15002446.html