VUE 实现 Studio 管理后台（七）：树形结构，文件树，节点树共用一套代码 NodeTree

本文链接：https://blog.csdn.net/idlewater/article/details/104712308

本文展示了如何使用Vue构建一个可编辑的树形组件NodeTree，用于展示文件目录结构和节点树。组件通过v-model双向绑定数据，支持增加、删除、编辑节点，并通过nodeSelected事件处理选中状态。组件包含两种用例，一种是文件树，只有叶子节点可选，另一种是节点树，所有节点均可选。详细代码和实现原理在GitHub上有提供。

摘要由CSDN通过智能技术生成

本次介绍的内容，稍稍复杂了一点，用 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",
            },
          ],
        },
]

每个节点通过 children 嵌套子节点。需要注意的是，我们希望这颗树是可以被编辑的，可以增加、删除、编辑其节点，所以需要数据的双向绑定，不能通过普通属性 props 传递给组件，而是通过 v-model 传递。
RXEditor 项目中，只有两个地方用到了树形结构，要制作的组件满足这两处需求就可以，因为不是构建一个通用类库，就可以相对简单些。这两处地方一处用于展示并编辑文件目录结构，一处是节点树，纯显示，没有编辑功能。文件树只有叶子节点可以被选中，节点树所有节点都可以被选中。都是单选，无复选需求。
给这个控件取个大气的名字，叫 NodeTree 吧，先看如何使用 NodeTree。
第一处调用：

<NodeTree v-model="files" :openIcon="'fas fa-folder-open'" :closeIcon="'fas fa-folder'" >
</NodeTree>

第二处调用：

<NodeTree v-model="nodes" :openIcon="'fas fa-caret-down'" :closeIcon="'fas fa-caret-right'" :leafIcon="''" :folderCanbeSelected = 'true'>
</NodeTree>

通过 v-model 传递树形数据结构，openIcon 是节点展开时的图标，closeIcion 是节点闭合时的图标，leafIcon 是没有子节点时的图标。这些图标如果不设置，会有缺省值，是文件夹跟文件的样子。为了增加可扩展性，树