关注互联网应用及运维技术的个人博客

使用antd Table 组件设置列表序号进行自增

如上图所示,列表的序号和可以是后端定义好的,如果后端允许删除数据的话,那么列表序号就是出现断层的效果。

如下图:

为了体验效果,我们需要重新设置列表的序号。代码如下:

在columns参数中序号这一列设置

 columns: [{
                title: "序号",
                render: (text, record, index) => `${index + 1}`
            }]

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

1、text表示是序号一列默认显示的数据,如烟dataIndex:"id"

2、record表示是一行的所有数据

3、index表示Table表格数据的下标,也就是数组的下标

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

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

赞(0)
未经允许不得转载:飞天狒狒 » 使用antd Table 组件设置列表序号进行自增

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址