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中defineProperty和Proxy的区别详解
Nov 30 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
springboot+VUE实现登录注册
May 27 Vue.js
Vue+Flask实现图片传输功能
Apr 01 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
vue elementUI表格控制对应列
Apr 13 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
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
Javascript验证方法大全
2015/09/21 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
一步步解析Python斗牛游戏的概率
2016/02/12 Python
Python中格式化format()方法详解
2017/04/01 Python
Numpy之文件存取的示例代码
2018/08/03 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
会计人员岗位职责
2014/03/19 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
技术支持岗位职责
2015/02/13 职场文书
明确岗位职责
2015/02/14 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
mysql函数全面总结
2021/11/11 MySQL