vue递归实现自定义tree组件

发布时间:2022-04-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了vue递归实现自定义tree组件脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家分享了vue递归实现自定义tree组件的具体代码,供大家参考,具体内容如下

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&#63;'-':'+'}}]</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递归实现自定义tree组件全部内容,希望文章能够帮你解决vue递归实现自定义tree组件所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:vue