element-plus tree自定义图标

老规矩直接上代码


<el-tree 
      :data="treeData" 
      :props="defaultProps" 
      @node-click="handleNodeClick" 
      default-expand-all 
      highlight-current
      :expand-on-click-node="false"
>
     <template #default="{ node, data }">
         <span>
             <span>
                 <el-icon v-if="!data.children" ><Tickets /></el-icon>
                 <el-icon v-else-if="node.expanded"><FolderOpened /></el-icon>
                 <el-icon v-else ><Folder /></el-icon>
             </span>
             <span>{{ node.label }}</span>
             <span v-if="node.level!=1">
                 <el-button type="text" size="mini" @click.stop="append(data,'add')"> <el-icon><Plus /></el-icon></el-button>
                 <el-button type="text" size="mini" style="margin-left: 8px" @click.stop="append(data,'edit')"><el-icon><Edit /></el-icon></el-button>
                 <el-button type="text" size="mini" style="margin-left: 8px" @click.stop="remove(data,node)"><el-icon><Delete /></el-icon></el-button>
             </span>
         </span>
    </template> </el-tree>