Vue recursively implements custom tree components

This article shares the specific code of Vue recursively implementing a custom tree component for your reference. The specific content is as follows

1. In 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:"Level 1",
                children:[
                    {
                        title:"Level 1-1",
                        children:[
                            {
                                title:"Level 3 1-1-1",
                                children:[
                                    {
                                        Title:"Level 4 1-1-1-1",
                                        children:[
                                            {
                                                title:"Level 5 1-1-1-1-1"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },{
                        title:'Level 1-2',
                        children:[
                            {
                                Title:"Level 3 1-2-1"
                            }
                        ]
                    }
                ]
            }
        }
    }
}
</script>

2. item.vue component:

<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. Use in any component:

<template>
  <div class="index">
      <Tree></Tree>
  </div>
</template>
 
<script>
    import Tree from "@/components/tree"
    components:{
        Tree
    }
</script>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

How to implement Vue's tree component
Use vant TreeSelect classification selection component operation in vue
Vue uses zTree plug-in to encapsulate tree component operation example
Vue recursive component + Vuex development tree component Tree--simple implementation of recursive component
Vue component tree implements tree menu
Vue2 component tree implements unlimited level tree menu
Vue.js component tree realizes multi-level linkage between provinces and cities
Vue.js component tree implements unlimited level tree menu

<<: Detailed explanation of several ways to obtain the PID (TID, LWP) of Linux threads

>>: Detailed explanation of three relationship examples of MySQL foreign keys