el-tree是特别常见的组件,一般要求给每一级文字前面添加图标,从第二级开始添加删除,修改图标
增删改的图标都是当鼠标悬浮在当前节点之上才显示!
先展示下效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/54f264a5b971139c7b8656b7230c2ca3.png)
第二级添加删除,修改图标
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d3fce46742e047ebb92279b18bade2f7.png)
代码结构
<template>
<!-- 节点树结构 -->
<div class="treeBox">
<el-tree
ref="tree"
node-key="id"
:data="dataLister"
:props="defaultProps"
default-expand-all
:expand-on-click-node="false"
@node-click="handleNode