vue中使用document.onmousemove实现两表格间可拖动改变表格高度

 页面就是上下两个挨着的el-table

<!-- 可拖动分割区线 纵向为col-resize -->
<div style="padding: 2px;cursor: row-resize;" @mousedown="mousedown($event)"></div>


mousedown(e) {
                // 鼠标按下并监听xy移动
                document.onmousemove = (e) => {
                    e.preventDefault();
                    //拖动
                    this.tableh += e.movementY;
                    this.detailTableh -= e.movementY;
                    //设置最大最小范围：不能无限制
                    if (this.tableh < 0) this.tableh = 0;
                    if (this.detailTableh < 0) this.detailTableh = 0;
                    if (this.tableh >= this.availableh) this.tableh = this.availableh;
        if (this.detailTableh >= this.availableh) this.detailTableh = this.availableh;
                }
                // 停止松开鼠标记录xy
                document.onmouseup = (e) => {
                    document.onmousemove = null;
                }
            },



// 计算高度
 calculateHeight() {
   this.availableh = document.documentElement.clientHeight - 136 - this.$refs.searchView.offsetHeight;
  this.tableh = this.availableh * 0.3;
   this.detailTableh = this.availableh * 0.7;
            },