vue element-ui 界面有上下两部分table，拉动改变上下区域大小 关键代码

<template>

<!-- 上表格 -->

<el-table ref = "topTable"></el-table>

<!-- 拉动线 -->

<div class="lineDiv" v-if="detailData" style="background-color:#DCDCDC;height:5px" ref="lineDiv"></div>

<!-- 下表格 -->

<el-table ref="dTable"></el-table>

</template>

 

<script>

mounted() {

//上下拖动

var tableDiv = this.$refs.topTable.$el

var dtable = this.$refs.dTable.$el

var oDiv = this.$refs.lineDiv

oDiv.onmousedown = function(ev){

var theight = parseInt(tableDiv.offsetHeight)//parseInt为了不指向对象

var dheight = parseInt(dtable.offsetHeight)

oDiv.style.cursor = 's-resize'

var ev = ev || event;

//鼠标按下坐标

var mouseDownX = ev.clientX;

var mouseDownY = ev.clientY;

// IE8 取消默认行为-设置全局捕获

if(oDiv.setCapture){

oDiv.setCapture();

}

document.onmousemove = function(ev){

var ev = ev || event;

// 鼠标移动时的鼠标位置

var mouseMoveX = ev.clientX;

var mouseMoveY = ev.clientY;

 

tableDiv.style.height = theight+(mouseMoveY-mouseDownY)+"px"

dtable.style.height = dheight +(mouseDownY-mouseMoveY)+"px"

}

}

document.onmouseup = function(){

document.onmousemove = null;

// 释放全局捕获

if(oDiv.releaseCapture){

oDiv.releaseCapture();

}

}

return false;

}

 

</script>

<style>

.lineDiv:hover{

cursor:s-resize;

}

</style>