vue 實現自定義樹狀結構圖

vue 實現自定義樹狀結構圖

• 可動態添加、刪除
• 可總體拖拽
• 如需內容也爲動態，把組件內容使用input、select等組件替換
• 數據結構

treeData: [{
      name: '1',
      child: [
          { name: '2',
          child: [{ name: '1' }, { name: '2' }]
          },
          { name: '1',
          child: [{ name: '1' }, { name: '2' }]
          }
      ]
   }]

思路：

一、先寫好一個公共的組件TreeItem

二、加上條件判斷

三、而後遞歸調用自身組件

四、最後直接調用組件就完成了

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