avue-tree添加节点图标

在 Vue-Avue-Tree 插件中，要为 Avue-Tree 的节点添加自定义图标，你可以使用 `node-render` 配置选项。这个选项允许你在渲染每个节点时提供自定义的 HTML 元素。

首先，确保你已经安装了 Vue-Avue-Tree 并且在项目中正确地导入和使用了该组件。然后，你可以这样做：

<template>
  <avue-tree :data="treeData" node-render="customNodeRender"></avue-tree>
</template>

<script>
import { AvueTree } from 'vue-avue-tree'

export default {
  components: {
    AvueTree,
  },
  data() {
    return {
      treeData: [], // 初始化你的树数据
    }
  },
  methods: {
    customNodeRender(node) {
      return `
        <div class="custom-node">
          <i class="your-icon-class"></i> <!-- 这里替换为你的图标 -->
          {{ node.label }}
        </div>
      `;
    },
  },
}
</script>

<style scoped>
.custom-node {
  /* 根据需要自定义样式 */
  display: flex;
  align-items: center;
}
.your-icon-class {
  /* 图标样式 */
}
</style>

在这个例子中，`customNodeRender` 方法接收一个节点对象，返回一个包含图标和文本的自定义元素。`your-icon-class` 是你根据 CSS 选择器定义的图标类名。