Antd使用table组件实现表格序号自增

Antd是一款优秀的基于React框架的UI库，它涵盖了丰富的组件库。其中就包含了table组件，可以用来实现表格的展示和操作，非常方便实用。

在实际的开发中，我们经常需要给表格添加序号列，用来标记表格数据的顺序。这个功能比较简单，可以通过纯前端的方式实现，也可以通过后端返回数据时带上序号实现。下面我们演示一下如何在Antd的table组件中添加序号列。

首先来看一下我们的数据格式：

const dataSource = [

  {

    key: '1',

    name: '张三',

    age: 18,

    address: '北京市海淀区'

  },

  {

    key: '2',

    name: '李四',

    age: 20,

    address: '上海市静安区'

  },

  {

    key: '3',

    name: '王五',

    age: 22,

    address: '广州市天河区'

  },

];

我们定义了一个数组，里面包含了三个对象，每个对象描述了一个人的信息，包括姓名、年龄和地址。这是我们将要在表格中展示的数据。

接下来，我们来看一下如何添加序号列。通过查看Antd的table组件文档，我们可以发现，table组件通过在columns属性中定义数组来定义表格的列。我们只需要在这个数组中添加一个‘序号’列即可，代码如下：

const columns = [

  {

    title: '序号',

    dataIndex: 'index',

    render: (text, record, index) => ${index + 1},

  },

  {

    title: '姓名',

    dataIndex: 'name',

    key: 'name',

  },

  {

    title: '年龄',

    dataIndex: 'age',

    key: 'age',

  },

  {

    title: '地址',

    dataIndex: 'address',

    key: 'address',

  },

];

这里我们定义了四个列，其中 个列是我们新添加的‘序号’列，通过dataIndex属性指定数据源中的字段，render属性指定了这个列的渲染方式，这里我们通过使用ES6的模板字符串的方式将index+1渲染到表格上。

最后，我们将数据和表格列传递给table组件即可：

ReactDOM.render(

  <Table dataSource={dataSource} columns={columns} />,

  mountNode

);

这样，我们就完成了表格序号自增的效果，是不是很简单方便呢？另外需要注意的一点是，通过这种方式添加的序号列，如果对表格进行了排序或筛选等操作，序号也会自动更新。