1.页面
ref="changeBox" :style="{ 'height': containerHeight + 'px' }"
ref="table" :height="tableHeight" :max-height="tableHeight"
ref="pageBox"
<template>
<div class="orderInfo" ref="changeBox" :style="{ 'height': containerHeight + 'px' }">
<el-table :data="tableData" border id="outExcel" ref="table" v-loading="tableLoading" row-key="id" stripe
:height="tableHeight" :max-height="tableHeight" size="medium" style="width:100%;">
</el-table>
<div class="pageInfo" ref="pageBox">
</div>
</div>
</template>
data() {
return {
containerHeight: 800,
tableHeight: 500,
}
},
created() {
this.$nextTick(function () {
this.onResize();
});
window.addEventListener('resize', this.onResize);
},
beforeDestroy() {
window.removeEventListener("resize", this.onResize);
},
methods: {
onResize() {
this.$method.onResize(this.$refs.changeBox, this.$refs.pageBox);
this.containerHeight = this.$method.containerHeight;
this.tableHeight = this.$method.tableHeight;
},
}
2.js
export default {
containerHeight:500,
tableHeight:500,
// 根据滚动条高显示的大小发生变化
onResize(outerBox,innerBox) {
var boxHeight = document.documentElement.clientHeight || document.body.clientHeight;
var mapTop = outerBox.getBoundingClientRect().top;
var pageHeight = innerBox.getBoundingClientRect().height;
this.containerHeight = boxHeight - mapTop - 40;
this.tableHeight = this.containerHeight - pageHeight;
},
}
3.main.js
import method from "@/util/public";
Vue.prototype.$method = method;