vue递归组件实现树形结构

本文实例为大家分享了vue递归组件实现树形结构,供大家参考,具体内容如下

一、递归组件

什么是递归组件?简单来说就是在组件中内使用组件本身。函数自己调用自己。很多情况下我们呢刷数据的时候,不知道到底这个数据结构是有多少层,那么这个时候我们就用到了递归来实现。

二、先用for来遍历:

父组件中:

<template>
  <div class="home">
  
    <tree :title="list.name" :list="list.children"></tree>
  </div>
</template>

<script>
import tree from '../components/tree'
export default {
  name: "Home",
  components: {
    tree
  },
  data: function() {
    return {
      list: {
        name: "酒店",

        children: [
          {
            name: "经济",
            children: [
              {
                name: "如家",
                children: [
                  {
                    name: "长江路-如家"
                  },
                  {
                    name: "望江路-如家"
                  }
                ]
              },
              {
                name: "7天",
                children: [
                  {
                    name: "长江路-7天"
                  },
                  {
                    name: "望江路-7天"
                  }
                ]
              }
            ]
          },
          {
            name: "舒适",
            children: [
              {
                name: "智选假日",
                children: [
                  {
                    name: "卧龙路-智选假日"
                  },
                  {
                    name: "望江路-智选假日"
                  }
                ]
              },
              {
                name: "全季",
                children: [
                  {
                    name: "卧龙路-全季"
                  },
                  {
                    name: "建设路-全季"
                  }
                ]
              }
            ]
          },
          {
            name: "商务",
            children: [
              {
                name: "中方商务",
                children: [
                  {
                    name: "卧龙路-中方商务"
                  },
                  {
                    name: "望江路-中方商务"
                  }
                ]
              },
              {
                name: "锦江之星",
                children: [
                  {
                    name: "人民路-锦江之星"
                  },
                  {
                    name: "新华路-锦江之星"
                  }
                ]
              }
            ]
          }
        ]
      }
    };
  },
  methods: {}
};
</script>
<style scoped>
.ww {
  margin-left: 20px;
}
.hh {
  font-size: 10px;
}
</style>

子组件中:

<!--  -->
<template>
  <div>

  <!-- 第一层循环 循环酒店-->
     <div v-for="(item,index) in list " :key="index">
      <h3>{{item.name}}</h3>
    <!-- <! 第二层循环酒店的类型--> 
 
    <div v-for="(item,index) in item.children" :key="index">
      <h5>{{item.name}}</h5>
      <!-- 第三层循环酒店的名称 -->
      <div v-for="(item,index) in item.children" :key="index" class="ww">
        <h6>{{item.name}}</h6>
        <!-- 第四层循环酒店的具体介绍  -->
        <div v-for="(item,index) in item.children" :key="index" class="hh">{{item.name}}</div>
      </div>
    </div>
   </div> 

  </div>
</template>

