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

原创

于 2024-10-10 14:58:44 发布 · 1.1k 阅读

标签

#ui #javascript #vue.js

收录于

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