VUE递归树形怎么实现多级列表
导读:本文共1880.5字符,通常情况下阅读需要6分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 什么是递归?简单来说就是在组件中内使用组件本身。为什么要用递归?如果出现很多下拉菜单,同级,分级数据,层级混杂,可以使用v-for的嵌套循环不就完事了。对,没毛病这样的话也可以做,但是如果数据又多加了【很多】级分类呢;使用v-for也能实现,但是代码可能会比较杂或混乱!也不适合后期的维护,这个时候呢,我们就可以使用我们所说道的【递归组件 】了,使用递归组件,无论... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。什么是递归?
简单来说就是在组件中内使用组件本身。
为什么要用递归?
如果出现很多下拉菜单,同级,分级数据,层级混杂,可以使用v-for的嵌套循环不就完事了。对,没毛病这样的话也可以做,但是如果数据又多加了【很多】级分类呢;使用v-for也能实现,但是代码可能会比较杂或混乱!也不适合后期的维护,这个时候呢,我们就可以使用我们所说道的【递归组件 】了,使用递归组件,无论你的数据怎么增加我们都不用改动我们的代码。
先看效果:
1、创建两个文件
父组件tree.vue 子组件tree-detail
父组件代码:
<template><divid="tree"><treedetail:title="list.name"//把值传给子组件:list="list.children"//把值传给子组件:num='0'></treedetail></div></template><script>/***模拟一个树形结构图*/constlist={name:"电子产品",children:[{name:"电视",children:[{name:"philips",children:[{name:"philips-A"},{name:"philips-B"},{name:"philips-C"}]},{name:"Tcl",children:[{name:"MacAir"},{name:"MacPro"},{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手环"}]}]}]};importtreedetailfrom'../tree/treedetail'exportdefault{name:'tree',data(){return{list}},components:{treedetail}//注册子组件}</script>
子组件代码:
<template><divid="treedetail"><divclass="treedetail"@click="btn()":>//btn是用来切换显示隐藏<span>{{flag?'-':'+'}}</span><span>{{title}}</span>//接收到的标题</div><divv-if="flag">//这里加显示隐藏也是必要的<treedetail//treedetail这里的命名要跟父组件注册子组件名称一样,不然无法显示。DIV就无法显示v-for="(item,index)inlist":key="index":title="item.name":list='item.children'//渲染列表下的列表数据:num='num+1'//这里的作用应该是分清层级。></treedetail></div></div></template><script>exportdefault{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>
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
本文:
VUE递归树形怎么实现多级列表的详细内容,希望对您有所帮助,信息来源于网络。