本篇文章小编给大家分享一下vue递归实现树形组件代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
1. 先来看一下效果:
2. 代码部分 (myTree.vue)
图片可以自己引一下自己的图片,或者使用iconfont的css引入。
{{item.label}}
讲解:
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)
子组件主要是实现全选和取消全选。由于递归组件的原因,子组件拿不到完整的数据,所以接下来的两个功能:全选后某一个子节点取消选中则父节点取消选中、子节点全选后父节点自觉选中的功能就要在父组件中完成了。
讲解:
1、设值:
树形数据必须有pid属性,用于向上遍历。
2、方法:
transformData():将层级数据转为平行数据,避免后期不停的递归调用消耗时间,平级数据使用一般的循环即可完成。
selectnode():由子组件传递过来的方法,大致分为两个方向:选中、取消选中。选中时实现功能一:子节点全选后父节点自觉选中;取消选中实现功能二:全选后某一个子节点取消选中则父节点取消选中。
getParentnode():用于实现功能二。子节点取消选中后,根据pid,将在它上面级别的所有父节点列表拿到,再由方法updateParentCheck()将父节点的check值全部改为false。
childAllToParent():用于实现功能一。递归调用该方法,将操作节点的父节点拿到,根据兄弟节点有相同的pid,拿到兄弟节点的个数,如果兄弟节点中被选中的个数等于兄弟节点的个数,则修改父节点的check值为true,直到到了根节点结束递归。
这个组件实现起来不是很难,只要是心细就能很好的完成。
如果后期需要使用某些数据的话,直接挂到data里就可以。
如果有更好的方法或者存在某些疑问,欢迎小伙伴留言!
附: (global.js => 放于component文件夹下)
import Vue from 'vue'; function capitalizeFirstLetter(string){ return string.charAt(0).toUpperCase() + string.slice(1); } const requireComponent = require.context( '.',true,/.vue$/ //找到components文件夹下以.vue命名的文件 ) requireComponent.keys().forEach(fileName => { const componetConfig = requireComponent(fileName); let a = fileName.lastIndexOf('/'); fileName = '.' + fileName.slice(a); const componetName = capitalizeFirstLetter( fileName.replace(/^.//,'').replace(/.w+$/,'') ) Vue.component(componetName,componetConfig.default || componetConfig) })
由此其实可以实现很多递归组件,如侧边栏。
下面放一个自己写的侧边栏的动图,方法比这个树形组件要简单些,毕竟不用考虑复选框的值。感兴趣的小伙伴们可以试着实践一下