【Copy攻城獅日誌】"Error: if there's 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... 處得到。