ElementUI Tree 树形控件的使用并给节点添加图标

前言：   因为项目需要用Vue做一个管理系统，其中有一个公司部门的管理页面有用到ElementUI 的树形控件，但是结构中没有使用chexkBox选项框，针对这个功能碰到的一些问题做一下总结 一，数据渲染 1）在<el>标签中绑定data属性 2）在vue实例的data中声明list变量 3）从后台获取到的数据是以数组里面嵌套多个对象的结构并赋值给list， 当前的数据是OrgName为当前结构名称， Children作为子分支数组， 子分支中的结构与当前结构一致 4）在页面中展示结构的方法是在<el>标签中绑定porps属性， 并在vue实例的data中用l ElementUI的Tree组件是Vue.js应用中常用的组件之一，它用于构建层次结构的数据展示，例如组织结构、文件目录等。在本文中，我们将探讨如何在Vue项目中使用ElementUI Tree控件并添加自定义图标。 让我们了解如何实现数据渲染。在Vue实例的`data`对象中，我们需要声明一个名为`list`的变量，用于存储从后台获取的数据。这些数据通常是嵌套的JSON结构，每个对象代表一个树节点，包含节点的属性，如`OrgName`，以及一个名为`Children`的数组，用于包含其子节点。当从服务器获取数据后，将这些数据赋值给`list`，以便在界面上进行渲染。 在HTML模板中，使用`<el-tree>`标签，并绑定`data`属性为`list`，这样树形结构就能根据`list`的数据动态生成。为了显示节点的名称，我们需要通过`props`属性设置`label`，并将其关联到Vue实例中的`label`属性。同样，使用`children`属性来绑定子节点的数据。 接下来，我们讨论如何在点击节点时获取当前节点及其上级的信息。ElementUI的Tree组件提供了`@node-click`事件监听器，你可以在此事件上绑定一个方法，该方法在点击节点时被调用，传入两个参数`node`和`data`。`node`对象包含了被点击节点的所有信息，而`data`对象则包含了该节点的数据，包括`parent`属性，这个属性指向它的父节点，如果需要获取上级或更高层级的信息，可以通过递归访问`data.parent`来实现。 现在，我们来看如何为树形控件的节点添加图标。ElementUI允许我们自定义每个节点的呈现方式，这通过使用`slot-scope`和`slot`来实现。在`<el-tree>`标签内，创建一个`<span>`元素，然后在`slot-scope`中传入`node`和`data`。在`<span>`内，我们可以自由地添加HTML元素，如`<i>`标签来显示图标，图标类名可以通过`node.icon`获取。同时，`node.label`用于显示节点的文本。在提供的示例代码中，每个节点都有一个`icon`属性，可以根据这个属性动态设置图标类名。 总结一下，ElementUI Tree组件的使用主要包括以下步骤： 1. 在Vue实例的`data`中声明`list`，并从后台获取嵌套结构的数据。 2. 使用`<el-tree>`组件，通过`data`属性绑定数据，`props`属性设置显示的属性。 3. 通过`@node-click`事件监听器处理节点点击事件，获取节点信息。 4. 使用`slot-scope`和`slot`来自定义节点的呈现，包括添加自定义图标。 在实际项目中，可以根据需求调整和扩展这些基础配置，例如添加多选功能（`checkable`）、异步加载数据（`lazy`）、自定义节点操作（`@node-contextmenu`）等。掌握这些基本用法后，你就能灵活地利用ElementUI Tree组件来构建复杂的数据展示和交互功能。