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+Element实现增删改查的示例源码
Nov 23 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
vue 页面跳转的实现方式
Jan 12 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
详细聊聊vue中组件的props属性
Nov 02 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 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/05/25 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
PHP _construct()函数讲解
2019/02/03 PHP
javascript 类定义的4种方法
2009/09/12 Javascript
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
jQuery实现电梯导航模块
2020/12/22 jQuery
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
matplotlib作图添加表格实例代码
2018/01/23 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
Python的pygame安装教程详解
2020/02/10 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
土木工程专业大学毕业生求职信
2013/10/13 职场文书
初婚初育证明
2014/01/14 职场文书
期终自我鉴定
2014/02/17 职场文书
《忆江南》教学反思
2014/04/07 职场文书
药店促销活动总结
2014/07/10 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python