zoukankan      html  css  js  c++  java
  • vue-利用递归组件完成一个树形组件

    这里写一个利用 利用递归组件完成一个树形组件

    这里利用ul>li的方式进行基础 

    tree.vue中,先写一个基础结构 当有子菜单的时候才显示 + 表示可点击

    <template>
      <li  @click.stop="toggleOpen">
        <span
          >{{ model.title }}
          <i v-if="model.children.length > 0">[{{ open ? "-" : "+" }}]</i></span
        >
      </li>
    </template>
    View Code

    基础结构搭好以后,开始准备写递归组件

    <template>
      <li  @click.stop="toggleOpen">
        <span
          >{{ model.title }}
          <i v-if="model.children.length > 0">[{{ open ? "-" : "+" }}]</i></span
        > //open是 打开合起的展示图标
    //当存在子菜单 才进行渲染 ul,并递归组件显示完全
        <ul v-show="open" class="item" v-if="model.children.length > 0">
          <item
            v-for="model in model.children"
            :key="model.title"
            :model="model"
          ></item>
        </ul>
      </li>
    </template>
    

      js:

    export default {
      name: "item", //这里要和调用的名字相同
      props: {
        model: {
          type: Object,
          required: true
        }
      },
    
      data() {
        return { open: false };
      },
      methods: {
        toggleOpen() {
          this.open = !this.open; //显示和隐藏 注意.stop 阻止冒泡
        }
      }
    };
    

      

    父组件:

    <template>
      <div>
        <ul>
          <item :model="data"></item>
        </ul>
      </div>
    </template>
    
    <script>
    import item from "./tree";
    export default {
      name: "app",
      data() {
        return {
          data: {
            title: "第0级",
            children: [
              {
                title: "第一级",
                children: [
                  {
                    title: "第一级的第二级1",
                    children: []
                  },
                  {
                    title: "第一级的第二级2",
                    children: []
                  }
                ]
              },
              {
                title: "第2级",
                children: [
                  {
                    title: "第2级的第二级1",
                    children: [
                      {
                        title: "第2级的第二级1第三级1",
                        children: []
                      }
                    ]
                  },
                  {
                    title: "第2级的第二级2",
                    children: []
                  }
                ]
              },
              {
                title: "第3级",
                children: []
              }
            ]
          }
        };
      },
      components: { item }
    };
    </script>
    

      这里的数据结构需要注意一下

      这里用的是递归组件,v-for中循环的每一项是一个对象,所以组件一开始也需要接受一个对象 

    效果图:

  • 相关阅读:
    00 学习资源整理
    07 MySQL的应用层调整,查询缓存设置,内存管理设置,并发参数的设置常识
    06 SQL语句编写优化
    05 Java的ReentrantLock与线程的顺序控制
    05 索引的使用常识(如何编写SQL语句避免索引失效)
    04 MYSQ的SQL优化需要了解的工具explain,profile,trace
    04 JAVA中park/unpark的原理以及JAVA在API层面线程状态总结
    03 MYSQL的体系结构以及存储引擎的基本知识
    02 链表编程题
    01 栈与队列
  • 原文地址:https://www.cnblogs.com/GoTing/p/13672676.html
Copyright © 2011-2022 走看看