Ant Design Vue-Table报错：warning.js?2149:7

最新推荐文章于 2023-03-05 20:51:37 发布
最新推荐文章于 2023-03-05 20:51:37 发布
阅读量3k 收藏 4
点赞数 2
分类专栏： 组件库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45736502/article/details/119454205
版权

今儿使用蚂蚁组件库的table时，遇到个问题：warning.js?2149:7 Warning: [antdv: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.] 。记录一下

这是因为columns中定义的默认key值在返回的数据中没有当前的这个字段造成的，一个是使用rowKey默认指定一个对应的键值对，或者使用类似v-for循环中的下标index来代替

因此在table组件里面引入下面字段即可：

:rowKey="(record,index)=>{return index}"

引入后如下：

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

这样就不会报错了

Robert_c
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
报错 | Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key
A123ppleQueen的博客
11-17 1429
warning.js?2149:7 Warning: [antdv: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.] //这里的代码报了上面的错 <template> <div> <a-table ref="table" size="default" :colum
ant-design-vue-pro：像Pro一样使用Ant Design Vue！
02-05
蚂蚁设计Vue Pro 适用于企业应用程序的即用型UI解决方案，作为Vue样板。 基于 预览： ： 主页： ： 文档： : 变更日志： : 常见问题解答： ： 总览 环境和依赖 节点 纱 网络包 埃斯林特 @ vue / cli〜3 -Vue...
warning.js:7 Warning: [antdv: Table] Each record in dataSource of table should have a unique `key`
qq_43248623的博客
02-25 931
warning.js:7 Warning: [antdv: Table] Each record in dataSource of table should have a unique key
Warning: [antdv: Each record in table should have a unique `key` prop,or set `rowKey` to ...
lmyh1111的博客
06-16 4646
antD表格警告：warning.js?2149:7 Warning: [antdv: Each record in table should have a unique 解决
Warning:Each record in table should have a unique `key` prop
haruhyuhae的博客
08-19 808
warning.js?1d27:7 Warning: [antdv: Each record in table should have a unique key prop,or set rowKey to an unique primary key.] ant design 中的表格引入后警告 解决： 在table组件中写入 id ， 赋给row <a-table :columns="columns" :data-source="data" rowKey=id /> ...
vue-threejs：Three.js的Vue绑定
02-06
vue-threejs [WIP] 绑定从迁移演示： ， // import VueThreejs from 'vue-threejs' // below 0.2.0import * as VueThreejs from 'vue-threejs' // >= 0.2.0Vue . use ( VueThreejs ) < template> ...
vue-antdesign-admin-template：Ant Design Pro Vue模板
02-05
蚂蚁设计专业Vue模板根据改造后的开箱即用的后台管理系统模板，优化了很多内容，更轻量，更简洁，可以在此模板上快速，便捷地去建造自己的后台项目。预览：|优化：项目结构和文件夹命名，项目结构更加合理优化：只...
vue-virtualized-table:基于Vue.js的虚拟表组件
05-28
Vue虚拟表vue-virtual-table组件实现的第二个版本受和启发，API设计具有60％+的一致性。 或者，您可能认为我将它们从React转换为Vue并添加了虚拟化滚动功能。特征支持自定义渲染支持虚拟滚动支持扩展/折叠支持自定义...
vue-simplebar:Vue.js包装器用于simplebar
05-07
Vue.js包装器用于simplebar 你为什么要使用它？ 首先，因为自定义滚动条可能非常令人沮丧，并且您想以一种简单的方式向您的Vue项目中添加 ，并具有一些开箱即用的有用滚动事件和辅助方法的好处。 安装 npm npm ...
使用antd的Table组件时报each record in table should have a unique ‘key’ prop...警告
weixin_46418764的博客
03-05 342
使用antd的table组件导致的警告: each record in table should have a unique ‘key’ prop, or set ‘rowKey’ to an unique primary key
`Form.Item` cannot generate `validateStatus` and `help` automatically解决方案
Schaffer的博客
04-14 4261
在同一个form-item中使用v-for循环遍历生成了多个select框（其他可循环展示的控件都是同样的问题），并且每个都加上了v-decorator作为数组，但实际每一个from-item中只允许有一个v-decorator进行绑定。 解决方案： 在v-for内要生成的要加v-decorator的元素（如input）外再包裹一层form-item，即对n个元素进行循环遍历将生成n个form-item，满足了一个form-item仅有一个v-decorator的要求，不再报错。 使用select组建时的
Ant Design Vue 中遇到的坑（二） `Form.Item` cannot generate `validateStatus` and `help` automatically...
热门推荐
陈乾的博客
01-12 1万+
一、发生场景 在使用Ant Design 时，进入页面打开控制台发现有红色的警告： ‘Form.Item’ cannot generate ‘validateStatus’ and ‘help’ automatically, while there are more than one ‘getFieldDecorator’ in it. 二、原因 经过查找发现在同一个form-item中使用v-for循环遍历生成了多个input框，并且每个都加上了v-decorator作为数组，但实际每一个from-i
[ant-design-vue]ant-design-vue的table列宽设置问题
前端
04-22 7766
table表格宽度问题 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>table</title> </head> <body> <table border="1"> <colgroup width="200"> <col width="100"></col> <c
前端React：antd Table组件 去除key、rowKey相关的Warning
tangguoxing000的博客
08-06 9644
感谢鹊湖居士（https://www.linjiaqun.com/js/329.html），成功解决了问题，记录学习了，现转载如下： React项目中总是存在Key相关的warning，这个不能忍！！！ 目前遇到的warning有以下几个： ⑴设置了rowKey属性，但所指定字段的值不是唯一的 Warning: Each child in an array or iterator sh...
antdv: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key
本博客只是个人的知识点的小总结，方便自己查阅，能帮助到你是最好的，如果有不正确之处，欢迎你的指正
08-25 7668
antdv: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key
Ant Design Vue - Warning: [antdv: Table] Each record in dataSource of table should have...
王佳斌
11-29 2031
前言 表格组件报错，这由于 columns 中定义的默认 key 值在返回的数据中没有当前的这个字段造成的，一个是使用 rowKey 默认指定一个对应的键值对，或者使用类似 v-for 循环中的下标 index 来代替！ Warning: [antdv: Table] Each record in dataSource of table should have a unique `key` 解决方案 table 配置 rowKey 即可，如下所示： :rowKey="(record,index) =&gt
vue3.0 AntDesignVue2.0 table的rowkey报错问题解决方法
YUSIR 完美CODING世界
08-26 2760
Warning: [antdv: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.] Warning: [antdv: Table] Each record in dataSource of table should have a unique `key` prop, or set `rowKey` of Table to an unique primary key
warning.js?d96e:34 Warning: You cannot set a form field before rendering a field associated with the
SSophia的博客
11-11 7253
warning.js?d96e:34 Warning: You cannot set a form field before rendering a field associated with the value. You can use getFieldDecorator(id, options) instead v-decorator="[id, options]" to register it before render. 在接口返回数据后，给动态表单复制遇到个这么个问题，第一次点编辑时，会报下图中的
ERROR in ./src/App.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/App.vue?vue&type=script&lang=js&) 2:0-38 Module not found: Error: Can't resolve 'ant-design-vue' in 'Z:\shhfw\src' @ ./src/App.vue?vue&type=script&lang=js& 1:0-191 1:207-210 1:212-400 1:212-400 @ ./src/App.vue 2:0-55 3:0-50 3:0-50 10:2-8 @ ./src/main.js 2:0-28 15:17-20
最新发布
06-12
这个错误提示显示无法找到 'ant-design-vue' 模块，可能是因为你没有安装这个依赖项或者安装的版本与你的代码不兼容。 你可以尝试执行以下命令来安装 'ant-design-vue': ``` npm install ant-design-vue --save ``...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值