vue遞歸實(shí)現(xiàn)自定義tree組件
更新時(shí)間：2021年08月20日 11:46:08 作者：Ace.九階斗宗
這篇文章主要為大家詳細(xì)介紹了vue遞歸實(shí)現(xiàn)自定義tree組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue遞歸實(shí)現(xiàn)自定義tree組件的具體代碼，供大家參考，具體內(nèi)容如下
1. 在tree/index.vue中：
<template>
<div>
<ul>
<item :model='data'></item>
</ul>
</div>
</template>
<script>
import Item from './item'
export default {
components:{
Item
},
data(){
return{
data:{
title:"一級1",
children:[
{
title:"二級1-1",
children:[
{
title:"三級1-1-1",
children:[
{
title:"四級1-1-1-1",
children:[
{
title:"五級1-1-1-1-1"
}
]
}
]
}
]
},{
title:'二級1-2',
children:[
{
title:"三級1-2-1"
}
]
}
]
}
}
}
}
</script>
2. item.vue組件：
<template>
<li>
<div @click="toggle">
{{model.title}}
<span v-if="isFolder">[{{open?'-':'+'}}]</span>
</div>
<ul v-show="open" v-if="isFolder">
<item v-for="(child,index) in model.children" :model='child' :key='index'></item>
</ul>
</li>
</template>
<script>
export default {
name:'Item',
props:{
model:{
type:Object,
required:true
}
},
data(){
return{
open:false
}
},
computed:{
isFolder(){
return this.model.children && this.model.children.length>0
}
},
methods:{
toggle(){
if(this.isFolder) this.open =!this.open
}
}
}
</script>
3. 在任意組件中使用：
<template>
<div class="index">
<Tree></Tree>
</div>
</template>
<script>
import Tree from "@/components/tree"
components:{
Tree
}
</script>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue之自行實(shí)現(xiàn)派發(fā)與廣播(dispatch與broadcast)
這篇文章主要介紹了詳解vue之自行實(shí)現(xiàn)派發(fā)與廣播(dispatch與broadcast)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目中引入外部的js文件的10種方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的小伙伴可以參考下2023-08-08
今天小編就為大家分享一篇vuex actions傳遞多參數(shù)的處理方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Antd下拉選擇,自動(dòng)匹配功能的實(shí)現(xiàn)
這篇文章主要介紹了Antd下拉選擇,自動(dòng)匹配功能的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue 動(dòng)態(tài)添加class,三個(gè)以上的條件做判斷方式
這篇文章主要介紹了vue 動(dòng)態(tài)添加class,三個(gè)以上的條件做判斷方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家介紹了ElementUI?Upload源碼組件上傳流程解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
Vue項(xiàng)目中如何封裝axios（統(tǒng)一管理http請求）
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中如何封裝axios（統(tǒng)一管理http請求）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vue實(shí)現(xiàn)一個(gè)單獨(dú)的組件注釋
這篇文章主要介紹了vue實(shí)現(xiàn)一個(gè)單獨(dú)的組件注釋，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue中swiper開啟loop后,點(diǎn)擊事件不響應(yīng)的解決方案
這篇文章主要介紹了vue中swiper開啟loop后,點(diǎn)擊事件不響應(yīng)的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
proxy實(shí)現(xiàn)vue3數(shù)據(jù)雙向綁定原理
這篇文章主要介紹了proxy實(shí)現(xiàn)vue3數(shù)據(jù)雙向綁定原理,文章以介紹proxy的優(yōu)點(diǎn)開始展開全文內(nèi)容，圍繞proxy實(shí)現(xiàn)vue3數(shù)據(jù)雙向綁定的相關(guān)資料，,需要的朋友可以參考一下2021-12-12