注意:其中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;
}