老规矩直接上代码
<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>