vue dialog弹出框随屏幕改变高度

动态改变高度是基于动态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>