antreact 实现序列号

Ant Design React 序列号的实现可以通过以下步骤完成：

1. 引入需要的组件和样式：使用 Ant Design React 中的 Table 组件，同时引入样式。

import { Table } from 'antd';
import 'antd/dist/antd.css';

2. 设置表格列：在 columns 中设置表格列，其中需要添加一列序号。

const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    width: '5%',
    render: (text, record, index) => index + 1,
  },
  {
    title: '姓名',
    dataIndex: 'name',
    width: '20%',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    width: '10%',
  },
  {
    title: '地址',
    dataIndex: 'address',
  },
];

在上述代码中，使用 render 函数来自定义序号列的内容，其中 index 参数即为当前行的索引。

3. 设置数据源：定义数据源并传入 Table 组件中。

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

function App() {
  return <Table columns={columns} dataSource={data} />;
}

在上述代码中，设置了一个 data 数组作为数据源，并传入 Table 组件中。

4. 运行程序：运行程序即可看到已经添加了序号列的表格。

完整代码如下：

import { Table } from 'antd';
import 'antd/dist/antd.css';

const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    width: '5%',
    render: (text, record, index) => index + 1,
  },
  {
    title: '姓名',
    dataIndex: 'name',
    width: '20%',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    width: '10%',
  },
  {
    title: '地址',
    dataIndex: 'address',
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

function App() {
  return <Table columns={columns} dataSource={data} />;
}

export default App;