自定義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;
  }