el-dialog设置最低高度

在Element UI的el-dialog中设置最低高度可以使用CSS的min-height属性。你可以在style标签中为.el-dialog__body类添加min-height属性来设置最低高度。例如：

.el-dialog__body {
  min-height: 200px;
}

这样就可以将el-dialog的最低高度设置为200像素[^1]。

相关问题

el-dialog设置固定高度

### element-ui el-dialog 组件固定高度设置

为了使 `el-dialog` 的高度保持固定，可以通过自定义 CSS 类来覆盖默认样式。具体来说，在创建对话框时通过 `custom-class` 属性指定一个类名，并在此类中设定 `.el-dialog__body` 和整个对话框容器的高度。

对于希望将 `el-dialog` 高度设为固定的场景，可以采用局部或全局的方式修改样式[^1]：

#### 方法一：局部样式调整
如果只需要特定实例应用此效果，则可以在模板中的 `<style scoped>` 下添加相应规则：

/* 定义仅应用于当前组件的CSS */
.my-fixed-height-dialog .el-dialog {
  height: 400px !important; /* 设定所需的具体数值 */
}

.my-fixed-height-dialog .el-dialog__body {
  overflow-y: auto;
}

接着在调用 `el-dialog` 时为其分配上述自定义类：

<template>
  <el-dialog :visible.sync="dialogVisible" custom-class="my-fixed-height-dialog">
    <!-- 对话框内容 -->
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
};
</script>

#### 方法二：全局样式调整
当多个地方都需要相同的处理逻辑时，可以选择在项目的公共样式文件（如 `App.vue` 或专门的样式表）里统一配置：

.el-dialog.fixed-height {
  height: 400px !important;
}

.el-dialog.fixed-height .el-dialog__body {
  max-height: calc(100% - 50px); /* 减去header/footer部分占用的空间 */
  overflow-y: auto;
}

之后只需简单地向目标 `el-dialog` 添加对应的 class 即可生效：

<el-dialog :visible.sync="dialogVisible" class="fixed-height">
  ...
</el-dialog>

需要注意的是，这里提到的尺寸单位可以根据实际需求灵活调整，同时也要考虑到不同分辨率下的显示适配问题。

el-dialog设置高度

你可以使用 `:height` 属性来设置 `el-dialog` 组件的高度。例如：

<el-dialog :visible="dialogVisible" :title="dialogTitle" :height="dialogHeight">
  <!-- 对话框内容 -->
</el-dialog>

其中，`dialogHeight` 是一个变量，可以在组件中定义。你可以将其设置为一个数字或字符串，例如：

- `300` 表示高度为 300 像素。
- `'50%'` 表示高度为父元素的 50%。
- `'auto'` 表示高度自适应内容。

注意，如果设置了 `:height` 属性，对话框的最大高度将受到限制，当对话框内容超过指定高度时，会出现滚动条。如果不设置 `:height` 属性，则对话框的高度会根据内容自适应。