自定义el-tree数据的图标,修改三角图标的颜色

1.项目中有一份数据是文件夹里面包含文件夹再包含问件的格式,有个需求是需要将文件夹和文件的图标区别处理.

<el-tree
        ref="dataRef"
        :accordion="false"
        show-checkbox
        :node-key="defaultProps.value"
        :data="resourceData"
        :props="defaultProps"
        @check="handleCheckChange"
        @check-change="change"
      >
        <span class="custom-tree-node" slot-scope="{ data }">
          <span> <img :src="data.icon" />{{ data.aliaName }} </span>
        </span>
 </el-tree>

export default{
   data(){
       resourceData: [],
       defaultProps: {
        value: 'id', // ID字段名
        label: 'aliaName', // 显示名称
        children: 'children' // 子级字段名
      },
   },
   methods:{
      // 数据添加图标
 addIcon(data) { data.map((item) => { item.icon = require('../../../assets/pack.png'); if (item.children && item.children.length > 0) { this.addIcon(item.children); } else { item.icon = require('../../../assets/layer.png'); } });
    }
   },
   created(){
       this.addIcon(this.resourceData)
    }     
}    

最后的效果如下:

 

2.修改el-tree树结构自带的三角图标的颜色.

修改三角图标的颜色比较简单,加上下面的代码即可

.el-tree .el-tree-node__expand-icon {
    color: #ccc;
  }

但是加上了之后会出现一个问题,会将叶子节点(没有子节点的)也给添加了三角图标,审查元素发现所有节点的图标都带有一样的类名,只要修改样式就会更改所有图标,不管是否是叶子节点.所以还要加上下面的代码,隐藏叶子节点的三角图标才能行.

.el-tree-node__expand-icon.is-leaf::before {
    display: none;
  }