Element-UI 中 el-table 樹形資料 tree-props使用避坑
:props="defaultProps" 可用把後臺返回資料和 需要的 id進行繫結不用更改後端返回物件屬性為 children

element官網提示設定tree-props為{children: 'children',hasChildren: 'hasChildren'}，data資料需要設定children和hasChildren屬性，row-key也綁定了資料的唯一值變數id，但是樹形結構就是出不來

在el-table中，支援樹型別的資料的顯示。當 row 中包含 children

設定 Table 的 lazy 屬性為 true 與載入函式 load 。通過指定 row 中的 hasChildren 欄位來指定哪些行是包含子節點。children 與 hasChildren 都可以通過 tree-props 配置。

default-expand-all屬性表示預設展開，不需要展開可以刪除。row-key="id" 和 row裡面的屬性有children欄位(即資料裡面需要有children欄位) 是必須的，:tree-props="{children: 'children',hasChildren: 'hasChildren'}

如果不是懶載入的話，後端不要設定hasChildren 這個屬性，要不然不能樹形顯示；如果是懶載入，則需要設定hasChildren欄位。

總結：如果想用樹形結構，後端的欄位名稱必須為children，是固定的，其他名字不可以，例如sons，是無法顯示樹形結構的，否則就要在前端程式碼中配置defaultprops！

參考文獻：https://www.cnblogs.com/pzw23/p/12058457.html
https://blog.csdn.net/Julia_0502/article/details/117488475

總結

寫到這裡也結束了，在文章最後放上一個小小的福利，以下為小編自己在學習過程中整理出的一個關於 前端開發 的學習思路及方向。從事網際網路開發，最主要的是要學好技術，而學習技術是一條慢長而艱苦的道路，不能靠一時激情，也不是熬幾天幾夜就能學好的，必須養成平時努力學習的習慣，更加需要準確的學習方向達到有效的學習效果。

由於內容較多就只放上一個大概的大綱，需要更及詳細的學習思維導圖的 點選我的GitHub免費獲取。
還有免費的 高階web全套視訊教程 前端架構 H5 vue node 小程式 視訊+資料+程式碼+面試題！

全方面的web前端進階實踐技術資料，並且還有技術大牛一起討論交流解決問題。