如何修改树状控件中的图标

目标：

    学会如何在树状图中修改控件中的图标

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视图：

调试工具视图：

 

 代码详情：

最终效果图：