关于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属性即可:

     

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

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

index} pagination={false} bordered />

这样就不会报错了。

 

你可能感兴趣的:(前端,javascript)