树的宽度可调

index.js

<template>
  <div
    class="box"
    :style="{height:screenHeight - 110 + 'px'}"
  >
    <el-row>
      <el-col
        :span="scale"
        :style="{height:screenHeight - 110 + 'px'}"
        class="left"
      >
        <slot name="leftSlot"></slot>
      </el-col>
      <el-col
        :span="1"
        :style="{height:screenHeight - 110 + 'px'}"
        class="resize"
      ></el-col>
      <el-col
        :span="23-scale"
        :style="{height:screenHeight - 110 + 'px'}"
        class="mid"
      >
        <slot
          style="background-color:black"
          name="midSlot"
        ></slot>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  props: {
    scale: {
      type: Number,
      default () {
        return 3;
      }
    }
  },
  data () {
    return {
      screenWidth: document.body.clientWidth,
      screenHeight: document.body.clientHeight
    };
  },
  mounted () {
    // 监听box变化，修改内容区宽度，防止侧边菜单缩放，展开导致内容区下坠
    let elementsd = require("element-resize-detector");
    let eld = elementsd();
    var _this = this;
    console.warn(_this)
    eld.listenTo(document.getElementsByClassName("box")[0], function (el) {
      document.getElementsByClassName("mid")[0].style.width =
        el.clientWidth -
        document.getElementsByClassName("left")[0].clientWidth -
        40 +
        "px";
    });
    //初始化推拉事件
    this.dragControllerDiv();
    const that = this;
    // 监听窗体大小变化，重置内容区，避免窗体变化导致内容区下坠
    window.onresize = () => {
      return (() => {
        that.screenHeight = document.body.clientHeight;
        that.screenWidth = document.body.clientWidth;
        document.getElementsByClassName("left")[0].style.width =
          that.screenWidth * (that.scale / 24) + "px";
        document.getElementsByClassName("mid")[0].style.width =
          that.screenWidth * ((23 - this.scale) / 24) + "px";
      })();
    };
  },
  watch: {},
  methods: {
    // 推拉
    dragControllerDiv () {
      var resize = document.getElementsByClassName("resize");
      var left = document.getElementsByClassName("left");
      var mid = document.getElementsByClassName("mid");
      var box = document.getElementsByClassName("box");
      var _this = this;
      for (let i = 0; i < resize.length; i++) {
        //鼠标按下事件
        resize[i].onmousedown = function (e) {
          var startX = e.clientX;
          resize[i].left = resize[i].offsetLeft;
          document.onmousemove = function (e) {
            var endX = e.clientX;
            // console.log(endX,'endX')
            _this.$emit("widthchange",endX)
            var moveLen = resize[i].left + (endX - startX);
            var maxT = box[i].clientWidth;
            if (moveLen < _this.screenWidth * (_this.scale / 24)) {
              moveLen = _this.screenWidth * (_this.scale / 24);
            }
            if (moveLen > maxT - 300) {
              moveLen = maxT - 300;
            }
            resize[i].style.left = moveLen;
            for (let j = 0; j < left.length; j++) {
              left[j].style.width = moveLen + "px";
              mid[j].style.width = box[i].clientWidth - moveLen - 40 + "px";
            }
            document.onmouseup = function () {
              document.onmousemove = null;
              document.onmouseup = null;
              resize[i].releaseCapture && resize[i].releaseCapture();
            };
            resize[i].setCapture && resize[i].setCapture();
            return false;
          };
        };
      }
    }
  }
};
</script>
<style scoped>
.box {
  overflow: hidden;
  width: 100%;
}

.left {
  background: #5d80f5;
  float: left;
  overflow-y: scroll;
  overflow-x: hidden;
}

.resize {
  cursor: w-resize;
  background-color: #5d80f5;
  /* border-radius: 3px; */
  width: 4px;
  background-size: cover;
  background-position: center;
  z-index: 200;
  margin-right: 10px;
}
 .left::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 8px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
  .left::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow   : inset 0 0 5px rgba(139, 131, 131, 0.2);
  background   : #5F738F;
  }
  .left::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(129, 119, 119, 0.2);
  border-radius: 10px;
  background   : #ededed;
  }
.mid {
  float: left;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>

 组件中使用

<template>
  <div>
    <DragLayout>
      <template slot="leftSlot">
        <treedata
          v-on:handle-tree="handleTreeNodeClick"
          v-on:handle-check="handleCheck"
          ref="child"
        ></treedata>
      </template>
      <template slot="midSlot">
        <el-row
          class="top-block padding-20px Terallbtn"
          :gutter="4"
        >
          <el-col :xs="24" :sm="24" :lg="24">
            <el-button
              type="primary"
              @click.native="TerminalFind"
              class="btn"
              >参数查询</el-button
            >
            <el-button
              type="primary"
              @click.native="newTerminal"
              class="btn"
              >新建终端</el-button
            >
            <el-button
              type="primary"
              @click.native="batchModifyDataCenter('')"
              class="btn"
              >地址修改</el-button
            >
            <el-button
              type="primary"
              @click.native="deldataList('')"
              class="btn"
              >删除终端</el-button
            >
          </el-col>
        </el-row>
        <el-row>
          <el-table
            row-key="sortNo"
            border
            ref="multipleTable"
            :data="userList"
            tooltip-effect="dark"
            style="width: 100%"
            :header-cell-style="{
              background: '#eef1f6',
              color: '#606266',
              'text-align': 'center',
            }"
            :row-style="{ height: '40px' }"
            :cell-style="{ 'text-align': 'center', padding: '0' }"
            :cell-class-name="getCellClass"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="35"> </el-table-column>
            <el-table-column prop="deviceName" label="终端名称" width="160">
            </el-table-column>
            <el-table-column prop="deviceId" label="终端编号" width="140">
            </el-table-column>
            <el-table-column prop="deviceType" label="终端类型">
            </el-table-column>
            <el-table-column prop="stratage" label="采集策略">
            </el-table-column>
            <el-table-column prop="workMode" label="工作模式">
            </el-table-column>
            <el-table-column prop="devModel" label="固件版本号" width="165">
            </el-table-column>
            <el-table-column prop="longitude" label="经度" width="100">
            </el-table-column>
            <el-table-column prop="latitude" label="纬度" width="100">
            </el-table-column>
            <el-table-column prop="projectLocation" label="工程部位">
            </el-table-column>
            <el-table-column prop="station" label="桩号"> </el-table-column>
            <el-table-column prop="imei" label="IMEI" width="154">
            </el-table-column>
            <el-table-column prop="iccid" label="ICCID" width="200">
            </el-table-column>
            <el-table-column label="操作" width="110">
              <template slot-scope="scope">
                <el-button
                  @click="reviseTerminal(scope)"
                  type="info"
                  size="medium"
                  icon="el-icon-edit"
                  class="edit"
                ></el-button>
                <el-button
                  @click="deleteItem(scope)"
                  type="danger"
                  size="medium"
                  icon="el-icon-delete"
                  class="del"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row>
          <Pagination
            :total="total"
            :currentPage="Form.pageNo"
            :pageSize="Form.pageSize"
            v-on:size-change="sizeChange"
            v-on:current-change="currentChange"
          />
        </el-row>
        <NewTerminal v-on:edit-user="updateList" ref="newTerminalRef" />
        <ReviseTerminal ref="reviseTerminalRef" />
        <batchModifyDataCenter ref="batchModifyDataCenterRef" />
      </template>
    </DragLayout>
  </div>
</template>

<script>
import DragLayout from "@/components/DragLayout";
export default {
components: {
    DragLayout,
}
}
</script>

重要的点