elementui高度

调整 Element UI 组件高度的方法

表单组件高度调整 通过修改 el-input 的 height 属性或内联样式实现：

<el-input style="height: 50px"></el-input>

或使用 CSS 类名覆盖默认样式：

.custom-input .el-input__inner {
  height: 60px;
}

表格组件高度控制 设置 el-table 的 height 属性为固定值或百分比：

<el-table :height="400"></el-table>

动态高度可通过计算属性绑定：

computed: {
  tableHeight() {
    return window.innerHeight - 200;
  }
}

弹窗组件高度定制 在 el-dialog 中使用 custom-class 配合 CSS 调整：

<el-dialog custom-class="high-dialog"></el-dialog>

.high-dialog {
  height: 70vh;
}

布局容器响应式处理 el-container 系列组件可通过 flex 布局自动填充高度：

<el-container style="height: 100vh">
  <el-header></el-header>
  <el-main></el-main>
</el-container>

注意事项

• 百分比高度需要确保父容器有明确的高度值
• 部分组件如 el-select 需同时调整下拉面板高度：

  .el-select-dropdown__wrap {
    max-height: 400px;
  }

• 移动端适配建议使用 vh 单位结合媒体查询