【Copy攻城狮日志】"Error: if there's nested data, rowKey is required."

栏目: JavaScript · 发布时间: 4年前

内容简介:Created byUpdated by

Created by huqi at 2019-5-18 10:32:30

Updated by huqi at 2019-5-18 12:32:23

【Copy攻城狮日志】

↑开局一张图,故事全靠编↑

从最新学习d2开源项目说起

有时候,非常非常地迷茫,找不到方向,找不到人生的方向,找不到未来的方向,找不到学习的方向。现在的状态,犹如一叶扁舟,漂浮着茫茫的大海之上。工作日,每天起床机械地去上班,周末,每天优哉游哉,好像一个木偶,被生活蹂躏的木偶,意识以外的力量在操纵着的木偶。在技术上的积累也渐渐走下坡路了,基础不牢固,也采取过一些办法,不知是疗程不够还是病入膏肓已无可救药,总之,明明知道有病,却怎么也治不好。最近,又加入了 梁sir暴走前端 计划,重新折腾起来,于是开始学习,目前折腾了一下Vue.js,在看 d2 改版 renren 的项目,跟着@ FairyEver 大佬踩了不少坑,其中就有element-ui的这个坑-- "Error: if there's nested data, rowKey is required."

刨根问到底,探究报错的原因

首先,不用怀疑,这是一个bug,理论上是element-ui中el-table的一个bug,但又不能说是一个bug,因为人家框架原型设计的就是这样,只是可能我们使用不当。先粗略分析一下报错的原因:

1. 没有加row-key属性

如文档中所提及的,结合报错的字面意思 ☞ 文档:table

支持树类型的数据。此时,必须要指定 row-key。支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与 加载函数 load ,指定 row 中的 hasChildren 来确定哪些行是包含子节点。

那就copy一下官方案例,el-table加上row-key="id"

<el-table
    row-key="id"
 >
 </ el-table>

不过,对row-key的支持应该是2019年3月左右提供的。☞ Table: support tree structure data

修改element-ui版本

很气人啊,我只能修改package.json文件中依赖element-ui的版本。

一般来说,默认安装的依赖,如果package.json中带 ^ 符号的话,会默认安装最近的版本,去掉 ^ 符号,重新安装一下element-ui依赖就可以解决了。至于改用那个版本,按照实际来吧,如果去掉 ^ 符号重新安装能成功就可以了,不行就换个版本吧。

【Copy攻城狮日志】

修改children字段

这个就不是很好的处理方式了,毕竟后台返回来的数据,你要他改字段,呵呵呵,当然,你话语权足够的话,又不想改前台代码,就让他替换一下childre字段吧。当然,官方将提供更改 children键值的api

别问我children字段哪来的,我的是后台传过来的;

【Copy攻城狮日志】

也别问我为什么会冲突,

我猜是和之里冲突 ☞源码 :

getChildren(forceInit = false) { // this is data
    if (this.level === 0) return this.data;
    const data = this.data;
    if (!data) return null;

    const props = this.store.props;
    let children = 'children';
    if (props) {
      children = props.children || 'children';
    }

    if (data[children] === undefined) {
      data[children] = null;
    }

    if (forceInit && !data[children]) {
      data[children] = [];
    }

    return data[children];
  }

至于怎么前台怎么修改children字段,我也不会,大概是深浅拷贝之类的操作吧

我最终通过修改element-ui版本和加row-key属性解决了,前端路漫漫坑多多,能趟一个算一个!

本小篇写于 天河区图书馆华港分馆 ,第一次来图书馆看……小姐姐。

【Copy攻城狮日志】

本作品Loner 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议 进行许可。

基于 https://github.om/hu-qi/Loner 上的作品创作。

本许可协议授权之外的使用权限可以从 https://creativecommons.org/l... 处获得。


以上所述就是小编给大家介绍的《【Copy攻城狮日志】"Error: if there's nested data, rowKey is required."》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

浪潮之巅(下册)

浪潮之巅(下册)

吴军 / 人民邮电出版社 / 2013-6 / 45.00元

《浪潮之巅(第2版)(下册)》不是一本科技产业发展历史集,而是在这个数字时代,一本IT人非读不可,而非IT人也应该阅读的作品。一个企业的发展与崛起,绝非只是空有领导强人即可达成。任何的决策、同期的商业环境,都在都影响着企业的兴衰。《浪潮之巅》不只是一本历史书,除了讲述科技顶尖企业的发展规律,对于华尔街如何左右科技公司,以及金融风暴对科技产业的冲击,也多有着墨。此外,《浪潮之巅》也着力讲述很多尚在普......一起来看看 《浪潮之巅(下册)》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具