在使用element的表格树形结构时候报错：[Vue warn]: Error in callback for watcher “data”: “Error: if there‘s nested da

已于 2024-01-23 12:57:12 修改
阅读量5k 收藏 1
点赞数
分类专栏： 前端 文章标签： vue.js elementui
于 2021-05-25 15:58:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41662255/article/details/117257834
版权

Element ui 中的table组件属性结构报错问题

问题描述

在使用element的表格树形结构时候报错：[Vue warn]: Error in render: ”Error: for nested data item, row-key is required.“

看到了网上好多都觉得是版本是问题，我自己试过了可以通过row-key的值来修复的

版本展示

下面是我使用的版本我使用的是这个版本
如果服务端的返回数据是这样的在这里插入图片描述

代码展示

row-key="id" 改为 row-key="cat_id"

就是row-key绑定的数据指定一个存在的ID就可以了，实际解决本人问题后写的文章，希望能解决大家的问题，欢迎点赞、收藏～有问题可以评论，看到后会回复！！！

感谢观看，希望对读者有所帮助，有疑问可以评论，不定时回复

blog-xiaoh
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目报错：Uncaught SyntaxError: Unexpected token <
10-17
主要介绍了Vue项目报错：Uncaught SyntaxError: Unexpected token <，在引入第三方依赖的 JS 文件时，遇到的一个问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue项目报错：Uncaught SyntaxError: Unexpected token
01-19
今天做一个 VUE 的项目，在引入第三方依赖的 JS 文件时，遇到了一个问题： 控制台的提示：Uncaught SyntaxError: Unexpected token < 按照提示进入文件，再看如下图： 仔细看了看 index.html 文件,发现原本我...
ElementUI报错 Error in callback for watcher “data“: “Error: [ElTable] prop row-key is required“
A_lamp的博客
03-07 1083
在table 上面加:key="id"
vue.min.js:6 Error: if there‘s nested data, rowKey is required. 解决办法
dw将限制条件全部检测通过后才能提交表单
11-09 284
vue.min.js:6 Error: if there‘s nested data, rowKey is required. 解决办法
【VUE】Vue中实现树状表格结构编辑与版本对比的详细技术实现
九日的博客
04-24 1163
在data函数中定义的tableData数组，包含了表格数据和结构信息。此外，我们会备份原始数据以供版本对比之用。data() {return {},// 模拟加载物料信息},methods: {...item,level,parent,}));},// 示例方法：模拟加载物料信息this.materials = [{ materialsTypeId: 1, materialsTypeName: '物料1' }];
for nested data item, row-key is required.报错解决
最新发布
你的阿迁
07-05 254
今天差点被一个不起眼的bug搞到吐，就是在给表格设置row-key的时候，一直设置不成功，一直报错缺少row-key，一共就那两行代码 实在是找不到还存在什么问题... 先看下报错截图...测试的过程中 给children里面的数据也加上了id 这时候页面已经出现了一些反应... 然后就考虑是不是这个参数的问题... 随便写了个参数 问题解决...看下代码 我在展开行里面用到了一个表格 并且存放表格数据用的参数是children 怎么也没想到问题能出在这种地方！
el-table显示树形数据报错
小方块的世界
06-08 2953
问题描述 el-table显示树形数据报错 Error: for nested data item, row-key is required TypeError: this.$el.querySelectorAll is not a function 问题分析 后端返回的树形结构中没有返回id字段，所以需要手动遍历数据给数据添加id，el-table中默认设置row-key=“id” ，没有id，又没有设置row-key的值这时就会报错。 问题解决 递归数据 recursive(data) {
element 树形表格报Error: for nested data item, row-key is required
海阔天空
08-23 1918
element树形表格报以上这个错，按网上的说法改 roke-key, 去掉element版本号前的^都不行，最后发现在每条数据里加上一个id属性就可以了，我数据本身没有id这个字段。
“Error: for nested data item, row-key is required.
manman的分享
08-04 1万+
问题： vue elementUI 开发树形可折叠表格时报错：Error: for nested data item, row-key is required. 解决方法：将`row-key="id"` 替换成 `row-key="areaId"`，tableData的id也换为`areaId`，总之就是tableData中的id名称与row-key的名称一致，个人猜想可能是`id`这个名字太常用了，引起的冲突
Error in callback for watcher "data": "Error: if there's nested data, rowKey is required."
6块腹肌的博客
10-11 3449
Error in callback for watcher "data": "Error: if there's nested data, rowKey is required." 该问题的解决方案为： 加一个row-key即可，值为嵌套表格的字段名
elment树形出现的报错:Error in callback for watcher “data“: “TypeError: children.indexOf is not a function“
ferwagrea的博客
05-14 1355
如果出现下面报错,就是你的数据类型的问题 对你的数据加一个中括号（[]）就好了，原来的数据this.testJsonData=this.testJson.data;更改后 this.testJsonData=[this.testJson.data];就可以了
Error:for nested data item, row-key is required.的解决方法
热门推荐
qq_39897978的博客
03-03 3万+
一、问题描述 遇到这个问题，首先跟着网上的教程更改，去掉package.json中的element-ui 版本号前面“^”,不行之后我以为是我的版本问题，换了版本之后，报的错误更多了，然后给<el-table>加上row-key:“id”,还是不行 部分重要代码是 load函数 按理说这样就可以达到预期的效果但是问题是一直孩还在报错 现在的界面 数据还是加载不出来 二、解决办法...
ElementUI报错 Error in callback for watcher "data": "Error: [ElTable] prop row-key is required"
yangwq的博客
03-30 1万+
前端报错Error in callback for watcher "data": "Error: [ElTable] prop row-key is required" Error: [ElTable] prop row-key is required <el-table :data="props.row.Entities" border size="mini...
解决v-for中使用v-if或者v-bind:class失效的问题
10-17
在Vue.js开发过程中，我们经常会遇到在`v-for`循环中使用`v-if`或`v-bind:class`（简写为`:class`）时遇到一些失效的问题。这主要是由于Vue的渲染机制导致的，理解这个问题的关键在于理解Vue的响应式系统和虚拟DOM的...
vue.js与element-ui实现菜单树形结构的解决方法
12-11
由于业务需要，要求实现树形菜单，且菜单数据由后台返回，在网上找了几篇文章，看下来总算有了解决办法。 场景：根据业务要求，需要实现活动的树形菜单，菜单数据由后台返回，最后的效果图如下： 后台返回的数据...
详解vue-cli+element-ui树形表格(多级表格折腾小计)
10-17
主要介绍了vue-cli + element-ui 树形表格（多级表格折腾小计），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
[VUE WARN]: ERROR IN CALLBACK FOR WATCHER “data“，监听数据时报错
weixin_48986139的博客
09-30 7318
关于报错 [VUE WARN]: ERROR IN CALLBACK FOR WATCHER “data”，“TypeError: Cannot read properties of null (reading ‘xxxxxxx’)” 含义 这个错误是你监听data时方法里的值为null，造成调用xxxxxxx时导致报错, 解决办法 一般可以在调用方法前，确保它存在，例如下图： @Watch('data') 你的监听函数的名(newVal){ this.$nextTick(()=>{
报错vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: “TypeError: Cannot read property ‘length‘
bigbigpigsobig的博客
07-21 1万+
在用 element-ui 做表单复选框的时候，出现报错 vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property ‘length’，如下图所示： 代码如下： 解决办法就是在form对象里添加checkList字段：如下： export default { data() { return { form: { checkList: [] } } }
[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex...
abc942857321的博客
11-22 1万+
今天在学习的时候遇到一个这样的问题，选择搜索推荐列表中其中一项歌曲，需要通过Vuex 的actions 提交 state，选择的歌曲会插入到当前的播放列表和随机播放列表中，如果列表中原本就存在这首歌曲，如果把原来的这首歌曲删除掉，这样一来，就在actions中修改了playlist 和 sequenceList 两个对象数组，所以在页面中就会爆出“不要在mutation...
[Vue warn]: Error in callback for watcher "BMap": "TypeError: Cannot
10-27
这是一个Vue的错误提示，意思是在一个名为"BMap"的观察者的回调函数中出现了错误，具体错误是"TypeError: Cannot..."。这个错误提示并没有提供足够的上下文信息，我们需要更多的信息才能确定问题的根源。可能的原因包括但不限于：代码中使用了未定义的变量或方法、数据类型不匹配、组件生命周期钩子函数中的错误等等。我们需要进一步检查代码以确定问题所在。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值