el-tree自定义节点图标

`el-tree`是Element UI库中的一个组件，它用于构建树形数据结构。如果你想在`el-tree`中自定义节点的图标，可以利用其提供的`default-expand-icon`, `default-checked-icon`, 和 `default-loading-icon`属性，或者通过`render-content`或`node-key`选项来自定义每个节点的渲染。

1. 使用内置图标：你可以直接设置这些属性，比如：

<el-tree :default-expand-icon="expandedIcon" :default-checked-icon="checkedIcon" :default-loading-icon="loadingIcon">
...
</el-tree>

然后在JS中提供对应的函数来返回对应状态的图标元素：

data() {
  return {
    expandedIcon: 'el-icon-arrow-right',// 展开时的图标
    checkedIcon: 'el-icon-check-circle',//选中时的图标
    loadingIcon: 'el-icon-loading',//加载中的图标
  };
}

2. 自定义渲染：如果你想要更复杂的定制，可以使用`render-content`选项，为每个节点提供一个自定义模板来渲染内容，包括图标：

<el-tree :render-content="renderNodeContent">
...
</el-tree>

methods: {
  renderNodeContent(h, { node }) {
    return h('div', [
      // 这里你可以动态生成或绑定一个包含图标的子元素
      h('i', { class: 'custom-node-icon' }, [node.icon]) // 假设icon是你的节点数据中的字段
    ]);
  }
}

在这个例子中，`node.icon`应该是一个字符串，代表节点关联的图标class名。