本次介绍的内容，稍稍复杂了一点，用 VUE 实现树形结构 。目前这个属性结构还没有编辑功能，仅仅是展示 。明天再开一篇文章，介绍如何增加编辑功能，标题都想好了 。先看今天的展示效果：
构建树必须用到递归，使用 slot 这种直观明了的方式，已经行不通了 。只能通过属性参数，传递一个树形的数据结构给组件，传入的数据结构大致是这个样子：
[{title:‘页面 ’selected:false,opened:false,isFolder:true,children:[{title:'index.html',selected:false,opened:false,icon:"far fa-file-code",},{title:'product.html',selected:false,opened:false,icon:"far fa-file-code",},],},{title:‘样式’selected:false,opened:false,isFolder:true,children:[{title:'style.css',selected:false,opened:false,icon:"far fa-file-code",},],},]
每个节点通过嵌套子节点 。需要注意的是，我们希望这颗树是可以被编辑的，可以增加、删除、编辑其节点，所以需要数据的双向绑定，不能通过普通属性 props 传递给组件，而是通过 v-model 传递 。
【七VUE 实现 Studio 管理后台：树形结构，文件树】 项目中，只有两个地方用到了树形结构，要制作的组件满足这两处需求就可以，因为不是构建一个通用类库，就可以相对简单些 。这两处地方一处用于展示并编辑文件目录结构，一处是节点树，纯显示，没有编辑功能 。文件树只有叶子节点可以被选中，节点树所有节点都可以被选中 。都是单选，无复选需求 。
给这个控件取个大气的名字，叫吧，先看如何使用。
第一处调用：

文章插图

第二处调用：

通过 v-model 传递树形数据结构，是节点展开时的图标，是节点闭合时的图标，是没有子节点时的图标 。这些图标如果不设置，会有缺省值，是文件夹跟文件的样子 。为了增加可扩展性，树形数据结构也可以放置图标，数据结构里的图标设置优先级高，可以覆盖控件的设置 。明白个原理，想做成什么样子，看自己的项目需求 。参数是指含有子节点的节点（比如文件夹）是否可以被选中 。
在 src 目录下新建 tree 目录，放两个文件：
是树形控件，是树形控件内部的节点，名字稍微优点绕，但是是我喜欢的命名方式 。
.vue 的代码（省略 CSS）：

• 2019 区块链行业七大展望 | TokenInsight
• 新手必备 QT主窗口添加背景图，实现背景自动伸缩
• 二十 五 python自动化办公TKinter界面自动伸缩：基于Frame实现
• 关于mapbox 中拖拽point，line ,polygon实现原理
• Pyqt5 实现窗口缩放，空间自动伸缩
• 基于Kubernetes的hpa实现pod实例数量的自动伸缩
• 基于Faddeev算法的卡尔曼滤波FPGA实现——QMJ
• 2 Flink源码学习笔记 基于Yarn的自动伸缩容实现
• element 多选择器来实现购物车勾选
• jQuery实现简单的纯前端的购物车案例