效果图,把下三角改为“展开“ ‘’收起‘’,增加边框
要点:把左侧三角符号的显示挪到右侧,去除转换方向,icon变为文字。
实现效果主要是css,其他根据官网代码来实现
/*树形图*/
.el-tree {
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #06CCC5;
border-color: #06CCC5;
}
.el-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.el-tree-node__expand-icon {
}
.el-icon-caret-right:before {
content: '展开';
display: block;
width: 100% !important;
height: 14px;
font-size: 14px;
font-family: NotoSansHans-Regular;
font-weight: 400;
color: rgba(153, 153, 153, 1);
position: absolute;
right: -395px;
top: -0px;
}
.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
content: '收起';
display: block;
width: 100% !important;
height: 14px;
font-size: 14px;
font-family: NotoSansHans-Regular;
font-weight: 400;
color: rgba(153, 153, 153, 1);;
}
.el-tree-node__expand-icon.is-leaf::before {
display: none;
}
.el-tree-node__children {
.el-tree-node__content {
padding-left: 0 !important;
margin-left: 36px;
position: relative;
.el-icon-caret-right:before {
position: absolute;
right: -360px;
top: -0px;
}
}
.el-tree-node__children {
padding-left: 0 !important;
margin-left: 36px;
}
}
.el-tree-node__content {
margin-top: 8px;
height: 46px;
border: 1px solid rgba(210, 210, 210, 1);
border-radius: 4px;
.el-tree-node__label {
padding: 8px 0;
width: 100% !important;
border-radius: 4px;
}
}
}