El cuadro emergente de diálogo vue cambia de altura con la pantalla

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>

Supongo que te gusta

Origin blog.csdn.net/css_javascrpit/article/details/126056725
Recomendado
Clasificación