当前位置 博文首页 > 文章内容

    vue递归实现自定义tree组件

    作者:shunshunshun18 栏目:未分类 时间:2021-08-20 14:42:28

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客,有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
    博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!

    另祝:版权碰瓷诈骗团伙,早日弃暗投明。

    相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹!百花齐放的时代,渐行渐远!



    本文实例为大家分享了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?'-':'+'}}]</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>

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持IIS7站长之家博文。