关于Ant Design Vue Table组件报错，提示table should have a unique `key` prop的解决办法

在使用Ant Design Vue 的Table组件时，加载从接口请求的数据源时，在控制台报出如下的错误：

这个错误的原因是table中的每一列数据都必须将数据的key值作为唯一标识，如果数据源dataSource没有这个属性，那么务必使用rowKey来指定数据列的主键，如果没有指定，控制台就会报以上的提示，表格也会出现各种各样奇怪的错误。

以上是根据React规范。

因此，当控制台出现关于rowkey不唯一的报错时，可能的情况有：

（1）设置了rowKey属性，但所指定字段的值不是唯一的

Warning: Each child in an array or iterator should have a unique "key" prop.

（2）未设置rowKey属性，不过设置了columns属性的配置中第一列的key（react所需），但key所指定字段的值不是唯一的

Warning: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.

（3）未设置rowKey属性，也未设置columns属性的配置中第一列的key（react所需）

Warning: Each record in dataSource of table should have a unique `key` prop, or set `rowKey` to an unique primary key

 

【解决办法】

1. 设置rowKey属性，指定值为唯一的字段

2. 设置columns属性的配置中的key（好像主要是第一列），指定值为唯一的字段

 

     在Table组件中加入rowKey属性即可：

     <Table columns={columns} dataSource={tableData}  rowSelection={rowSelection} rowKey={row=>row.id}/>
同时每条数据需要有个id：

const data = [{
            id: '1',
            user: 'Dior',
            address: 'LA',
          }, {
            id: '2',
            user: 'susie',
            address: 'London',
          }, {
            id: '3',
            user: 'sunny',
            address: 'Japanese',
          }];

 

另外：

Ant Design Table组件的数据源必须用 "key" 属性吗？

其实不是必须的，我们在使用中会发现 "key" 是 mysql 的保留字段，很不方便。可以通过下面的方法解决：

可以给你的数据定一个 dataIndex 之类的值，最后会赋值到 react 的元素 key 上。

rowKey : record => record.dataIndex

或者

rowKey : (record,index)=> index

我是通过下面的方法解决的：

<Table columns={columns} dataSource={list} rowKey={(record, index) => index} pagination={false} bordered />

这样就不会报错了。