Element Plus中el-cascader多选时默认高度为0如何解决？

Question

element Plus
在el-form中使用 el-cascader，如果el-cascader为多选，默认el-cascader的input的高度不足，计算高度为0

<el-form ref="searchConditionsRef" :model="searchConditions" label-width="80px">
  <el-form-item :label="`${t('alarm.GL_ALARM_REGION_NAME')}`">
      <el-cascader
          v-model="searchConditions.regionIds"
          :options="regionList"
          :props="cascaderProps"
          clearable
          style="width: 100%"
          collapse-tags-tooltip
      ></el-cascader>
  </el-form-item>
</el-form>

const cascaderProps: CascaderProps = {
    children: 'children',
    label: 'name',
    value: 'id',
    emitPath: false,
    checkStrictly: true,
    multiple: true
}

如果将multiple设为false，高度正常；
如果将el-cascader放在el-form之外，高度也正常。
请问将el-cascader设置为多选且放到el-form中使用，默认高度不足的原因是什么，如何变成正常高度？

Answer 1

在 Element Plus 的 el-cascader 组件中，当开启多选（multiple）并嵌套在 el-form 中时，出现高度计算为 0 的问题，可能是由于 el-form 的默认弹性布局（Flex）与多选级联组件内部结构冲突导致的。下面是一些是具体原因和解决方案：

---

原因分析

1. 布局冲突
   el-form 默认使用 inline 布局（内部通过 Flex 实现），而多选模式下的 el-cascader 需要完整块级（Block）布局才能正确计算高度。
2. 空状态下的占位符
   当未选择任何值时，多选 el-cascader 的输入框高度依赖于 placeholder 文本或默认最小高度，但在 el-form 的弹性布局中可能被压缩。

解决方案

1. 强制指定 el-form 为块级布局（推荐）

在 el-form 外层包裹一个 <div> 并设置 display: block，覆盖默认弹性布局：

<el-form ref="searchConditionsRef" :model="searchConditions" label-width="80px">
  <el-form-item :label="`${t('alarm.GL_ALARM_REGION_NAME')}`">
    <!-- 添加外层 div -->
    <div style="display: block">
      <el-cascader
        v-model="searchConditions.regionIds"
        :options="regionList"
        :props="cascaderProps"
        clearable
        style="width: 100%"
        collapse-tags-tooltip
      ></el-cascader>
    </div>
  </el-form-item>
</el-form>

2. 通过 CSS 覆盖 el-form-item 的弹性布局

直接修改 el-form-item 的样式，强制其子元素使用块级布局：

/* 全局样式或当前组件作用域内 */
.el-form-item__content {
  display: block !important;
}

3. 为 el-cascader 设置最小高度

为多选输入框添加最小高度，确保空状态时有默认高度：

<el-cascader
  v-model="searchConditions.regionIds"
  :options="regionList"
  :props="cascaderProps"
  clearable
  style="width: 100%; min-height: 40px"  <!-- 设置最小高度 -->
  collapse-tags-tooltip
></el-cascader>

4. 强制触发布局更新（临时方案）

在组件挂载后手动触发 DOM 更新（适用于动态加载数据的场景）：

import { nextTick } from 'vue'

onMounted(() => {
  nextTick(() => {
    const cascader = document.querySelector('.el-cascader')
    if (cascader) cascader.style.display = 'none'
    setTimeout(() => {
      if (cascader) cascader.style.display = 'block'
    }, 50)
  })
})

Answer 2

你这是选项没加载出来吧？