修改element-ui树状结构小三角图标

1.查看版本有没有支持icon-class,可以用这个属性修改,但是无论展不展开只有这一种样子,一般都想用2种区分。

2.用element-ui icon 库里的图标,修改content,可以打开浏览器定位到图标查看

修改element-ui树状结构小三角图标_第1张图片

  .el-tree .el-tree-node__expand-icon.expanded // 取消旋转
  {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .el-tree .el-icon-caret-right:before {
    content: "\E602";
    font-size: 18px;
  }
  .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    content: "\E63c";
    font-size: 18px;
  }

ps:如果用了iconfont,只更改content会被当成element-ui icon,需要加一行

font-family: "iconfont" !important; // iconfont的font-family属性值

如果想混用icon库,分别加上自己的font-family

font-family: "element-icons" !important; // element-ui icon的font-family属性值

3.如果icon里面没有需要的图标,将需要的图标下载下来,以background填入

.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/plus.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/minus.png") no-repeat 0 3px;  
    content: '';  
    display: block;  
    width: 18px;  
    height: 18px;  
    font-size: 18px;  
    background-size: 18px;
}

 

你可能感兴趣的:(修改element-ui树状结构小三角图标)