El cambio dinámico de la altura se establece en función del estilo de css dinámico. La altura en el cuadro de diálogo cambia con la altura de los elementos internos, así que agregue class="tableClass" a la tabla en el cuadro de diálogo y cambie la altura en tableClass por el tamaño de pantalla El valor de la altura se almacena en la lista de tamaños.
<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>