Element修改树结构样式--虚线树

场景

修改前端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;
  }
}