拖拽
<template>
<el-row>
<el-col :span="24">
<el-table
ref="Table"
border
:height="tableHeight"
stripe
:data="list"
@selection-change="statisticsHandleChange"
@row-click="f_handleRowClick"
:cell-style="$style.cellStyle"
:header-cell-style="$style.rowClass"
:row-class-name="tableRowClassName"
>
<el-table-column
class-name="cannotDrag"
type="selection"
width="55"
/>
<!--checkbox-->
<el-table-column label="序号" type="index" width="55" />
<el-table-column
v-for="item in confirmHead"
:key="item.label"
:label="item.label"
:prop="item.prop"
:width="item.width"
align="center"
show-overflow-tooltip
>
</el-table-column>
<template slot="empty">
<img
src="../../assets/img/empty.png"
alt=""
srcset=""
style="height: calc(100vh - 500px)"
/>
<h4>暂无数据~</h4>
</template>
</el-table>
<pagination
style="padding: 2px 0"
v-show="page.total > 0"
:total="page.total"
:page.sync="page.pageNum"
:limit.sync="page.pageSize"
@pagination="getQueryList"
/>
</el-col>
<el-col :span="24">
<div style="height: 8px" @mousedown="handelmousedown">
<div
ref="lineDiv"
class="lineDiv"
style="background-color: #dcdcdc; height: 2px"
></div>
</div>
</el-col>
<el-col :span="24">
<el-tabs
v-model="activeName"
@tab-click="handleClick"
class="diaodu"
ref="bottomTable"
style="height: 280px; overflow: hidden"
>
<el-tab-pane label="整件标签" name="first">
<el-table
ref="dragTable"
border
:height="tabHeight"
stripe
:data="detailList"
:header-cell-style="$style.rowClass"
:cell-style="$style.cellStyle"
highlight-current-row
class="orderS"
>
<el-table-column label="序号" type="index" width="55" />
<el-table-column
v-for="(item, index) in RepeatPrintingDetailOne"
:key="index"
:prop="item.prop"
:width="item.width"
:label="item.label"
show-overflow-tooltip
>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="零散标签" name="second">
<el-table
ref="dragTable"
border
:height="tabHeight"
stripe
:data="resultList"
:header-cell-style="$style.rowClass"
:cell-style="$style.cellStyle"
highlight-current-row
class="orderS"
>
<el-table-column label="序号" type="index" width="55" />
<el-table-column
v-for="(item, index) in RepeatPrintingDetailTwo"
:key="index"
:prop="item.prop"
:width="item.width"
:label="item.label"
show-overflow-tooltip
>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
],
tableHeight: null,
};
},
methods: {
handelmousedown() {
var tableDiv = this.$refs.Table.$el;
var dtable = this.$refs.bottomTable.$el;
var oDiv = this.$refs.lineDiv;
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();
}
var that = this;
document.onmousemove = function (ev) {
var ev = ev || event;
// 鼠标移动时的鼠标位置
var mouseMoveX = ev.clientX;
var mouseMoveY = ev.clientY;
if (mouseMoveY > 890) {
mouseMoveY = 890;
tableDiv.style.height = theight + (mouseMoveY - mouseDownY) + "px";
} else {
tableDiv.style.height = theight + (mouseMoveY - mouseDownY) + "px";
}
var heightTable = dheight + (mouseDownY - mouseMoveY);
if (heightTable > 575) {
dtable.style.height = 575 + "px";
that.tabHeight = 575 - 50 + "px";
} else {
dtable.style.height = heightTable + "px";
that.tabHeight = heightTable - 50 + "px";
}
that.$forceUpdate();
};
document.onmouseup = function () {
document.onmousemove = null;
// 释放全局捕获
if (oDiv.releaseCapture) {
oDiv.releaseCapture();
}
};
return false;
},
}
</script>
<style>
.lineDiv:hover {
cursor: s-resize;
}
</style>