修改element-ui tree树结构前面得小三角。

时间:2024-03-27 11:15:22

修改element-ui tree树结构前面得小三角。

 

可以看到有下级没展开是修改element-ui tree树结构前面得小三角。。有下级展开了是修改element-ui tree树结构前面得小三角。没有下级了得前面什么符号也没有。

我们只需要替换那两个就可以啦。

有下级用没展开+。展开了用-。

修改element-ui tree树结构前面得小三角。

 

我们只需要覆盖原来得样式,

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

 

至于上面得content得标号怎么来的。我们可以利用浏览器啊。

修改element-ui tree树结构前面得小三角。

 

修改element-ui tree树结构前面得小三角。

 

可以看的element-ui得图标对应得content都可以看到。

按照elemnt-ui得图标得名字去搜看那个加减号对应得content就可以啦。

修改element-ui tree树结构前面得小三角。