更改饿了么树形结构图标样式_饿了吗树形列表-CSDN博客

本文链接：https://blog.csdn.net/shuai_yeye/article/details/109593572

更改饿了么树形结构图标样式

把箭头样式更改为文件夹打开闭合样式，如果无子集则显示为空，自己搞出来的，跟大家分享一下，就直接上代码了

/* 树形样式 */
.el-tree{
  padding: 0 0 0 20px;
}
.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/imgs/icons/文件夹关.png") no-repeat 0 3px;  
    content: '';  
    display: block;  
    width: 20px;  
    height: 16px;  
    font-size: 16px;  
    background-size: 16px;
}
.el-tree   .el-tree-node__expand-icon.expanded.el-icon-caret-right:before 
{  
    background: url("../../../assets/imgs/icons/文件夹开.png") no-repeat 0 3px;  
    content: '';  
    display: block;  
   width: 20px;  
    height: 16px;  
    font-size: 16px;  
    background-size: 16px;
}
.el-tree   .is-leaf:before 
{  
    background: url("../../../assets/imgs/icons/文件夹空.png") no-repeat 0 3px;  
    content: '';  
    display: block;  
    width: 20px;  
    height: 16px;  
    font-size: 16px;  
    background-size: 16px;
}
.el-tree  .el-tree-node__label{
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333;
}