原效果如下：

修改样式后显示效果如下：

实现的目标是，点开的节点前面的图标与未点开的节点不同，并且叶子节点前没有图标。

template的写法如下：

<div style="width: 20%;margin-right:1rem;">    
    <el-tree :data="treeDataList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</div>复制代码

CSS写法如下：

.el-tree .el-tree-node__expand-icon.expanded 
{  
    -webkit-transform: rotate(0deg);  
    transform: rotate(0deg);
}
.el-tree .el-icon-caret-right:before 
{  
    background: url("../../../assets/images/folder.png") no-repeat 0 3px;  
    content: '';  
    display: block;  
    width: 18px;  
    height: 18px;  
    font-size: 18px;  
    background-size: 18px;
}
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before 
{  
    background: url("../../../assets/images/folder1.png") no-repeat 0 3px;  
    content: '';  
    display: block;  
    width: 18px;  
    height: 18px;  
    font-size: 18px;  
    background-size: 18px;
}
.el-tree-node__expand-icon.is-leaf::before
{  
    display: none;
}复制代码

使用的图标来源于iconfont，主要知识点是CSS伪元素和element中的树形组件。