Vue3+Scss实现横向树形结构

效果：

 项目结构：

用的Vue-Cli的脚手架，配置使用Vue3+Scss

 

代码:

App.vue

components/TreeNode.vue

 难点：

1.Vue3中的组件递归调用

在Vue3组件的递归调用是通过name来实现的。

比如TreeNode.vue中defineComponent声明的name是【TreeNode】，在其内部就可以直接使用TreeNode就行本身的调用。

2.宽度的动态变化

 明明可以直接通过子组件自动撑开父容器宽度，为什么还要实现节点宽度的动态变化？

子组件可以直接撑开父组件，但是展开、收起时动画变化就很生硬。组件宽度动态变化就可以实现较为平滑的过渡。

具体的实现方式在代码里面有详细的注释，这里只是介绍思路。计算宽度不是再用的从上到下的递归计算（其实这样也可以），我采用的是从叶节点到根节点的逐层上报的方式。哪里改变了（展开或者收起）就从哪开始上报，也算是减少了计算。