vue自定義樹狀結(jié)構(gòu)圖的實現(xiàn)方法
更新時間：2020年10月18日 10:55:16 作者：雨中
這篇文章主要給大家介紹了關(guān)于vue自定義樹狀結(jié)構(gòu)圖的實現(xiàn)方法，文中通過圖文介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
vue 實現(xiàn)自定義樹狀結(jié)構(gòu)圖
- 可動態(tài)添加、刪除
- 可整體拖拽
- 如需內(nèi)容也為動態(tài)，把組件內(nèi)容使用input、select等組件替換
- 數(shù)據(jù)結(jié)構(gòu)
treeData: [{
name: '1',
child: [
{ name: '2',
child: [{ name: '1' }, { name: '2' }]
},
{ name: '1',
child: [{ name: '1' }, { name: '2' }]
}
]
}]
思路：
1、先寫好一個公共的組件TreeItem
2、加上條件判斷
3、然后遞歸調(diào)用自身組件
4、最后直接調(diào)用組件就完成了
gitHub地址鏈接 https://github.com/hellozdq/customTree
總結(jié)
到此這篇關(guān)于vue自定義樹狀結(jié)構(gòu)圖實現(xiàn)的文章就介紹到這了,更多相關(guān)vue自定義樹狀結(jié)構(gòu)圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了自定義elementui上傳文件以及攜帶參數(shù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-08-08
這篇文章主要為大家詳細介紹了Vue?Canvas實現(xiàn)電子簽名，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了使用Vue?3和Element-plus搭建前端項目的過程,包括項目搭建、Element-plus安裝和引入、axios安裝、sass使用、app.vue配置、組件創(chuàng)新、路由配置以及使用輔助插件來提高開發(fā)效率,需要的朋友可以參考下2025-02-02
詳解關(guān)于element el-button使用$attrs的一個注意要點
這篇文章主要介紹了詳解關(guān)于element el-button使用$attrs的一個注意要點,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了Vue Element UI使用中遇到的問題，對ElementUI感興趣的同學，可以參考下2021-05-05
vue使用elementUI分頁如何實現(xiàn)切換頁面時返回頁面頂部
這篇文章主要介紹了vue使用elementUI分頁如何實現(xiàn)切換頁面時返回頁面頂部，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Iview Table組件中各種組件擴展的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
vue-cli+webpack項目打包到服務器后,ttf字體找不到的解決操作
這篇文章主要介紹了vue-cli+webpack項目打包到服務器后,ttf字體找不到的解決操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
laravel+vue組合的項目中引入ueditor方式(打包成組件形式)
今天小編就為大家分享一篇laravel+vue組合的項目中引入ueditor方式(打包成組件形式)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
從接觸Vue我們就知道 v-model是實現(xiàn)數(shù)據(jù)雙向綁定的那他能實現(xiàn)綁定的原理到底是啥？最常見的語法糖 v-model，今天通過案例給大家詳細介紹下，需要的朋友參考下吧2021-09-09