VUE递归树形实现多级列表


Posted in Vue.js onJuly 15, 2022

本文实例为大家分享了VUE递归树形实现多级列表,供大家参考,具体内容如下

什么是递归?

简单来说就是在组件中内使用组件本身。

为什么要用递归?

如果出现很多下拉菜单,同级,分级数据,层级混杂,可以使用v-for的嵌套循环不就完事了。对,没毛病这样的话也可以做,但是如果数据又多加了【很多】级分类呢;使用v-for也能实现,但是代码可能会比较杂或混乱!也不适合后期的维护,这个时候呢,我们就可以使用我们所说道的【递归组件 】了,使用递归组件,无论你的数据怎么增加我们都不用改动我们的代码。

先看效果:

VUE递归树形实现多级列表

1、创建两个文件

父组件tree.vue 子组件tree-detail

父组件代码:

<template>
    <div id="tree">
        <treedetail
       :title="list.name"    //把值传给子组件
       :list="list.children" //把值传给子组件
        :num='0'
        >
        </treedetail>
    </div>
</template>
<script>

/**
 * 模拟一个树形结构图
 */
const list = {
  name: "电子产品",
  children: [
    {
      name: "电视",
      children: [
        {
          name: "philips",
          children: [
            { name: "philips-A" },
            { name: "philips-B" },
            { name: "philips-C" }
          ]
        },
        {
          name: "Tcl",
          children: [
            { name: "Mac Air" },
            { name: "Mac Pro" },
            {
              name: "ThinlPad",
              children: [
                {
                  name: "ThinlPad-A",
                  children: [
                    { name: "ThinlPad-A-a" },
                    { name: "ThinlPad-A-b" },
                    { name: "ThinlPad-A-c" }
                  ]
                },
                { name: "ThinlPad-B" },
                { name: "ThinlPad-C" },
                { name: "ThinlPad-D" }
              ]
            }
          ]
        },
        { name: "海兴" }
      ]
    },
    {
      name: "电脑",
      children: [{ name: "acer" }, { name: "联想" }, { name: "惠普" }]
    },
    {
      name: "可穿戴的设备",
      children: [
        {
          name: "手环",
          children: [
            { name: "华为B5手环" },
            { name: "小米手环" },
            { name: "iphone手环" }
          ]
        }
      ]
    }
  ]
};
import treedetail from '../tree/treedetail' 
export default{
    name:'tree',
    data(){
        return{list}
    },
    components:{treedetail}  //注册子组件
}
</script>

子组件代码:

<template>
<div id="treedetail" >
    <div class="treedetail" @click="btn()" :style="indent">  //btn是用来切换显示隐藏
        <span>{{flag ? '-' :'+'}}</span> 
        <span>{{title}}</span> //接收到的标题
        </div>  
     <div  v-if="flag">  //这里加显示隐藏也是必要的
        <treedetail  //treedetail这里的命名要跟父组件注册子组件名称一样,不然无法显示。DIV就无法显示
        v-for="(item,index) in list" 
        :key="index"
        :title="item.name"
        :list='item.children'  //渲染列表下的列表数据
        :num='num + 1' //这里的作用应该是分清层级。
        ></treedetail>
    </div>   
  
    </div>
</template>
<script>
export default {
    name:'treedetail',
    props:{
        title:{
            type:String,
            default:'名称'
        },
        list:{type:Array},
        num:{
            type:Number,
            default:0
        }
    },
    data(){
        return{
            flag:false
        }
    },
    methods:{
        btn(){
            this.flag=!this.flag
        }
    },
    computed:{
        indent(){
            return `transform: translate(${this.num*20}px)`; 
        
            
        }
    }

}
</script>

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

Vue.js 相关文章推荐
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
vue实现可移动的悬浮按钮
Mar 04 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
vue3不同环境下实现配置代理
May 25 Vue.js
Vue2项目中对百度地图的封装使用详解
vue如何在data中引入图片的正确路径
Jun 05 #Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 #Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 #Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 05 #Vue.js
vue中data里面的数据相互使用方式
Jun 05 #Vue.js
Vue 打包后相对路径的引用问题
Jun 05 #Vue.js
You might like
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
fgetcvs在linux的问题
2012/01/15 PHP
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
Python数组遍历的简单实现方法小结
2016/04/27 Python
图文详解WinPE下安装Python
2016/05/17 Python
python 创建弹出式菜单的实现代码
2017/07/11 Python
详解python中executemany和序列的使用方法
2017/08/12 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
python的依赖管理的实现
2019/05/14 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
python 日期排序的实例代码
2019/07/11 Python
python利用tkinter实现屏保
2019/07/30 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
道路交通安全实施方案
2014/03/12 职场文书
怎样写观后感
2015/06/19 职场文书
css背景和边框标签实例详解
2021/05/21 HTML / CSS