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

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

1. ElementUI Tree 树形控件的基本使用

ElementUI Tree 树形控件可以用于展示具有层级关系的数据。下面是使用ElementUI Tree 树形控件的基本流程：

1. 引入 ElementUI 组件库，包括 el-tree 和 el-tree-node 两个组件。
2. 定义数据，格式要求是一个嵌套的数组，每个元素需要包含 label 和 children 两个属性。 其中，label 表示节点的文本，children 表示节点的子节点。
3. 将数据绑定到 el-tree 的 data 属性上。
4. 在 el-tree 中使用 el-tree-node 组件进行节点的定义。

下面是一个简单的示例代码：

<template>
  <el-tree :data="data">
    <el-tree-node slot-scope="{node, data}">
      {{ data.label }}
    </el-tree-node>
  </el-tree>
</template>

<script>
export default {
  name: "TreeExample",
  data() {
    return {
      data: [
        {
          label: "一级节点",
          children: [
            {
              label: "二级节点",
              children: [
                {
                  label: "三级节点",
                  children: []
                }
              ]
            }
          ]
        }
      ]
    };
  }
};
</script>

2. 给 ElementUI Tree 树形控件的节点添加图标

ElementUI Tree 树形控件提供了给节点添加图标的功能，这可以让树形结构更加直观。在使用 ElementUI Tree 树形控件的时候，需要在数据源中包含 icon 属性。 下面是一个示例代码：

<template>
  <el-tree :data="data">
    <el-tree-node slot-scope="{node, data}">
      <i :class="getIconClass(data)"></i>
      {{ data.label }}
    </el-tree-node>
  </el-tree>
</template>

<script>
export default {
  name: "TreeIconExample",
  data() {
    return {
      data: [
        {
          label: "一级节点",
          icon: "el-icon-info",
          children: [
            {
              label: "二级节点",
              icon: "el-icon-warning",
              children: [
                {
                  label: "三级节点",
                  icon: "el-icon-success",
                  children: []
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    getIconClass(data) {
      return data.icon ? data.icon : "el-icon-folder";
    }
  }
};
</script>

在上面的示例代码中，我们使用了 getIconClass 方法获取图标的样式类。如果该节点设置了 icon 属性，则使用该属性值作为图标样式类，否则使用默认样式类 el-icon-folder。

以上就是 ElementUI Tree 树形控件的使用和给节点添加图标的完整攻略。