vue 循环 递归组件_vue递归组件

[TOC]

>[success] # vue递归组件

一般只有树形的结构的数据需要用到递归组件，也是头一次用，参考[案例网站](https://blog.csdn.net/zhaoxiang66/article/details/80940762)，递归组件的显示隐藏需要后台在接口数据增加一个字段，来控制显示隐藏，或者前端自己手动在数据里面加一个的属性，值为布尔值，最好由后台来加这个字段因为前台加这个字段需要循环每一层树的数据在里面加一个属性

>[success]### 父级组件写法

使用时候只需要传入2个自定义属性一个folder，渲染的数据列表，一个select自定义属性里面传递一个自定义方法，用来控制树节点的点击事件

**src/views/parent.vue**

~~~

// html部分

// js部分

import bimTree from '@/component/bimTree/bimTree' // 引入子组件

export default {

components:{

bimTree

},

data(){

return{

componentInfo: { // 列表数据

structureInfo: [{

"id": 2,

"code": "1.1",

"parentCode": "1",

"nodeType": "StructureType",

"name": "上部结构",

"level": 1,

"hasChild": true,

"isDeck": false,

"isShow": false,

"subList": [{

"id": 5,

"code": "1.1.1",

"parentCode": "1.1",

"nodeType": "UnitCode",

"name": "上部承重构件",

"level": 2,

"hasChild": true,

"isDeck": false,

"isShow": false,

"subList": [{

"id": 21,

"code": "1.1.1.1",

"parentCode": "1.1.1",

"nodeType": "SubUnitCode",

"name": "主梁",

"level": 3,

"hasChild": false,

"isDeck": false,

"isShow": false

}]

}, {

"id": 6,

"code": "1.1.2",

"parentCode": "1.1",

"nodeType": "UnitCode",

"name": "上部一般构件",

"level": 2,

"hasChild": true,

"isDeck": false,

"isShow": false,

"subList": [{

"id": 23,

"code": "1.1.2.1",

"parentCode": "1.1.2",

"nodeType": "SubUnitCode",

"name": "横隔板",

"level": 3,

"hasChild": false,

"isDeck": false,

"isShow": false

}]

}, {

"id": 7,

"code": "1.1.3",

"parentCode": "1.1",

"nodeType": "UnitCode",

"name": "支座",

"level": 2,

"hasChild": true,

"isDeck": false,

"isShow": false,

"subList": [{

"id": 25,

"code": "1.1.3.1",

"parentCode": "1.1.3",

"nodeType": "SubUnitCode",

"name": "橡胶支座",

"level": 3,

"hasChild": false,

"isDeck": false,

"isShow": false

}]

}]

}]

}

}

}

},

methods:{

select(data){ // 点击树节点时候显示隐藏对应的节点

// isShow为接口字段返回的布尔值

data.isShow = !data.isShow

}

}

~~~

>[success]### 子级组件写法

子组件需要把树形的样式写出来，然后来循环，这里需要注意到`li里面的 bimTree `实际上就是在根据item里面是否有isShow(正常应该用child这样的一个列表判断)来控制是否继续渲染子菜单，一直到isShow为false为止，还有一点需要注意在span元素上需要绑定父组件传过来的事件，把item传过去即可这样每次点击对应的节点时候就能取到对应的item节点数据

**@/component/bimTree/bimTree**

~~~

// html部分

• {{item.name}}

// js部分

export default {

name:'bimTree',

components:{

[Icon.name]:Icon

},

props:['folder','select']

}

~~~