怎么用vue遞歸實現(xiàn)自定義tree組件

本篇內(nèi)容介紹了“怎么用vue遞歸實現(xiàn)自定義tree組件”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

本文實例為大家分享了vue遞歸實現(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>

“怎么用vue遞歸實現(xiàn)自定義tree組件”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！