antd Table的column中的key和dataIndex的作用是什么

在 Ant Design 的 Table 组件中，column 是一个描述表格列的配置对象数组。key 和 dataIndex 是 column 对象中的两个属性，它们各自有不同的作用：

key

• key 是 React 需要的一个特殊属性，它在列表中用于识别每个唯一的列表项。
• 在 Table 组件的 column 配置中，key 用于唯一标识一个列。当你在列中渲染自定义组件时，这个 key 尤为重要，因为它帮助 React 进行高效的更新和重渲染。
• 如果没有提供 key 属性，Ant Design 会尝试使用 dataIndex 作为列的 key。但是，最佳实践是为每个列明确提供一个 key，尤其是当列没有 dataIndex 或者有相同的 dataIndex 时。

dataIndex

• dataIndex 指定了该列数据在数据源中对应的字段名称。
• Table 组件使用 dataIndex 来检索每行数据对象中的相应值。例如，如果 dataIndex 设置为 'name'，那么 Table 将会展示每行数据中 name 属性的值在该列中。
• dataIndex 也可以是一个路径数组，用于从嵌套对象中提取值。例如，dataIndex: ['user', 'name'] 会访问 data.user.name 的值。

这两个属性结合起来，使得 Table 组件能够正确渲染数据并高效地更新 DOM。以下是一个简单的列配置示例：

const columns = [
  {
    title: 'Name',      // 列头显示文字
    key: 'name',        // React 列表的 key
    dataIndex: 'name',  // 数据字段名称
  },
  {
    title: 'Age',
    key: 'age',
    dataIndex: 'age',
  },
  // ...更多列配置
];

在这个示例中，每个列配置都包含 title、key 和 dataIndex。title 是列头显示的文本，key 是列的唯一标识，而 dataIndex 是数据对象中对应的字段名。