elementui el-tree组件自定义图标icon-class

Element UI 的 `el-tree` 组件允许你自定义每个节点的图标，通过 `icon-class` 属性来实现。这个属性应该设置为一个字符串，用于引用你预先定义的 CSS 类名，该类名对应于你需要显示的图标。

例如，假设你有一个名为 `custom-icon` 的 CSS 类，它包含了某个 SVG 图标的内容，你可以这样配置：

<el-tree
  :data="treeData"
  :default-expand-all="true"
  node-key="id"
  :expand-on-click-node="false"
  icon-class="{ default: 'custom-icon', expanded: 'expanded-custom-icon', leaf: 'leaf-custom-icon' }">
</el-tree>

在这个例子中，`default` 表示节点默认状态下的图标样式，`expanded` 和 `leaf` 分别表示展开和叶子节点的不同状态下的图标样式。记得在你的 CSS 文件中定义这些类，并关联相应的SVG图标。

如果你想要动态地根据数据改变图标，可以将 `icon-class` 设置为一个函数，接收当前节点的数据作为参数并返回对应的 class 名：

data() {
  return {
    treeData: [...],
    customIconClass(node) {
      // 根据node的数据计算并返回class名
      return node.status === 'completed' ? 'completed-icon' : 'default-icon';
    }
  };
}