形控件的使用并给节点添加图标的文章就介绍到这里了，希望对大家的学习有所帮助，也希望大家多多支持。在本文中，我们将深入探讨如何在Vue项目中利用ElementUI库的Tree组件来创建树形结构，并且重点讲解如何为树形结构的各个节点添加图标。 ElementUI的Tree组件是一个强大的工具，它允许开发者以树状结构展示数据，适用于各种场景，如文件系统、组织架构等。在使用Tree组件时，首先我们需要了解如何渲染数据。 1. 数据渲染： - 在HTML模板中，我们通过``标签引入组件，并将`data`属性绑定到Vue实例的`data`对象中的一个变量，比如`list`。 - 在Vue实例的`data`中，我们需要声明一个数组`list`，用于存放树形结构的数据。通常，这些数据是由后台API返回的，它们的格式通常是嵌套的对象数组，每个对象代表一个树节点，可能包含子节点的数组。 - 后台返回的数据结构中，每个节点可能包含如`label`（节点名称）、`children`（子节点数组）等属性。例如，节点的`label`属性用于在界面上显示节点名称，而`children`属性则包含其子节点的数据。 - 在``标签中，我们可以通过`props`属性指定哪些属性应被用于显示节点的名称和子节点。例如，`label`属性用于显示节点的名称，`children`属性用于指定子节点数据。 2. 点击节点获取信息： - 当用户点击某个节点时，我们可以监听`@node-click`事件，这个事件会触发一个自定义方法，该方法可以在Vue实例的`methods`中定义。 - `node-click`事件的回调函数接收两个参数：`node`和`data`。`node`对象包含了被点击节点的所有信息，而`data`则是原始数据。若需要获取上级节点的信息，通常使用`data.parent`，因为`data`对象包含了完整的层级信息。 3. 给节点添加图标： - 要在树形结构的节点上显示图标，我们可以通过自定义节点模板实现。在``组件内部，我们可以使用`slot-scope`定义一个自定义模板，用以覆盖默认的节点渲染方式。 - 在自定义模板中，我们可以通过`node`对象访问到节点的所有属性，包括自定义的`icon`属性。使用`:class`指令将`node.icon`绑定到`i`标签的`class`属性，从而实现图标显示。 - 示例代码展示了如何设置每个节点的图标，例如，一级节点使用`el-icon-success`图标，二级节点的子节点使用`el-icon-info`图标。 通过以上步骤，我们已经能够创建一个具有自定义图标和节点点击事件处理的树形控件。在实际项目中，你可以根据需求调整数据结构、事件处理以及图标样式，以适应不同的业务场景。在开发过程中，记得利用Vue的响应式机制和ElementUI提供的丰富API，以便更好地控制和优化树形组件的表现和交互。

VB开发的Tree树形控件源码，界面漂亮，推荐下载，快速即可实现一个树形菜单，或者说是折叠菜单，另外还有滚动条及CheckBox和漂亮按钮等窗体元素的美化实例等。

今天在写个后台管理系统，使用了element-ui的组件库。在做角色权限，通过tree控件展示权限列表的时候，用:default-checked-keys绑定数据，这个属性不能实现双向绑定，只能用于初始化选择状态。如果想双向绑定只能使用组件的方法setCurrentKey来实现。想直接绑定数据来的方便，只能修改源码。在tree的源码 属性中重新定义一个属性，在watch中监听，调用 this.store.setCheckedKeys()。以下是作者修改的代码，第一次写博客分享给大家，不喜勿碰，还望更多大神多多指教。 props: { ..... pCheckedKeys: Array, .

介绍如何使用指定值去渲染树，默认label，现改为name值