该文章为本菜鸡学习记录，如有错误还请大佬指教

本人刚开始接触vue框架，在使用element-plus组件想实现树形控件，发现官网的组件示例没有图标区分显示

实现效果

代码

<temple 部分

<el-tree :data="data" @node-click="handleNodeClick" node-key="id"><template #default="{ node, data }"><span class="custom-tree-node"><!-- 第一级固定一个图标 --><img src="./assets/main/depts.png" v-if="node.level === 1" /><!-- 非第一级且有子元素是个文件夹图标 --><img src="./assets/main/depts.png" v-if="node.childNodes.length && node.level !== 1" /><!-- 非第一级且没子元素且未选中是个文件图标 --><img src="./assets/main/dept.png" v-show="!node.childNodes.length && node.level !== 1" /><span@click="getNode(node)":class="[node.childNodes.length ? 'bold' : '', node.isCurrent ? 'orange' : '']">{{ node.label }}</span></span></template>
</el-tree>

数据展示如下：
<script 部分

const data: Tree[] = [{label: '部门列表',children: [{label: '部门1',},{label: '部门2',},{label: '镇街（平台）',children: [{label: '**街道',},{label: '**街道',},],},{label: '镇街综合行政执法队',children: [{label: '***综合行政执法队',},{label: '***综合行政执法队',},],},],},
]