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如何循环提取对象数组中的值
Nov 18 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
vue实现简易计算器功能
Jan 20 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
vue自定义右键菜单之全局实现
Apr 09 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多维数组去掉重复值示例分享
2014/03/02 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
PHP把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
javascript textContent与innerText的异同分析
2010/10/22 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
NodeJS创建基础应用并应用模板引擎
2016/04/12 NodeJs
JavaScript 函数模式详解及示例
2016/09/07 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
python实现图书管理系统
2018/03/12 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
python list转置和前后反转的例子
2019/08/26 Python
python numpy 反转 reverse示例
2019/12/04 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
pycharm实现猜数游戏
2020/12/07 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
医院护理人员的自我评价分享
2013/10/04 职场文书
营销与策划应届生求职信
2013/11/04 职场文书
临床医学专业学生的自我评价分享
2013/11/21 职场文书
2014年底个人工作总结
2015/03/10 职场文书
接待员岗位职责范本
2015/04/15 职场文书
2015年检验科工作总结
2015/04/27 职场文书
企业宣传语大全
2015/07/13 职场文书
浅析MySQL如何实现事务隔离
2021/06/26 MySQL