antd Table 组件列表序号自增设置

最新推荐文章于 2025-04-07 15:47:45 发布

读心悦

最新推荐文章于 2025-04-07 15:47:45 发布

阅读量8k

点赞数 1

分类专栏：深入浅出react 文章标签： react antd

本文链接：https://blog.youkuaiyun.com/xuelian3015/article/details/104628488

版权

132 篇文章 ¥15.90 ¥99.00

订阅专栏

本文介绍了如何在Ant Design的Table组件中自定义列表序号，以解决后端删除数据导致序号断层的问题。通过在columns的render函数中设置序号，结合text、record和index参数，实现从1开始的连续序号显示，只影响当前页面的显示，不影响原始数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

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

如下图：

在这里插入图片描述

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

在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。