vue递归实现树形组件_vue.js_

本文实例为大家分享了vue递归实现树形组件的具体代码，供大家参考，具体内容如下

1. 先来看一下效果：

2. 代码部分 （myTree.vue）

图片可以自己引一下自己的图片，或者使用iconfont的css引入。

讲解：

1、调用组件：

我这用来一个global.js来控制组件的使用(这个js附在文章末尾了)，在component文件夹中建立一个myTree文件夹，里面放同名vue文件(myTree.vue)，这样无论在哪里调用这个组件，都可以直接使用的方式去调用。

2、组件的方法：

scope()：会生成一个数组，里面有根节点是否有子节点，如本代码里设定的数据，会有scopes=[true,true,true]这样的结果。
changeStatus()：每点击标题或者箭头，如果当前下标的节点有没有子节点，再将结果动态赋值给scopesDefault[index]，将这个值放于dom上控制开关，递归组件。
checkBox()：在组件内部实现了点击全选、点击取消全选的功能，递归调用当前方法，将子元素的状态随父元素一起变化。
selectnode()：将当前点击的node的节点内容上传到父组件。

3、监听：

同时监听：不同节点的切换、同一个节点的是否选中的切换，监听得到的结果都传到父组件中。

4、组件递归：调用时与父组件相同

3. 使用组件（useMyTree.vue）