ElementUI框架中el-tree左侧小三角修改自定义图标

ElementUI框架中el-tree左侧小三角修改自定义图标

一、先看下效果图

二、css样式

注意，样式放在scope里不生效，如果必要请加上/deep/样式穿透

// 禁止旋转
.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/img/shouqi.png") no-repeat 0 0;
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  font-size: 14px;
  background-size: 14px;
}
//有子节点 且已展开
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
  background: url("../../assets/img/zhankai.png") no-repeat 0 0;
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  font-size: 14px;
  background-size: 14px;
}
// 无子节点
.el-tree .el-tree-node__expand-icon.is-leaf::before{
    background: none;
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    font-size: 14px;
    background-size: 14px;
}