定义一颗树，JS中常见的树形数据结构如下，children属性对应的是子树
let tree = [
{
id: '1',
name: '节点1',
children: [
{
id: '1-1',
name: '节点1-1'
}
]
},
{
id: '2',
name: '节点2',
children: [
{
id: '2-1',
name: '节点2-1'
},
{
id: '2-2',
name: '节点2-2',
children: [
{
id: '2-2-1',
name: '节点2-2-1'
}
]
}
]
},
{
id: '3',
name: '节点3'
}
]
二、深度优先遍历（DFS）
1、递归实现
function treeIterator(tree, func) {
tree.forEach((node) =>{
func(node)
node.children &&treeIterator(node.children, func)
})
}
实现逻辑简述：定义treeIterator函数，传入tree（树）和func（回调函数）两个参数，遍历tree数组，执行回调函数，如果当前节点存在children，则递归调用。
函数调用验证：调用treeIterator函数，传入上文定义好的树结构数组，打印出每个节点的name值。
treeIterator(tree, (node) =>{
console.log(node.name)
})
控制台打印结果如下：
2、循环实现
function treeIterator(tree, func) {
let node, curTree = [...tree]
while ((node = curTree.shift())) {
func(node)
node.children &&curTree.unshift(...node.children)
}
}
实现逻辑简述：
（1）定义node作为当前节点，curTree为传入的树（不影响原数组tree）；
（2）执行while循环，curTree数组第一个元素从其中删除，并返回第一个元素赋值给node；
（3）①执行回调函数；②如果当前节点存在子树，则追加到curTree数组的开头，继续执行循环，直到curTree没有元素为止。
函数调用验证：参考上述递归实现验证，方式和结果一致。
三、广度优先遍历（BFS）
function treeIterator(tree, func) {
let node, curTree = [...tree]
while ((node = curTree.shift())) {
func(node)
node.children &&curTree.push(...node.children)
}
}
实现逻辑简述：和上述深度优先遍历的循环实现差不多。区别在于如果当前节点存在子树，则追加到list数组的末尾。
温馨提示：不安装less-loader基本上都会报错
严老湿这边呢，就直接使用 Vue-cli 起步了， vue-org-tree 安装成功之后，我们就直接使用了，在 Vue 页面或者组件中使用 vue2-org-tree 标签，动态绑定data
data数据放入页面中
id 每个元素不同的ID ，label为name， children为自己的子集数据
效果图：
刚刚我们看到的是默认排列方式 ，其实还有一种排列方式，我们一起来看看
horizontal 是水平排列方式，我们来实践一下吧，它的参数是 true 、 false
看看效果如何：
使用 label-class-name 我们还可以动态绑定自定义 class
我们一起来尝试一下吧！
js:
css：
看看效果图
折叠展示效果
折叠效果是有了，那么怎么展开呢？
js:
请看效果图：
问题又来了，默认展开如何实现？
请看大屏幕
在请求完数据之后直接调用,或者生命周期调用，可以自由发挥
第一个参数是你的资源data，第二个参数是全部展开或否
上效果图：
vue2-org-tree 向我们抛出了几个事件，我们先看看有哪些事件
on-node-click 就是被抛出的点击事件
我们在方法里面写一个NodeClick用来接受点击触发的值
打印结果：
它还向我们抛出了移入移出事件，返回值与点击事件大致相同
来了老弟？我们做移入移出，肯定是要有功能的对不对？
每当我们的鼠标移入到小盒子里就出现一个模态框用来展示data内容
js:
css:
上效果图：
propdescriptontypedefaultdata
Object
propsconfigure props
Object
{label: 'label', children: 'children', expand: 'expand'}
labelWidthnode label width
String
|
Number
auto
collapsablechildren node is collapsable
Boolean
true
renderContenthow to render node label
Function
-labelClassNamenode label class
Function
|
String
-selectedKeyThe key of the selected node
String
-selectedClassNameThe className of the selected node
Function
|
String
-
event namedescriptontypeclickClick event
Function
mouseoveronMouseOver event
Function
mouseoutonMouseOut event
Function
鼠标点击时调用它。
params e Event
params data Current node data
well be called when the node-label clicked
params e Event
params data Current node data
当鼠标悬停时调用它。
params e Event
params data Current node data
当鼠标离开时调用它。
params e Event
params data Current node data
最后附上Git地址：https://github.com/CrazyMrYan/vue2-org-tree
预览地址：http://crazy.lovemysoul.vip/gitdemo/vue2-org-tree
关注“悲伤日记”更多精彩文章
做管理后台遇到了一个需求，是要再table里显示路径的名字
如上图所示，但是后端的哥们只返回了每一级的name ，并没有路径。前端能解决的事情就不麻烦后端了，只能用递归解决了：
一、获取每一级中的路径 path
如下图可以看到 pathName 就是把路径拼接起来了，该方法同样适用于树状结构添加任意属性字段。
还有其他几种树状结构常用的递归操作 可以参考该博主文章
https://blog.csdn.net/m0_38134431/article/details/108453055
