【Copy攻城獅日志】"Error: if there's nested dat

褰辯話發(fā)布于2019-08-26 13:50 / 3086人閱讀

摘要：工作日，每天起床機(jī)械地去上班，周末，每天優(yōu)哉游哉，好像一個(gè)木偶，被生活蹂躪的木偶，意識(shí)以外的力量在操縱著的木偶。支持子節(jié)點(diǎn)數(shù)據(jù)異步加載。當(dāng)然，官方將提供更改鍵值的。本許可協(xié)議授權(quán)之外的使用權(quán)限可以從處獲得。

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

↑開局一張圖，故事全靠編↑

從最新學(xué)習(xí)d2開源項(xiàng)目說起

有時(shí)候，非常非常地迷茫，找不到方向，找不到人生的方向，找不到未來的方向，找不到學(xué)習(xí)的方向。現(xiàn)在的狀態(tài)，猶如一葉扁舟，漂浮著茫茫的大海之上。工作日，每天起床機(jī)械地去上班，周末，每天優(yōu)哉游哉，好像一個(gè)木偶，被生活蹂躪的木偶，意識(shí)以外的力量在操縱著的木偶。在技術(shù)上的積累也漸漸走下坡路了，基礎(chǔ)不牢固，也采取過一些辦法，不知是療程不夠還是病入膏肓已無可救藥，總之，明明知道有病，卻怎么也治不好。最近，又加入了梁sir的暴走前端計(jì)劃，重新折騰起來，于是開始學(xué)習(xí)，目前折騰了一下Vue.js，在看d2改版renren的項(xiàng)目,跟著@FairyEver大佬踩了不少坑,其中就有element-ui的這個(gè)坑--"Error: if there"s nested data, rowKey is required."

刨根問到底，探究報(bào)錯(cuò)的原因

首先，不用懷疑，這是一個(gè)bug，理論上是element-ui中el-table的一個(gè)bug，但又不能說是一個(gè)bug，因?yàn)槿思铱蚣茉驮O(shè)計(jì)的就是這樣，只是可能我們使用不當(dāng)。先粗略分析一下報(bào)錯(cuò)的原因：

1. 沒有加row-key屬性

如文檔中所提及的，結(jié)合報(bào)錯(cuò)的字面意思 ?文檔:table：

支持樹類型的數(shù)據(jù)。此時(shí)，必須要指定 row-key。支持子節(jié)點(diǎn)數(shù)據(jù)異步加載。設(shè)置 Table 的 lazy 屬性為 true 與 加載函數(shù) load ，指定 row 中的 hasChildren 來確定哪些行是包含子節(jié)點(diǎn)。
`

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

不過，對(duì)row-key的支持應(yīng)該是2019年3月左右提供的。?Table: support tree structure data

修改element-ui版本

很氣人啊，我只能修改package.json文件中依賴element-ui的版本。
一般來說，默認(rèn)安裝的依賴，如果package.json中帶 ^ 符號(hào)的話，會(huì)默認(rèn)安裝最近的版本，去掉 ^ 符號(hào)，重新安裝一下element-ui依賴就可以解決了。至于改用那個(gè)版本，按照實(shí)際來吧，如果去掉 ^ 符號(hào)重新安裝能成功就可以了，不行就換個(gè)版本吧。

修改children字段

這個(gè)就不是很好的處理方式了，畢竟后臺(tái)返回來的數(shù)據(jù)，你要他改字段，呵呵呵，當(dāng)然，你話語(yǔ)權(quán)足夠的話，又不想改前臺(tái)代碼，就讓他替換一下childre字段吧。當(dāng)然，官方將提供更改children鍵值的api。
別問我children字段哪來的，我的是后臺(tái)傳過來的；

也別問我為什么會(huì)沖突，
我猜是和之里沖突?源碼:

  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];
  }

至于怎么前臺(tái)怎么修改children字段，我也不會(huì)，大概是深淺拷貝之類的操作吧

我最終通過修改element-ui版本和加row-key屬性解決了，前端路漫漫坑多多，能趟一個(gè)算一個(gè)！

本小篇寫于 天河區(qū)圖書館華港分館 ,第一次來圖書館看……小姐姐。


本作品 由 Loner 采用 知識(shí)共享 署名-非商業(yè)性使用-相同方式共享 4.0 國(guó)際 許可協(xié)議進(jìn)行許可。
基于https://github.om/hu-qi/Loner上的作品創(chuàng)作。
本許可協(xié)議授權(quán)之外的使用權(quán)限可以從 https://creativecommons.org/l... 處獲得。