Copy攻城狮日志Error-if-theres-nested-data-rowKey-is-required

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

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

从最新学习 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 依赖就可以解决了。至于改用那个版本，按照实际来吧，如果去掉 ^ 符号重新安装能成功就可以了，不行就换个版本吧。

修改 children 字段

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

也别问我为什么会冲突，
我猜是和之里冲突☞源码:

  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 属性解决了，前端路漫漫坑多多，能趟一个算一个！

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

本作品 由 Loner 采用 知识共享 署名 - 非商业性使用 - 相同方式共享 4.0 国际 许可协议进行许可。
基于 https://github.om/hu-qi/Loner 上的作品创作。
本许可协议授权之外的使用权限可以从 https://creativecommons.org/l… 处获得。