【Vue3.0 + Element-plus】el-tree树状结构节点前箭头样式修改
Vue2和Vue3 的修改方法略有不同.el-tree .el-icon svg{//原有的箭头 去掉display: none !important;height: 0;width: 0;}.el-tree-node__expand-icon{ //引入的图标(图片)size大小 => 树节点前的预留空间大小font-size:16px;}//图标是否旋转,如果是箭头类型的,可以设置旋转9
·
Vue2和Vue3 的修改方法略有不同
.el-tree .el-icon svg{ //原有的箭头 去掉
display: none !important;
height: 0;
width: 0;
}
.el-tree-node__expand-icon{ //引入的图标(图片)size大小 => 树节点前的预留空间大小
font-size:16px;
}
//图标是否旋转,如果是箭头类型的,可以设置旋转90度。如果是两张图片,则设为0
.el-tree .el-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.el-tree .el-tree-node__expand-icon:before { // 未展开的节点
background: url("~@/assets/icons/public/arrow-right.png") no-repeat 0 1px;
content: '';
display: block;
width: 18px;
height: 18px;
}
.el-tree .el-tree-node__expand-icon.expanded:before { //展开的节点
background: url("~@/assets/icons/public/arrow-down.png") no-repeat 0 0;
content: '';
display: block;
width: 18px;
height: 18px;
margin-top:4px;
}
.el-tree .is-leaf.el-tree-node__expand-icon::before { //叶子节点(不显示图标)
display: block;
background: none !important;
content: '';
width: 18px;
height: 18px;
}
更多推荐
所有评论(0)