示例一(插入iconfont)
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" auto-expand-parent>
<template v-slot:default="{data}" >
<div class="custom-node" v-if="data.children !== undefined">
<div class="row justify-between">
<div class="col-2">
<i class="iconfont">home</i>
</div>
<div class="col-9">
<span>{{data.label}}</span>
</div>
</div>
</div>
<div class="custom-node" v-else>
<span>{{data.label}}</span>
</div>
</template>
</el-tree>
示例二(element+ icon):
<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>