<script>
export default {
  name: "tree",
  components: {},
  data: function() {
    return {
      
    };
  },
  props:{
    title:
    {
      type: String,
      default:"标题"

    },
    list:{
      type:Array,

    }
  }
  
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>

效果图如下:  

三、递归来实现?

通过组件自身的 name名字来实现组件自身的递归调用 .

父组件中:

<template>
  <div class="home">
  
   <tree :title="list.name" :list="list.children" :detph="0"></tree>
  </div>
</template>

<script>
import tree from '../components/tree'
export default {
  name: "Home",
  components: {
    tree
  },
  data: function() {
    return {
      list: {
        name: "酒店",

        children: [
          {
            name: "经济",
            children: [
              {
                name: "如家",
                children: [
                  {
                    name: "长江路-如家"
                  },
                  {
                    name: "望江路-如家"
                  }
                ]
              },
              {
                name: "7天",
                children: [
                  {
                    name: "长江路-7天"
                  },
                  {
                    name: "望江路-7天"
                  }
                ]
              }
            ]
          },
          {
            name: "舒适",
            children: [
              {
                name: "智选假日",
                children: [
                  {
                    name: "卧龙路-智选假日"
                  },
                  {
                    name: "望江路-智选假日"
                  }
                ]
              },
              {
                name: "全季",
                children: [
                  {
                    name: "卧龙路-全季"
                  },
                  {
                    name: "建设路-全季"
                  }
                ]
              }
            ]
          },
          {
            name: "商务",
            children: [
              {
                name: "中方商务",
                children: [
                  {
                    name: "卧龙路-中方商务"
                  },
                  {
                    name: "望江路-中方商务"
                  }
                ]
              },
              {
                name: "锦江之星",
                children: [
                  {
                    name: "人民路-锦江之星"
                  },
                  {
                    name: "新华路-锦江之星"
                  }
                ]
              }
            ]
          }
        ]
      }
    };
  },
  methods: {}
};
</script>
<style scoped>
.ww {
  margin-left: 20px;
}
.hh {
  font-size: 10px;
}
</style>

子组件:

<!--  -->
<template>
  <div>
    <div :style="getDetph">
      <!-- 显示隐藏 -->
      <div @click="getData ">
        <!-- 这里呢如果为真的话就显示那么就是减号否则的话就是加号 -->
        <span >{{isShow?'-':'+'}}</span>{{title}}</div>
      <!-- 那么在这里我们就需要改成 item.name和item.children -->
      <div v-if="isShow">
        <tree
          :title="item.name"
          :list="item.children"
          v-for="(item,index) in list"
          :key="index"
          :detph="detph+1"
        >
          <!-- 每次递增1 -->
        </tree>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "tree",
  components: {},
  data: function() {
    return {
      isShow: false
    };
  },
  props: {
    // 接收标题
    title: {
      type: String
      // default: "标题"
    },
    // 接收一整个数组
    list: {
      type: Array
    },
    // 用来接收层数
    detph: {
      type: Number
    }
  },
  // 计算属性用来接收我们的层数
  computed: {
    getDetph() {
      return `transform:translate(${this.detph * 20}px)`;
    }
  },
  methods: {
    getData: function() {
      this.isShow = !this.isShow;
    }
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>

效果图:

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

(0)

相关推荐

  • Vue elementUI实现树形结构表格与懒加载

    目录 1.实现效果 2.后端实现 2.1 实体类 2.2 数据库中的数据结构 2.3 后端接口 2.4 swagger测试后端结构功能是否正常 3.前端实现 3.1 页面中引入el-table组件 3.2 实现效果 1.实现效果 2.后端实现 2.1 实体类 @Data @ApiModel(description = "数据字典") @TableName("dict") public class Dict { private static final long se

  • 用 Vue.js 递归组件实现可折叠的树形菜单(demo)

    在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', { template: `<!--Invoking myself!--> <recursive-component></recursive-component>` }); 递归组件常用于在blog上显示注释.嵌套的菜单,或者基本上是父和子相同的类型,尽管具体内容不同.例如: 现在给您演示一下如何有效地使用递归组件,我将通过建立一个可扩展/收缩的树形

  • Vue.js 递归组件实现树形菜单(实例分享)

    最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = true import main from './components/main.vue' new Vue({ el: '#app', render: h => h(main) }) 它引入了一个组件 main.vue: <template> <div class="tree-m

  • vuejs使用递归组件实现树形目录的方法

    上篇文章我提到了通讯录的开发,里面的目录使用了vue的递归组件实现的树形目录,这篇文章就来讲讲如何实现树形目录吧! 首先实现效果如下,觉得菜单还是比较nice的是吧: 这边数据调用的是数据库的数据的,需要数据库进行数据的构造,这里涉及到java的构造多叉树的知识,后续我会另外写一篇文章详细讲解,这里讲下前端. 数据可以先构造json使用,这里用到的格式大概如下,以childList来嵌套子菜单: { id:YH, name:银行, pid:0, childList:[{ id:YH******,

  • vue实现的树形结构加多选框示例

    本文实例讲述了vue实现的树形结构加多选框.分享给大家供大家参考,具体如下: 前面说了如何用递归组件来写vue树形结构,写了树形结构还要在前面加多选框,然后往数组里push选项,并在左边显示出来,然后左边进行拖拽排序,拖拽排序上一篇文章我已经介绍过了,在这我就不介绍了,如何用阿里巴巴矢量图标库我也有相关文章,也不介绍了,本节主要介绍vue树形结构加多选框,并实现一定的逻辑,比如全选,单选,全选和单选之间的联动 先看下目录结构 下面我直接贴下代码 首先是pages文件夹中tree.vue页面中引用

  • vue实现树形结构样式和功能的实例代码

    一.主要运用element封装的控件并封装成组件运用,如图所示 代码如图所示: 下面是子组件的代码: <template> <ul class="l_tree"> <li class="l_tree_branch" v-for="item in model" :key="item.id"> <div class="l_tree_click"> <butt

  • vue树形结构获取键值的方法示例

    本文介绍了vue树形结构获取键值的方法示例,分享给大家,具体如下: 把键值文件放入 引入控件 import { getTypeValue } from '@/api/dict/dictValue/index'; 点击搜索,打开弹窗 <el-form-item label="机构名称" placeholder="请选择机构" prop="orgName"> <el-input readonly type="text&qu

  • vue Element-ui表格实现树形结构表格

    本文实例为大家分享了Element-ui表格实现树形结构表格的具体代码,供大家参考,具体内容如下 前端效果展示: 在el-table中,支持树类型的数据的显示.当 row 中包含 children 字段时,被视为树形数据.渲染树形数据时,必须要指定 row-key.支持子节点数据异步加载. 通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点.children 与 hasChildren 都可以通过 tree-props 配置. row-key="id"和:tr

  • vue实现树形结构增删改查的示例代码

    其实很多公司都会有类似于用户权限树的增删改查功能,正好最近我刚写了一个树形结构的增删改,在这里和大家分享一下,如果有不合理的地方欢迎评论,我会尽快优化~~ 先附上一下效果图 这个是没有点击编辑时,产品的需求是选中某个节点,取得该节点对应的设备数据,所以初始页面是下面这个样子的. 这个是点击了编辑之后,显示节点的编辑按钮 点击最上面的添加按钮,显示最外层父节点的添加画面 修改节点名称 因为我们的需求是编辑与非编辑两种状态,所以我用了两个树形组件,通过v-if进行控制.(v-if:该组件不存在,v-

  • vue开发树形结构组件(组件递归)

    本文实例为大家分享了vue开发树形结构组件的具体代码,供大家参考,具体内容如下 需求 一个页面,要显示商品分类,同时每个分类下面还拥有若干子类,子类也可以有子类. 要实现全选单选,子类被逐个全选父类也要标记选中. 第一反应就是树形结构,和递归调用.曾经在做WPF时记得有现成的组件,也学着写过对应的后台.这次我要自己写一个前端的组件了. 这只是我自己花了点时间写的一个vue组件,尚可优化及拓展.仅此与大家分享一下. 效果 实现 <template> <div id="TreeMe

随机推荐