elementui height

Element UI 高度设置方法

在Element UI中调整组件高度通常涉及样式覆盖或组件属性的直接设置。以下是几种常见场景的具体实现方式。

表单组件高度调整

通过修改el-input的CSS类名实现自定义高度：

.el-input__inner {
  height: 50px;
  line-height: 50px;
}

表格高度控制

使用height属性设置固定高度，或通过max-height限制最大高度：

<el-table :data="tableData" height="400px">
  <!-- 表格列定义 -->
</el-table>

对话框高度定制

在el-dialog组件中结合CSS实现响应式高度：

.el-dialog {
  height: 80vh;
  min-height: 300px;
}

布局容器高度

使用el-container时需确保父级有明确高度：

<div style="height: 100vh;">
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
  </el-container>
</div>

注意事项

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

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

• 响应式设计建议使用vh单位结合媒体查询