如何实现vue的tree组件


Posted in Vue.js onDecember 03, 2020

前言

Tree一直是大家熟知的组件,做一些大型的后台管理系统都会用到。使用树组件可以完整的展现其中的层级关系,并具有展开收起选择等交互功能。

效果

如何实现vue的tree组件

节点可以无限的递归延伸
可以展开和收起子节点
如果子节点全部选择对应的父节点也应该选中,反之父节点取消选中对应子节点也需要取消选中

API

prop传递data属性,来描述所有的节点的信息

如何实现vue的tree组件

每个节点的配置描述如下

  • title: 展示的标题
  • expand 是否展开节点
  • checked 是否选中节点
  • children 子节点

以及还有两个event

  • on-toggle-expand 展开和收起子列表时触发的
  • on-check-change 点击checkbox触发

我们来 init tree主组件

首先需要考虑一个问题因为tree是递归遍历的,因为我们需要创建一个入口组件还有一个递归children的组件。

首先创建我们的tree组件

如何实现vue的tree组件

如何实现vue的tree组件

我们在初始化以及watch监听的时候重新深拷贝了一下prop传来的data并赋值给了cloneData

然后在template里来引入node.vue,然后循环cloneData来循环node.vue。node.vue接受两个prop

showCheckbox 就是tree组件接收的 showCheckbox 这里传给node组件来判断展示
data 为item 是一个object 负责渲染当前节点,如果当前节点有children 那就递归调用本身来递归渲染
这是使用了一个deepCopy的方法,这个是深拷贝的简单实现,递归的去重新重新赋值data数组,开辟新的堆内存与传入的数据无关联。不会破坏原有的数据

我们来 init node递归组件

node组件为主要组件,主要功能是展示当前项的title 以及 如果有children时递归本身。

  • 展开关闭按钮
  • checkbox
  • 节点的title
  • 递归

node的基本构造

如何实现vue的tree组件

prop中的data就是当前节点的所有信息,比如说是否展开和关闭当前的节点,是否选中,title标题以及children的子节点数组。

  • expand 判断条件为 data.children &&  data.children.length 才会展示 + 或者 - 按钮
  • checkbox就是当前的节点是否需要默认勾选

点击 + 号时会展开当前的子节点,点击 - 号会关闭,这一步只需要在handleExpand 中修改data的expand数据即可同时我们还需要触发一个emit来提示用户展示或者收起了节点

如何实现vue的tree组件

如何实现vue的tree组件

这里有一点需要注意 修改data.expand我们通过 VUE的 $set 并没有像下面这样

this.data.expand = !this.data.expand;

这里有什么区别呢?如果直接用上面的代码进行修改,就会发现数据虽然被修改了,但是视图没有被更新,这是因为这里的this.data 时props通过上一级传递出来的,也有可能时node递归传递的,无论如何咱们需要的cloneData里的节点数据,此时不一定初始化定义时就含有expand或者checked字段 如果不含有直接通过this.data.expand修改,这个expand时不可响应式的数据,所以视图不会被更新,干脆就直接用$set来改变

接下来我们就需要处理响应状态了,大家可能觉得不就是选中和取消吗 的确这样可以,但是树组件时有上下级关系,他们分为两种逻辑,当选中(或取消选中)一个节点时

  • 它下面的所有子节点都会被选中
  • 如果同一级所有子节点选中时,它的父级也自动选中,一直递归判断到根节点。

第 1 个逻辑相对简单,当选中一个节点时,只要递归地遍历它下面所属的所有子节点数据,修改所有的 checked 字段即可

如何实现vue的tree组件

再来看第2个逻辑 一个节点,除了手动选中(或反选),还有就是第 2 种逻辑的被动选中(或反选),也就是说,如果这个节点的所有直属子节点(就是它的第一级子节点)都选中(或反选)时,这个节点就自动被选中(或反选),递归地,可以一级一级响应上去。有了这个思路,我们就可以通过 watch 来监听当前节点的子节点是否都选中,进而修改当前的 checked 字段:

如何实现vue的tree组件

在 watch 中,监听了 data.children 的改变,并且是深度监听的。这段代码的意思是,当 data.children 中的数据的某个字段发生变化时(这里当然是指 checked 字段),也就是说它的某个子节点被选中(或反选)了,这时执行绑定的句柄 handler 中的逻辑。const checkedAll = !data.some(item => !item.checked); 也是一个巧妙的缩写,checkedAll 最终返回结果就是当前子节点是否都被选中了。

这里非常巧妙地利用了递归的特性,因为 node.vue 是一个递归组件,那每一个组件里都会有 watch 监听 data.children,要知道,当前的节点有两个”身份“,它既是下属节点的父节点,同时也是上级节点的子节点,它作为下属节点的父节点被修改的同时,也会触发上级节点中的 watch 监听函数。这就是递归。

结语

递归的可以把一个大问题通过不断调用自身的方式,使代码简洁的实现功能,但是个别问题像算法中斐波那契数列如果使用递归就会使得时间复杂度以及空间复杂度会飙升。总的来说要合理运用,活学活用。

以上就是如何实现vue的tree组件的详细内容,更多关于vue tree组件的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
Vue实现图书管理小案例
Dec 03 #Vue.js
Vue router安装及使用方法解析
Dec 02 #Vue.js
vue3.0中setup使用(两种用法)
Dec 02 #Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 #Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 #Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 #Vue.js
vue $router和$route的区别详解
Dec 02 #Vue.js
You might like
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
python try except 捕获所有异常的实例
2018/10/18 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
高山背包:High Sierra
2017/11/23 全球购物
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
简短证婚人证婚词
2014/01/09 职场文书
工程售后服务方案
2014/06/08 职场文书
公司催款律师函
2015/05/27 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang