场景
修改前端Element组件el-tree样式
实现
1.虚线树
<div class="tree-wrap tree-line">
<el-tree
ref="tree"
:expand-on-click-node="false"
default-expand-all
:data="dataTree"
:props="defaultProps"
node-key="id"
highlight-current
@node-click="treeNodeClick"
/>
</div>
let dataTree = [{
id:'1',
label:'XXXXX作战子信息',
children:[{
id:'2',
label:'XX',
},{
id:'3',
label:'XX',
},{
id:'4',
label:'XXI',
},{
id:'5',
label:'XXII',
},{
id:'6',
label:'XX',
},{
id:'7',
label:'XX',
},{
id:'8',
label:'XX',
},]
}]
:deep(.tree-line .el-tree-node__content) {
padding-left: 2px !important;
}
// 虚线所需样式
:deep(.tree-line) {
.el-tree > .el-tree-node:after {
border-top: none;
}
.el-tree-node__children {
.el-tree-node {
position: relative;
padding-left: 16px;
}
}
.el-tree-node__expand-icon.is-leaf {
width: 4px;
}
.el-tree-node__children {
padding-left: 16px;
}
.el-tree-node :last-child:before {
height: 44px;
}
.el-tree > .el-tree-node:before {
border-left: none;
}
.el-tree > .el-tree-node:after {
border-top: none;
}
.el-tree-node:before {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.el-tree-node:after {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.el-tree-node:before {
border-left: 3px dashed rgb(47, 100, 141);
bottom: 0px;
height: 100%;
top: -26px;
width: 1px;
}
.el-tree-node:after {
border-top: 3px dashed rgb(47, 100, 141);
height: 20px;
top: 18px;
width: 20px;
}
.el-tree {
background: rgb(31, 35, 49);
width: 16.8rem;
--el-tree-node-hover-bg-color:rgb(31,35,49) !important;
}
.el-tree-node__expand-icon {
display: none;
}
.el-tree-node__content {
color: rgb(47, 100, 141);
font-size: 20px;
margin-top: 10px;
padding-top: 6px;
}
}