1. 程式人生 > 程式設計 >vue自定義樹狀結構圖的實現方法

vue自定義樹狀結構圖的實現方法

vue 實現自定義樹狀結構圖

  • 可動態新增、刪除
  • 可整體拖拽
  • 如需內容也為動態,把元件內容使用input、select等元件替換
  • 資料結構
 treeData: [{
  name: '1',child: [
   { name: '2',child: [{ name: '1' },{ name: '2' }]
   },{ name: '1',{ name: '2' }]
   }
  ]
 }]

vue自定義樹狀結構圖的實現方法

思路:

1、先寫好一個公共的元件TreeItem

vue自定義樹狀結構圖的實現方法

vue自定義樹狀結構圖的實現方法

2、加上條件判斷

vue自定義樹狀結構圖的實現方法

3、然後遞迴呼叫自身元件

vue自定義樹狀結構圖的實現方法

4、最後直接呼叫元件就完成了

vue自定義樹狀結構圖的實現方法

gitHub地址連結 https://github.com/hellozdq/customTree

總結

到此這篇關於vue自定義樹狀結構圖實現的文章就介紹到這了,更多相關vue自定義樹狀結構圖內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!