element-ui的树形结构样式调整，添加线条和边框样式
先看图效果：
javascript
<template>
<div class="temperature_monitoring">
<div class="temperature_monitoring_left">
<div class="tree-container">
<el-tree
ref="tree"
class="tree filter-tree"
:data="datalist"
:props="defaultProps"
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<span :dataType="data.type">
{{ node.label }}
</span>
</span>
</el-tree>
</div>
</div>
<div class="temperature_monitoring_right">内容</div>
</div>
</template>
<script>
export default {
name: 'TemperatureMonitoring',
components: {},
props: {},
data() {
return {
datalist: [
{
label: '园区A',
children: [
{
label: 'A栋',
children: [
{
label: '厂房1',
children: [
{
label: '车间1',
children: [
{
label: '101'
},
{
label: '102'
},
{
label: '103'
},
{
label: '104'
}
]
},
{
label: '车间2'
},
{
label: '车间3'
},
{
label: '车间4'
}
]
},
{
label: '厂房2',
children: [
{
label: '车间1'
},
{
label: '车间2'
},
{
label: '车间3'
},
{
label: '车间4'
}
]
},
{
label: '厂房3',
children: [
{
label: '车间1'
},
{
label: '车间2'
},
{
label: '车间3'
},
{
label: '车间4'
}
]
},
{
label: '厂房4',
children: [
{
label: '车间1'
},
{
label: '车间2'
},
{
label: '车间3'
},
{
label: '车间4'
}
]
},
{
label: '厂房5',
children: [
{
label: '车间1'
},
{
label: '车间2'
},
{
label: '车间3'
},
{
label: '车间4'
}
]
}
]
},
{
label: 'B栋',
children: [
{
label: '厂房1'
}
]
}
]
}
],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
computed: {},
watch: {},
created() {},
methods: {
handleNodeClick(data) {
console.log(data)
}
}
}
</script>
<style lang="scss" scoped>
.temperature_monitoring {
display: flex;
padding: 12px;
.temperature_monitoring_left {
width: 200px;
padding-right: 12px;
}
}
</style>
<style lang='scss'>
.temperature_monitoring {
/* 树形结构节点添加连线 */
.tree .el-tree-node {
position: relative;
}
.tree .el-tree-node__children {
padding-left: 24px;
}
.tree .el-tree-node :last-child:before {
height: 38px;
}
.tree .el-tree > .el-tree-node:before {
border-left: none;
}
.tree-container .el-tree > .el-tree-node:after {
border-top: none;
}
.tree .el-tree-node__children .el-tree-node:before {
content: '';
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.tree .el-tree-node:after {
content: '';
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.tree .el-tree-node__expand-icon.is-leaf {
display: none;
}
.tree .el-tree-node:before {
border-left: 1px solid #1173e6;
bottom: 0px;
height: 140%;
top: -26px;
width: 1px;
}
.tree .el-tree-node:after {
border-top: 1px solid #1173e6;
height: 20px;
top: 12px;
width: 24px;
}
.tree .el-tree-node {
&:last-child:after {
border-left: 1px solid #fff;
height: 100%;
}
}
.tree .custom-tree-node {
padding-left: 10px;
}
.el-tree-node__content {
border: 1px solid #1173e6;
padding-left: 0 !important;
padding-right: 32px;
margin-left: 20px;
margin-top: 8px;
}
.el-tree-node__content:hover {
background: #1173e6;
color: #fff;
.el-tree-node__expand-icon {
color: #fff;
}
}
.el-tree-node__expand-icon {
position: absolute;
right: 2%;
color: #1173e6;
}
.el-tree-node.is-current > .el-tree-node__content {
color: #fff;
background-color: #1067ee;
.el-tree-node__expand-icon {
color: #fff;
}
}
}
</style>