如何修改树形组件前的svg图标

成品效果图

代码实现

使用树形组件中的作用域插槽 让scope接收参数对象 打印scope得知 如图1 expanded属性展开的时候为true 收缩的时候为false
v-if判断还有没有子项

图1

//树形组件中的作用域插槽
<template #default="scope">

<el-col :span="20">
    <svg-icon
              v-if="scope.data.children.length !== 0"
              :icon-class="scope.node.expanded ? 'jianhao' : 'jiahao'"
              />
    <svg-icon v-else icon-class="yuangong" />
    <span>{{ scope.data.name }}</span>
    <!-- <button @click="doScope(scope)">打印</button> -->
</el-col>
</template>

审查元素得知

<span class="expanded el-tree-node__expand-icon el-icon-caret-right"></span>
小三角是由这个元素做的 给其中某个类添加白色 让小三角不出现

代码如下
<style>
  .el-tree-node__expand-icon {
    color: #fff;
}   
</style>[

效果图到顶部观看