页面拖拽更改左右宽度

效果图

代码部分 

<div class="box" ref="box">
      <div class="left pd20" ref="left1">
        <div style="height:100%">
          <el-input
            v-model="search.roleName"
            placeholder="搜索角色"
            clearable
            size="medium"
            style="margin-bottom: 20px;"
            @change="pageList"
          />
          <el-table
            class="mt15"
            border
            stripe
            size="small"
            ref="table1"
            v-loading="listLoading"
            :data="tableListData"
            highlight-current-row
            @row-click="rolePageList"
          >
            <el-table-column type="index" :label="$t('序号')" width="50"></el-table-column>
            <el-table-column :label="$t('角色编码')" prop="roleId"></el-table-column>
            <el-table-column :label="$t('角色')" prop="roleName"></el-table-column>
            <el-table-column
              :label="$t('用户') + $t('数')"
              width="60"
              prop="total"
            ></el-table-column>
            <el-table-column :label="$t('操作')">
              <template slot-scope="scope">
                <span class="my-primary " @click="view(scope.row)">{{ $t('配置用户') }}</span>
                <span class="my-primary ml10" @click="editRole(scope.row)">{{ $t('编辑') }}</span>
                <span class="delete pointer ml10" @click="delRole(scope.row)">{{
                  $t('删除')
                }}</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="bottom mt30 mb20 tc">
            <el-button type="primary" @click="addRole" size="small">新建角色</el-button>
          </div>
        </div>
      </div>
      <div class="resize" title="收缩侧边栏" :style="{ height: videoHeight }"></div>
      <div class="mid pd20" ref="mid1">
        <el-table
          :data="roleData"
          style="width: 100%"
          stripe
          border
          v-loading="listLoading1"
          ref="table2"
        >
          <el-table-column prop="menuName" :label="$t('菜单') + $t('权限')"> </el-table-column>
          <el-table-column prop="name" :label="$t('操作') + $t('权限')">
            <template slot-scope="scope">
              <span
                class="mr10"
                v-for="(item, index) in scope.row.operatePermissions"
                :key="index"
                >{{ item.menuName }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="address" :label="$t('数据权限')">
            <template slot-scope="scope">
              <span class="mr10" v-for="(item, index) in scope.row.dataPermissions" :key="index">{{
                item.menuName
              }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

 data () {
    return {
      videoHeight: 0,
    }
  },
 mounted () {
    this.dragControllerDiv()
    this.getvideoHeight()
  },
  created () {
    window.addEventListener('resize', this.getvideoHeight)
    this._initData()
  },
methods: {
    getvideoHeight () {
      let height1 = this.$refs.left1 && this.$refs.left1.offsetHeight + 50
      let height2 = this.$refs.mid1 && this.$refs.mid1.offsetHeight + 50
      let height = height1 >= height2 ? height1 : height2
      this.videoHeight = height >= 815 ? height + 'px' : '815px'
      // console.log(this.videoHeight,3466)
    },
    dragControllerDiv: function () {
      let that = this
      var resize = document.getElementsByClassName('resize')
      var left = document.getElementsByClassName('left')
      var mid = document.getElementsByClassName('mid')
      var box = document.getElementsByClassName('box')
      for (let i = 0; i < resize.length; i++) {
        // 鼠标按下事件
        resize[i].onmousedown = function (e) {
          //颜色改变提醒
          resize[i].style.background = '#f0f2f5'
          var startX = e.clientX
          resize[i].left = resize[i].offsetLeft
          // 鼠标拖动事件
          document.onmousemove = function (e) {
            var endX = e.clientX
            var moveLen = resize[i].left + (endX - startX) // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
            var maxT = box[i].clientWidth - resize[i].offsetWidth // 容器宽度 - 左边区域的宽度 = 右边区域的宽度

            if (moveLen < 200) moveLen = 200 // 左边区域的最小宽度为32px
            if (moveLen > maxT - 200) moveLen = maxT - 200 //右边区域最小宽度为150px

            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 - 10 + 'px'
            }
            that.getvideoHeight()
          }
          // 鼠标松开事件
          document.onmouseup = function (evt) {
            //颜色恢复
            resize[i].style.background = '#f0f2f5'
            document.onmousemove = null
            document.onmouseup = null
            resize[i].releaseCapture && resize[i].releaseCapture() //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
          }
          resize[i].setCapture && resize[i].setCapture() //该函数在属于当前线程的指定窗口里设置鼠标捕获
          return false
        }
      }
    },
    _initData () {
      this.pageList()
    },
    // 获取角色列表
    pageList () {
      this.listLoading = true
      this.$http({
        url: this.API.findRoleList,
        data: this.search
      })
        .then(res => {
          if (res.data.code === this.API.SUCCESS) {
            this.tableData = res.data.body
            if (this.tableData && this.tableData[0]) {
              this.roleId = this.tableData[0].id
            }
            this.roleList()
            this.$nextTick(() => {
              this.getvideoHeight()
            })
          }
        })
        .catch(_ => {})
        .finally(res => {
          this.listLoading = false
        })
    },
}

.box {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 1% 0px;
  overflow: hidden;
  display: flex;
  // box-shadow: -1px 9px 10px 3px rgba(0, 0, 0, 0.11);
}
/*左侧div样式*/
.left {
  width: calc(44% - 10px); /*左侧初始化宽度*/
  height: 100%;
  background: #ffffff;
  float: left;
  box-sizing: border-box;
  // border-right: 1px solid #d6d6d6;
}
/*拖拽区div样式*/
.resize {
  cursor: col-resize;
  float: left;
  position: relative;
  top: 0;
  padding-top: 20%;
  background-color: #f0f2f5;
  width: 10px;
  height: 100%;
  background-size: cover;
  background-position: center;
  font-size: 32px;
  color: #f0f2f5;
  box-sizing: border-box;
}
/*拖拽区鼠标悬停样式*/
.resize:hover {
  color: #f0f2f5;
}
/*右侧div'样式*/
.mid {
  // border-left: 1px solid #d6d6d6;
  box-sizing: border-box;
  float: left;
  width: 56%; /*右侧初始化宽度*/
  height: 100%;
  background: #fff;
}

参考了网上代码，然后又自己增加了内容，最后终于实现了效果，虽然还有小bug，但是不影响使用

方法：

首先我是左右两个盒子。里面都是表格，根据后台返回的数据去渲染，所以页面高度不固定，但是中间的灰色条需要占满整个高度，这样页面才可以任何高度都能拖拽实现宽度改变，所以我写了函数getvideoHeight在页面改变时重新获取高度

其次，拖拽实现宽度变化是写了js去监听鼠标移动实现，参考了网上的一些写法，但是发现在缩放的时候右边会被挤下去，后面实践发现只需要给父盒子设置display: flex;即可解决

因为原生js还是会有写小bug，后面再优化