动态改变高度是基于动态css样式进行设置,dialog中的高度是随内部元素高度变化,所以在dialog中的table添加class="tableClass",通过屏幕大小改变tableClass中的height,高度数值存储在sizeList中。
<template>
<div :style="sizeList">
<div>
<el-form :model="searchForm">
<el-row>
<el-col :span="2">
<el-button type="primary" @click="openDialog">打开弹出框</el-button>
</el-col>
</el-row>
</el-form>
</div>
<el-dialog title="列表" :visible.sync="dialogVisible" width="1000px" top="5vh" :close-on-click-modal="false">
<div>
<el-table :data="list" border fit stripe class="tableClass" style="overflow:auto">
<el-table-column label="A" prop="A" min-width="120px"></el-table-column>
<el-table-column label="B" prop="B" min-width="120px"></el-table-column>
<el-table-column label="C" prop="C" min-width="120px"></el-table-column>
</el-table>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data () {
return {
screenHeight:null,
sizeList: {
'--tableHeight': 410,
},
dialogVisible: false,
list:[]
}
},
watch:{
screenHeight(val,oldVal){
let num = val - 247;
this.$set(this.sizeList,"--tableHeight",num+'px');
}
},
methods: {
openDialog(){
this.dialogVisible = true;
}
},
created() {
this.screenHeight = document.body.clientHeight;
let that = this;
window.onresize = function(){
that.$set(that,'screenHeight',document.body.clientHeight);
}
}
}
</script>
<style ref="styleSheet/scss" lang="scss" scoped>
.tableClass{
height: var(--tableHeight);
}
</style>