在script setup中el-tree里面添加图标

在Vue3的Composition API（script setup）中，要在`<el-tree>`组件里添加图标，你需要先安装Element Plus库，并导入相关的图标组件。El-Tree本身允许你在节点配置项中指定图标，通过`default-checked-keys`、`default-expanded-keys`等属性来定义节点的初始状态。

下面是一个基本的例子：

<template>
  <el-tree
    :data="treeData"
    :props="treeProps"
    :default-checked-keys="selectedKeys"
    ref="treeRef"
    node-key="id"
  >
    <!-- 使用v-for遍历节点并设置图标 -->
    <span slot-scope="{ node }">
      <i :class="node.icon"></i> {{ node.label }}
    </span>
  </el-tree>
</template>

<script setup>
import { ElTree, ElIcon } from 'element-plus';
import { computed } from 'vue';

// 定义树数据
const treeData = ...; // 树形数据源
// 定义节点属性
const treeProps = {
  children: 'children',
  label: 'name', // 或者其他你想显示的标签字段
  icon: 'icon-name', // 这里的'icon-name'是你的图标名，需要在Element Plus的图标列表中找到对应名称
};

// 存储选中的节点
const selectedKeys = ref([]);

// 在此处获取或计算当前选中的节点对应的图标
const currentIcon = computed(() => {
  if (selectedKeys.value.length > 0) {
    return selectedKeys.value[0].icon;
  }
  return '';
});

</script>

<style scoped>
.el-tree-node__content .custom-icon {
  margin-right: 5px;
}
</style>