vue 遞歸組件實現多層嵌套

有個項目這個樣的

 

需求就是點擊這個紅框的內容讓一直這個樣的（如下圖）

就遞歸嘛。vue中有遞歸組件 自己調用自己嘛；代碼再下面

 

vue怎麼遞歸呢 其實就是定義一個name值

 

重點用紅框圈住了主要是name值 。

其實跟遞歸函數一個樣的 就像我判斷是 v-if="item.filterTerm"（是否再調用）   傳值是  :filterTerm='item.filterTerm'  

 

關於我的增加一個子節點、刪除子節點、再遞歸一層  其實就是自己對數據的處理 記得用 Vue.set  不然數據雖然處理了 但是沒有映射到界面