Ant Design - Table Columns中dataIndex的含义

在Ant Design中，如果我们要使用table，可以到官网文档中查看详细的例子。

但是在例子中，你会发现类似以下的数据结构：

const columns = [{
  title: 'Name',
  dataIndex: 'name',
  key: 'name',
  render: text => (<a href="javascript:;">{text}</a>),
}, {
  title: 'Age',
  dataIndex: 'age',
  key: 'age',
}, {
  title: 'Address',
  dataIndex: 'address',
  key: 'address',
}, {
  title: 'Tags',
  key: 'tags',
  dataIndex: 'tags',
  render: tags => (
    <span>
      {tags.map(tag => <Tag color="blue" key={tag}>{tag}</Tag>)}
    </span>
  ),
}, {
  title: 'Action',
  key: 'action',
  render: (text, record) => (
    <span>
      <a href="javascript:;">Invite {record.name}</a>
      <Divider type="vertical" />
      <a href="javascript:;">Delete</a>
    </span>
  ),
}];

可以看到，数组的object中有key，dataIndex，title，render这些keys。

title以及render都好理解，title指的是thead中每个th的显示字段，render指的是用什么样的方式来显示数据（通常为一个返回ReactNode的函数）。

那么dataIndex指的是什么意思呢？

我们先来看一下官方文档怎么说：

Property	Description	Type
dataIndex	Display field of the data record, could be set like a.b.c、a[0].b.c[1] 列数据在数据项中对应的 key，支持 a.b.c、a[0].b.c[1] 的嵌套写法	string

由于英文文档解释的很潦草，这里我把中文文档中的解释也加了进去。

我们看到，假设我们dataIndex为name，那么我们在table的dataSource中指定的每一个数据中，都必须包含有name为key的对象，而显示出的数据就是相应key对应的数据：

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

假设我们的数据结构更为复杂一些，例如name: {firstname: 'Eagle', lastname: 'Luo'}，那么我们需要将dataIndex改为name.firstname或name.lastname来获取下一层级的数据。

结合以上例子来看，dataIndex的含义就比较明确了。需要注意的一点，如果我们已经使用了唯一的dataIndex，那么我们就不再需要给每个column加上key了。