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实现随机验证码功能
Dec 29 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 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
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
2012/12/10 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python 用户登录验证的小例子
2013/03/06 Python
python计算对角线有理函数插值的方法
2015/05/07 Python
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
python用post访问restful服务接口的方法
2018/12/07 Python
Django app配置多个数据库代码实例
2019/12/17 Python
Python函数生成器原理及使用详解
2020/03/12 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
外企办公室竞聘演讲稿
2013/12/29 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
国庆节慰问信
2015/02/15 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
Python可视化学习之seaborn调色盘
2022/02/24 Python
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技