嗨，刚好我之前做过类似的文件目录Tree组件自定义，Element Plus的Tree其实藏着挺灵活的自定义能力，完全能满足你的需求！下面我给你一步步讲怎么实现：

核心思路：用自定义节点插槽完全控制渲染 #

Element Plus的Tree组件提供了v-slot:default插槽，让你可以完全自定义每个节点的内容——不管是图标、颜色还是样式，都能自己说了算。

第一步：给你的树结构数据加类型标识

首先要给每个节点区分「文件夹」和「文件」，比如在数据里加个type字段：

const treeData = [
  {
    label: '项目根目录',
    type: 'folder', // 标记为文件夹
    children: [
      {
        label: 'src',
        type: 'folder',
        children: [
          { label: 'main.js', type: 'file' }, // 标记为文件
          { label: 'App.vue', type: 'file' }
        ]
      },
      { label: 'README.md', type: 'file' }
    ]
  }
]

第二步：通过插槽自定义节点内容

在Tree组件里用v-slot:default接收节点数据，然后根据type渲染不同的图标、颜色：

<el-tree
  :data="treeData"
  :expand-on-click-node="false" // 可选：让点击文本不展开，只点击图标展开
>
  <template #default="{ node, data }">
    <div class="custom-tree-node">
      <!-- 自定义图标：文件夹和文件用不同图标，还能改颜色 -->
      <el-icon :color="data.type === 'folder' ? '#409EFF' : '#67C23A'" class="mr-2">
        {{ 
          data.type === 'folder' 
            ? (node.expanded ? <FolderOpened /> : <Folder />) // 文件夹展开/收起切换图标
            : <Document /> 
        }}
      </el-icon>
      <!-- 自定义文本样式 -->
      <span :style="{ color: data.type === 'file' ? '#666' : '#333' }">
        {{ node.label }}
      </span>
    </div>
  </template>
</el-tree>

注意：上面用到的Folder、FolderOpened、Document都是Element Plus自带的图标组件，记得先导入哦！

第三步：补充自定义样式（可选）

如果需要调整图标大小、节点间距这些细节，加个自定义CSS就行：

.custom-tree-node {
  display: flex;
  align-items: center;
  padding: 4px 0;
  cursor: pointer;
}
.custom-tree-node .el-icon {
  font-size: 16px;
}

额外扩展：更复杂的自定义 #

如果还需要加其他功能（比如节点右侧加删除/重命名按钮），直接在插槽里加元素就行，完全不受默认组件限制。比如：

<template #default="{ node, data }">
  <div class="custom-tree-node">
    <!-- 图标和文本 -->
    <div class="node-left">
      <el-icon :color="data.type === 'folder' ? '#409EFF' : '#67C23A'" class="mr-2">
        {{ data.type === 'folder' ? (node.expanded ? <FolderOpened /> : <Folder />) : <Document /> }}
      </el-icon>
      <span>{{ node.label }}</span>
    </div>
    <!-- 右侧操作按钮 -->
    <div class="node-actions" v-show="node.expanded || data.type === 'file'">
      <el-icon size="14" class="mr-1">
        <Edit />
      </el-icon>
      <el-icon size="14" class="text-red">
        <Delete />
      </el-icon>
    </div>
  </div>
</template>

这种方式完全摆脱了默认组件的限制，你想怎么改就怎么改，完全能适配你的文件目录场景～

备注：内容来源于stack exchange，提问作者Ankara_messi