element-ui 组件关于el-tree小三角图标更换(css设置)

203 阅读1分钟

注意:其中width,height,background-size需根据图片大小自行调节

vue2中element-ui关于el-tree小三角图标更换

.el-tree,
.el-tree-node {
  background: transparent !important;
}
.el-tree .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
//有子节点 且未展开
.el-tree .el-icon-caret-right:before {
  background: url('图片1路径') no-repeat 0 0px;
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-size: 20px;
}

//有子节点 且已展开
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  background: url('图片2路径') no-repeat 0 0px;
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-size: 20px;
}

//没有子节点
.el-tree .el-tree-node__expand-icon.is-leaf::before {
  background: url('图片3路径') no-repeat 0 0px;
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-size: 20px;
}

vue3中element-plus关于el-tree小三角图标更换

 .el-tree-node__label{
       width:80%
   }
   
  .el-icon{
        svg {
            display: none;
        }
    }
    .is-loading{
        svg{
            display: block;
        }
    }
    
    //有子节点 且未展开
    .el-tree-node__expand-icon {
        background: url('图片1路径') no-repeat center;
        background-size: 20px;
        transform: rotate(0deg);
        margin-right: 2px;
    }
    
    //有子节点 且已展开
    .el-tree-node__expand-icon.expanded {
        background: url('图片2路径') no-repeat center;
        background-size: 20px;
        transform: rotate(0deg);
        margin-right: 2px;
    }
    
    //没有子节点
    .el-tree-node__expand-icon.is-leaf{
        background: url('图片3路径') no-repeat center;
        background-size: 20px;
        transform: rotate(0deg);
        margin-right: 2px;
    }