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

最新推荐文章于 2023-10-19 15:24:36 发布

宋小土

最新推荐文章于 2023-10-19 15:24:36 发布

阅读量8k

点赞数 11

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_45003732/article/details/126519611

版权

项目场景：

在使用ant design vue框架的时候，表格组件里面会碰到 Each record in table should have a unique key prop,or set rowKey to an unique primary key这样的报错，具体见下图

在这里插入图片描述

原因分析：

我看了一下官网，以及搜索了很多答案，最终原因是：
在 Table 中，dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。如果你的数据没有这个属性，务必使用 rowKey 来指定数据列的主键。若没有指定，控制台会出现缺少 key 的提示，表格组件也会出现各类奇怪的错误。

解决方案：

就是在<a-table></a-table>标签里面加上 :rowKey="(record, index) => { return index }" 这句话就可以解决啦~
在这里插入图片描述

<a-table 
      :row-selection="rowSelection" 
      :rowKey="(record, index) => { return index }" 
      :columns="columns"
      :data-source="data"
      bordered 
      :pagination="pagination">
     </a-table>