el-tree控件動態獲取數據賦值給treeData渲染問題:render-after-expand屬性


問題描述:

  1、treeData中的兩個children分別對應的頁面渲染效果,區別是第一個children是treeData的二級屬性,第二個children是treeData的三級屬性。

 

 

   2、當異步請求接口獲取值的時候,二級屬性成功賦值,三級屬性賦值之后頁面不顯示:

  

 

 

   二級children正常顯示:

  

 

  三級children沒有顯示:

 

   

 

 

   但是此時打印this.treeData[2].children[0].children確實是獲取過來的接口數據,那是什么原因?

解決:

  第一種方法:官網中給出的方法,設置:render-after-expand='false'就可以了。是否在第一次展開某個樹節點后才渲染其子節點的意思是如果我第一次渲染默認是未展開的話,那你就不給我渲染了?

那有的人可能沒有注意到render-after-expand這個屬性,誤打誤撞寫了default-expand-all這個屬性,那也正好是展開狀態,所以就可以正常渲染了,或者是:default-expanded-keys="[0, 1, 2, 3]"也可能碰巧遇不到這個bug。還有的人是點擊二級children之后搞一個懶加載的圈圈在那轉,然后它不就打開到三級children了嘛,獲取到數據后再渲染出來,我們公司的人之前就是這么做的,估計他當時沒有找到這個原因哈哈哈,我特么還想着這個直接渲染不就行了,干嘛這么麻煩啊,原來如此。但是我想說,elementUI官方不能直接讓render-after-expand默認為false嘛,踩這個坑好冤枉。。

 

  

 

 

   第二種方法:思路是將整個treeData都復制下來,如果層級比較深可以用JSON.parse(JSON.stringify()),對新數組進行修改,再賦值給treeData。這種做法的前提是二級children已經可以獲取接口的值進行渲染了,那么重新賦值treeData肯定也是沒問題的,但是這個並沒有找到這個問題的根本原因啊,不過這是一個騷操作,以后說不定會遇到其他找不到原因的bug,正好可以先解決着,能跑了再說優化的事

  

 

   第三種方法:這種方法也是建立在二級children能夠正確渲染的前提下,手動給三級children加了一個對象屬性

  

 

注意:

  寫在data中的數據在組件創建的時候就已經加了數據劫持了,它就是響應式的,這里遇到的問題是:數據已經賦值到treeData上了,也可以正常打印出來,但是頁面就是沒有渲染。

  一開始以為是數據沒有響應,用this.$set()搗鼓了半天,浪費了不少時間,下次遇到很奇怪的bug的時候一定要多看官方文檔!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM