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;
}