vue树形结构html,怎么在vue中利用递归组件实现一个树形控件

怎么在vue中利用递归组件实现一个树形控件

发布时间：2021-06-11 17:26:48

来源：亿速云

阅读：81

作者：Leah

本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

vue版的树形控件html>

树形结构2

Vue.component('tree', {

name:"tree",

template:`

• { { item.label }}

`,

props:["folder","select"],

})

// 

var app = new Vue({

el:"#app",

data:{

msg:"hello world",

trees: [

{

id:1,

label:"1级目录1",

show:false,

children:[

{

id:"1-1",

label:"1.1目录"

},

{

id:"1-2",

label:"1.2目录"

},

{

id:"1-3",

label:"1.3目录"

},

]

},

{

id:2,

label:"1级目录2",

show:false

},

{

id:3,

label:"1级目录3",

show:false,

children:[

{

id:"3-1",

label:"3.1目录"

},

{

id:"3-2",

label:"3.2目录",

show:false,

children:[

{

id:"3-2-1",

label:"3.2.1目录"

},

{

id:"3-2-2",

label:"3.2.2目录"

},

{

id:"3-2-3"