elementUI tree树形控件结合阿里图标icon修改三角图标样式_element-plus tree树形控件 修改小三角图标

需求：项目做类型文件j夹列表树，设计需要将三角图标替换成UI设计的icon，UI设计的icon放在了阿里图标库

// main.js中先引入iconfont的css和js
import '@/assets/iconfont/iconfont.css'
import '@/assets/iconfont/iconfont.js'
1
2
3

解决方案1、

<el-tree
            :data="getPerSrcTree"
            default-expand-all
            :expand-on-click-node="false"
            node-key="id"
            ref="atree"
            highlight-current
            :check-strictly="true"
            :props="defaultProps"
            @node-click="nodeClick"
          >
             <span class="custom-tree-node"  slot-scope="{ node }">
                <span style="display: flex;align-items: center;">
                  <i calss="iconfont icon-wendangdakai" width="20px" height="20px"></i>{
   {
    node.label  }}
                </span>              
            </span> 
          </el-tree>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

这种方式出来的icon就会没有颜色，就要在css内设置需要的颜色，如果用svg的话直接就可以将原有颜色显示出来

<el-tree
    :data="getPerSrcTree"
      default-expand-all
      :expand-on-click-node="false"
      node-key="id"
      ref="atree"
      highlight-current
      :check-strictly="true"
      :props="defaultProps"
      @node-click="nodeClick"
    >
      <span class="custom-tree-node"  slot-scope="{ node }">
          <span style="display: flex;align-items: center;">
            <iconSvg name
1
2
3
4
5
6
7
8
9
10
11
12
13