vue 更改移动table表格高度,且拉动更改高度丝滑流畅

应用场景：底部需求表格展示人员信息，但不是固定表格可视区域，需要鼠标动态拉动表格改变可视区域。

由于旧代码控件可能无法兼容新项目，所以研究之下自己写方法实现，如有缺陷请指导哈。

应用代码：

<div  class="drawer-box-user'" id="drawerBoxUser">
            <div class="table-close" >
              <!-- <el-button class="but-info" size="mini" type="primary" @click="uiddenserListClock()">关闭</el-button> -->
              <i class="el-icon-caret-bottom" @click="userListHidden()"></i>
            </div>
            <div class="drawer-box-user-head" @mousedown="mouseDownChangeHeight($event)"></div>
            <template>
              <div class="user-alarm">     
                <el-row >
                  <el-col :span="8">
                   <span class="user-alarm-title"> {{userListTitle}}</span>
                  </el-col>
                  <el-col :span="12"><img class="user-alarm-img-close" :src="iocnUrl+'IconClose.png'" @click="userListClock()" alt="" /></el-col>
                </el-row>      
              </div>
              <div class="table-heigt" id="tableHeigt">
                <el-table :data="userList" border height="92%" style="width: 100%;"  :header-cell-style="{background:'#EEEEEE'}">
 <!--注意，此处height为外框的高度占比（既id为tableHeigt的div的92%高度）-->
                <el-table-column label="序号" type="index" width="80" align="center" fixed="left"></el-table-column>
                <el-table-column prop="XX" width="120" label="XXX" align="center">
                </el-table-column>
                <el-table-column prop="XX.XX" label="XXX" width="120" align="center">
                </el-table-column>
                <el-table-column prop="XXX.XX" label="XXX" width="160" align="center">
                </el-table-column>
                <el-table-column prop="XX.XX" label="XXX" align="center">
                </el-table-column>
                <el-table-column prop="XX.XX" label="XXX" width="100" align="center">
                </el-table-column>
              </el-table>
            </div>
            </template>

JS代码，动态改变

<script>   
mouseDownChangeHeight(e) {
        // //鼠标拖动改变div大小
        var targetDiv = document.getElementById("drawerBoxUser")
        var tableHeigt = document.getElementById("tableHeigtId")//具体id看自己定义的
        // //得到点击时该地图容器的宽高：
        var targetDivHeight = targetDiv.offsetHeight
        // var startX = e.clientX
        var startY = e.clientY
        //防止拖动时选择地图等其它内容而出现其它视觉影响
        if (e.preventDefault) {
          e.preventDefault();
          } else{
          e.returnValue=false;
          };
        document.onmousemove = (e) => {
          if (!targetDiv) return false
          let change = targetDivHeight + (startY - e.clientY)
          // console.log(change)
          if (change < 2) return false  // 设置最小高度
          if (change > 400) return false  //设置最大高度
          console.log(change)
          if(change>250){
            targetDiv.style.height = change+ 'px'
            tableHeigt.style.height =change+ 'px'
          }else{
            targetDiv.style.height = change+ 'px'
            tableHeigt.style.height =(change-15)+ 'px'
          }
         
        }
        document.onmouseup = () => {
          targetDiv = null
          document.onmousemove = null;
        }
      },
</script> 

表格样式css

<style>
 .drawer-box-user {
    width: calc(100% - 405px);
    height: 200px;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 2000;
    background: white;
        //表格初始样式
    .table-heigt{
       width: calc(100% - 405px);
       height: 170px;
       overflow: auto;
       position: fixed;
      }
  }
</style>