element-ui的树形结构样式调整，添加线条和边框样式

element-ui的树形结构样式调整，添加线条和边框样式

先看图效果：

<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>