VUE实战7：树结构、文件树、节点树共用一套代码NodeTree，admin后台

这篇介绍的内容稍微复杂一点，用VUE来实现树结构。目前这个属性结构没有编辑功能，只是显示。明天再开一篇介绍如何添加编辑功能，标题已经想好了。先看今天的展示：必须用递归来建树，直观明了的使用槽的方式已经行不通了。只能通过属性参数给组件传递一个树形的数据结构。传入的数据结构如下所示：[{title:'page'selected:false,opened:false,isFolder:true,children:[{title:'index.html',selected:false,opened:false,icon:"farfa-file-code",},{title:'product.html',selected:false,opened:false,icon:"farfa-file-code",},],},{title:'样式'selected:false,opened:false,isFolder:true,children:[{title:'style.css',selected:false,opened:false,icon:"远文件代码",},],},]每个节点通过子节点嵌套子节点。需要注意的是，我们希望这棵树是可以编辑的，它的节点是可以增删改查的，所以需要对数据进行双向绑定，并且不能通过普通的属性prop传递给组件，而是通过通过v模型。在RXEditor工程中，只有两处使用了树结构。要做的组件可以满足这两个要求，因为构建一个通用的类库比较简单。这两个地方其中一个是用来显示和编辑文件目录结构的，另一个是节点树，纯显示，没有编辑功能。只能选择文件树的叶子节点，可以选择节点树的所有节点。都是单选，没有多选要求。给这个控件起一个令人印象深刻的名字，我们称它为NodeTree。让我们先看看如何使用NodeTree。第一次调用：第二次调用：转移通过v-model的tree数据结构，openIcon是节点展开时的图标，closeIcion是节点关闭时的图标，leafIcon是没有子节点时的图标。如果不设置这些图标，会有默认值，分别是文件夹和文件。为了增加可扩展性，还可以将图标放在树状数据结构中，数据结构中的图标设置具有较高的优先级，可以覆盖控件的设置。明白原理，想做什么就看自己的项目需求了。folderCanbeSelected参数是指包含子节点的节点（如文件夹）是否可以被选中。在src目录下新建一个tree目录，放两个文件：NodeTree是一个树控件，TreeNode是树控件里面的一个节点。这个名字有点混乱，但它是我最喜欢的命名方式。NodeTree.vue的代码（省略CSS）：这段代码的逻辑很简单，就是接收外部参数，循环调用TreeNode自定义vFor-model，需要用到属性（props）值，计算属性inputValue用于修改值。具体原理可以参考VUE官方文档。需要特别注意的是nodeSelected事件，它在子节点处产生，通过冒泡逐层发送到父节点，最终到达NodeTree组件。NodeTree组件通过$emit方法分发给外层调用组件。本次实现的控件是单选独占，需要递归调用resetSelected方法消除其他节点的选中状态。TreeNode组件的代码如下（省略CSS，如需要，请到GIthub获取）：调用父组件时，将整个节点的数据通过v-mode传入控件，组件递归调用自身，从而形成树状结构。三种状态：打开（expanded）、关闭（closed）、选中（selected）保存在模型数据中，这样在控制之外，也可以通过修改模型来控制节点状态。引入该功能后，请到github获取对应的历史版本代码：https://github.com/vularsoft/studio-ui