目标:
学会如何在树状图中修改控件中的图标
1.将你需要的图标下载到文档中
如图:
2. 修改图标:
难点一:对没有下属节点的对象使用图标
<svg-icon v-if="data.children.length !== 0" icon-class= 'add' />
<svg-icon v-else icon-class="user1" />
<span>{{ data.name }}</span>
难点二:清空原有图标
<el-tree :data="list" :default-expand-all="true" icon-class=" ">
注意:icon-class后面一定要有一个空格,不然会报错
难点三:判断是否需要通过展开来分别使用不同图标
这个时候我们就可以用 node这个对象中的各种属性,其中就包括 expanded ,这个属性有true和false两种状态,在element-ui里面可以找到,还可以在调试工具里面直接看到他的变化状态
element-ui视图:
调试工具视图:
代码详情:
最终效果图: