vue-tree,vue-org-tree
本文主要介绍如何实现vue的tree组件，帮助你更好的理解和学习vue框架。感兴趣的朋友可以了解一下。
前言
Tree一直是一个众所周知的组件，在一些大型后台管理系统中会用到它。树形组件可以完整展现它们之间的层次关系，并具有展开、折叠等交互功能。
效果
节点可以无限递归扩展。
您可以展开和折叠子节点。
如果选择了所有的子节点，也应该选择相应的父节点；否则，如果取消选择父节点，则需要取消选择相应的子节点。
API
Prop通过数据属性来描述所有节点的信息。
每个节点的配置描述如下
标题：演示文稿的标题。
展开是否展开节点。
已检查是否选择了节点
子节点
还有两个事件。
子列表展开和折叠时触发On-toggle-expand。
检查-更改时，单击复选框触发。
我们来 init tree主组件
首先，我们需要考虑一个问题，因为树是递归遍历的，因为我们需要创建一个入口组件和一个递归子组件。
首先，创建我们的树组件
我们在初始化和观察监控期间从prop重新复制了数据，并将其分配给cloneData。
然后在模板中引入node.vue，然后循环cloneData到loop node.vue. Node.vue接受两个prop
ShowCheckbox是树组件接收的showCheckbox，传递给节点组件判断显示。
因为DataItem是一个对象，所以它负责呈现当前节点。如果当前节点有子节点，它将递归调用自身进行递归渲染。
这是一个deepCopy方法。这是深度复制的一个简单实现，它递归地重新分配数据数组，并打开一个与传入数据无关的新堆内存。不会破坏原始数据。
我们来 init node递归组件
节点组件是主组件，主要作用是显示当前项的标题，如果有子的话递归本身。
关闭按钮
检验盒
节点标题
递归
节点的基本结构
prop中的数据是当前节点的所有信息，比如当前节点是否展开和关闭，是否被选中，标题title和children的子节点数组。
展开判断条件为data . children data . children . length显示或-button。
复选框是默认情况下当前节点是否需要被选中。
点击#，当前子节点将展开，点击-，当前子节点将关闭。这一步只需要修改handleExpand中数据的展开数据即可。同时，我们还需要触发一个emit来提示用户显示或折叠节点。
这里需要注意的一点是修改数据。expand .我们通过VUE的$set不像下面这样
this.data.expand=！this . data . expand；
这里有什么区别？如果直接用上面的代码修改，会发现虽然数据被修改了，但是视图并没有更新。这是因为这里的this.data是通过上层的props传递的，也可能是按节点递归传递的。无论如何，cloneData中我们需要的节点数据，此时，expand或checked字段在定义初始化时不一定包含。如果它不包含由this.data.expand直接修改的数据，则此扩展没有响应，因此视图不会被更新，只需用$set对其进行更改。
接下来，我们需要处理响应状态。你可能觉得只是检查取消。没错，但是树组件是有上下级关系的。它们分为两种逻辑。当选择(或取消选择)一个节点时，
将选择它的所有子节点。
如果选择了同一级别的所有子节点，则自动选择其父节点，并递归判断根节点。
第一个逻辑相对简单。选中一个节点后，只需要递归遍历其子节点的所有数据，修改所有选中的字段。
我们来看第二个逻辑的一个节点。除了手动选择(或取消选择)，还有对第二逻辑的被动选择(或取消选择)。也就是说，如果它的所有直接子节点(即它的第一级子节点)都被选中(或取消选中)，那么该节点将被自动选中(或取消选中)，递归地，它可以逐级响应。有了这个思路，我们可以通过watch来监控当前节点的所有子节点是否都被选中，然后修改当前选中的字段：
在手表里，数据的变化.孩子被监控，而且是深度监控。这段代码意味着当data.children中的数据字段发生变化时(这里当然指的是选中的字段)，也就是说，它的一个子节点被选中(或取消选中)，然后执行绑定句柄处理程序中的逻辑。const checkedAll=！data.some(item=！item . checked)；也是一个巧妙的缩写。checkedAll返回的最终结果是是否选择了所有当前子节点。
这里巧妙地运用了递归特性，因为node.vue是递归组件，每个组件中都会有watch monitoring data.children。要知道，当前节点有两个“身份”，既是下级节点的父节点，又是上级节点的子节点。当修改为下级节点的父节点时，也会触发上级节点中的手表监控功能。这就是递归。
结语
递归可以让一个大问题通过不断调用自己简洁地实现其功能，但算法中的斐波那契数列等个别问题如果使用递归的话时间复杂度和空间复杂度会飙升。总的来说，我们应该合理利用它。
这就是如何实现vue的树组件的细节。更多关于vue树组件的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。