在vue中使用element 修改树状结构的图标

原效果：

显示效果：

实现的目标：

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

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中的树形组件。