如何改变element.ui的tree组件相应级点的icon

Question

是否有对应api可以直接使用？

Answer 1

这个要通过CSS强制更改

<div class="el-tree">
    <div class="el-tree-node is-expanded">
        <div class="el-tree-node__content" style="padding-left: 0px;"><span
                class="el-tree-node__expand-icon expanded"></span><!----><!----><span
                class="el-tree-node__label">一级 1</span></div>
        <div class="el-tree-node__children" data-old-padding-top="" data-old-padding-bottom="" data-old-overflow="">
            <div class="el-tree-node is-expanded is-current">
                <div class="el-tree-node__content" style="padding-left: 16px;"><span
                        class="el-tree-node__expand-icon expanded"></span><!----><!----><span
                        class="el-tree-node__label">二级 1-1</span></div>
                <div class="el-tree-node__children" data-old-padding-top="" data-old-padding-bottom=""
                     data-old-overflow="">
                    <div class="el-tree-node">
                        <div class="el-tree-node__content" style="padding-left: 32px;"><span
                                class="el-tree-node__expand-icon is-leaf"></span><!----><!----><span
                                class="el-tree-node__label">三级 1-1-1</span></div>
                        <div class="el-tree-node__children" style="display: none;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

上面是一个tree渲染后的html代码，我们可以看到，每一个节点有一个.el-tree-node__expand-icon的元素，这就是每个项的icon，而.el-tree-node__expand-icon.expanded的元素就是激活后的icon。
另外可以看源码发现，这些icon都是用css绘制的，加入以下代码后就可以自定义

//css代码
.el-tree-node__expand-icon{
    border:0;
    /*自定义，必要时用!important*/
}
.el-tree-node__expand-icon.expanded{
    /*自定义，必要时用!important*/
}

Answer 2

.el-tree-node__expand-icon+span::before {
  display: inline-block;
  vertical-align: bottom;
  margin-bottom: -3px;
  width: 20px;
}

.el-tree-node__content{
    .el-tree-node__expand-icon+span::before {
        content: url(..//img/sitemap.png);
    }
  }
.el-tree-node__children{
    .el-tree-node__expand-icon+span::before {
        content: url(..//img/folder.png);
    }
}

图片描述

Answer 3

以下是我的项目中的图标更改

.el-tree-node__content{
    height: 35px;
    margin: 10px 0px;
    .el-tree-node__expand-icon {
      padding: 0px;
      margin-right: 20px;
      width: 30px;
      height: 30px;
      content: url("../../../commons/images/*****.png");
    }
    .el-tree-node__expand-icon.expanded{
      transform: rotate(0deg);//不让旋转
    }
  }
  
  原理同上