Ant Design ProTable 组件：如何显示当前数据的行号

在 ProTable 组件中，可以使用 rowIndex 属性来显示当前数据的行号。具体的使用方法如下：

import { ProTable } from '@ant-design/pro-table';

const dataSource = [
  { name: 'John', age: 28 },
  { name: 'Peter', age: 32 },
  { name: 'Mary', age: 25 },
];

const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    valueType: 'indexBorder',
    width: 80,
  },
  {
    title: '姓名',
    dataIndex: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
  },
];

const MyTable = () => {
  return (
    <ProTable
      dataSource={dataSource}
      columns={columns}
      rowKey='name'
      search={false}
      toolbar={false}
      options={false}
      pagination={false}
      tableLayout='fixed'
      rowClassName={(record, index) => index % 2 === 0 ? 'even-row' : 'odd-row'}
      rowProps={() => ({ 'data-testid': 'table-row' })}
      recordCreatorProps={false}
    />
  );
};

export default MyTable;

在上面的代码中，我们使用了 valueType: 'indexBorder' 来显示行号，并使用了 rowClassName 来为行设置样式。你可以根据需要自定义行号的样式和行的样式。

注意：rowIndex 属性只能显示当前数据的行号，如果有分页功能，行号不会随着翻页而改变。如果需要显示全局的行号，可以通过服务端返回的数据自行处理。