Vue与ElementUI：树形控件ElementUI Tree的使用及自定义图标

本文主要介绍如何在Vue项目中使用ElementUI的Tree组件，特别是如何渲染数据、处理节点点击事件以及为节点添加图标。 ElementUI Tree组件是用于构建树形结构的控件，常用于组织层次清晰的数据，如组织架构、文件目录等。在Vue项目中，我们可以借助ElementUI轻松实现树形结构的展示。 1. 数据渲染： - 使用`<el-tree>`标签，并将数据绑定到`data`属性上，例如：`<el-tree :data="list" />` - 在Vue实例的`data`对象中声明`list`变量，用于存储树形结构数据。 - 后台返回的数据通常是嵌套的对象数组，其中每个对象包含`OrgName`作为当前结构名称，以及`Children`字段用于存储子节点数组，子节点的结构与父节点相同。 - 使用`props`属性来指定如何解析数据，例如`props: { label: 'OrgName', children: 'Children' }`，这样`OrgName`会作为节点的显示文本，而`Children`则作为子节点数据。 2. 点击节点获取值： - 绑定`@node-click`事件，监听节点点击，例如：`@node-click="handleNodeClick"`，并在`methods`中定义对应的处理函数。 - `node`参数提供了点击节点的信息，可以直接获取当前层级的数据，但若需要上级节点信息，可能需要通过`data`参数的`parent`属性递归查找。 - `data`参数的`data`属性包含了当前节点的所有数据，包括`parent`属性，用于访问上级节点的值。 3. 为节点添加图标： - Tree组件支持自定义节点模板，通过`slot-scope`定义节点内容。例如： ```html <el-tree :data="data5" node-key="id" default-expand-all> <span class="custom-tree-node" slot-scope="{ node, data }"> <span> <i :class="node.icon"></i> {{ node.label }} </span> </span> </el-tree> ``` - 在上面的例子中，`node.icon`用于设置节点的图标类名，可以根据需求动态设置。 总结，ElementUI Tree组件在Vue项目中提供了一种便捷的方式来展示和交互树形数据结构。通过数据绑定、事件监听和自定义模板，可以实现丰富的功能，如节点点击获取信息以及自定义节点样式。在实际应用中，可能还需要根据业务需求进行扩展，例如增加拖拽排序、多选等功能。