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