如何获取蚂蚁设计表中的行索引？答案

【问题标题】：How to get index of row in ant design table?如何获取蚂蚁设计表中的行索引？
【发布时间】：2021-02-13 19:35:21
【问题描述】：

我想在 ant design table 中显示行索引。例如：我得到的 10 行数据为 1 到 10。

const columns = [{
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    width: '5%'
  },
...
];
<Table key="table" columns={columns} dataSource={listData} pagination= {false} />

【问题讨论】：

标签： reactjs react-native ant-design-pro

【解决方案1】：

    const columns = [{
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    width: '5%',
    **render:(item, record, index)=>(<>{index}</>)**
  }]
    <Table key="table" columns={columns} dataSource={listData} pagination= {false}/>

您可以通过渲染列从数据集中找到索引。

【讨论】：

【解决方案2】：

您的要求不清楚。最好向我们展示您想要实现的输出。如果您需要获取“列”数组中对象的索引，则可以使用迭代器来获取它。

例如 - 1：

columns.map((column, index) => {
  // Your statements will go here
})

例如 - 2：

columns.forEach((column, index) => {
  // Your statements will go here
})

实时示例：

<Table key="table" columns={columns} dataSource={listData} pagination= {false} >
  <tbody>
      {columns.map((column, index) => (
        <row>
          <td>{index}</td>
        </row>
      ))}
    }
  </tbody>
</Table>

还有其他迭代器，例如 'lodash' 'forEach'。这可能是你开始学习迭代器https://www.w3schools.com/js/js_array_iteration.asp

【讨论】：

我的意思是像blog.sqlauthority.com/i/b/noindex1.jpg，这张图片的第一列。我不知道这在英语中是什么意思？
你能提供'listData'的详细信息吗？
只需输入我从服务器获取的 json，我想显示索引而不是 ID 以确保安全
title: "ID", width: "5%", render: (text, record) => (listData.indexOf(record) + 1) 我修好了
@thaovd1712 谢谢！使用 indexOf 是一个很好的解决方案