elementUI修改tree图标-自定义el-tree数据的图标，更改三角形图标的颜色

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

1、项目中有一条数据elementUI修改tree图标，格式为文件夹，其中包含一个文件夹，然后一个文件。 有一个需求elementUI修改tree图标，文件夹和文件的图标需要进行不同的处理。

<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;
  }