ElementUI Dialog 结合Vue实现对话框body“二分”布局

<template>
  <el-dialog
    title="负载配置"
    width="60%"
    :visible="dialogVisible"
    custom-class="dialog-settings"
  >
    <load-settings-form :loadSettingsForm="loadSettingsForm" ref="loadSettingsForm"></load-settings-form>
    <div class="dialog-footer">
      <el-button @click="closeDialog">关闭</el-button>
      <el-button type="primary" @click="saveLoadSettings('loadSettingsForm')">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
// 略
</script>

<style lang="scss">
.dialog-settings {
  height: 70%; 
  .el-dialog__body {
    height: auto;
    flex-direction: column;
    display: flex;
    height: calc(100% - 54px); 
    padding: 0px 20px 20px 20px;
    overflow: none;
    .load-settings-form {
      flex: 1;
      overflow: auto;
    }
    .dialog-footer {
      flex-shrink: 0;
      text-align: center;
    }
  }
}
</style>

height: calc(100% - 54px);  // 设置对话框body高度为对话框高度-对话框标题栏高度