使element-plus Collapse折叠面板组件具有自适应能力

要求在一个固定高度展示一系列折叠面板 展示内容时占据全部高度 并将滚动行为局限在面板内 形如下图

这个组件的结构是 .el-collapse>.el-collapse-item>.el-collapse-item__wrap>.el-collapse-item__content>实际内容 .el-collapse-item下还有子元素面板标题 本面板活跃时 会变为.el-collapse-item.is-active 如下图所示

考虑使用flex:auto进行自适应 并通过绝对定位使元素脱离文档流 使面板宽度只受外部影响 代码如下

<script setup>
import { ElCollapse, ElCollapseItem } from "element-plus";
</script>
<template>
  <el-collapse style="width: 500px; height: 200px">
    <el-collapse-item title="title">
      <template #default>
        <div style="background-color: #4096ff; height: 600px"></div>
      </template>
    </el-collapse-item>
  </el-collapse>
</template>
<style scoped>
.el-collapse {
  display: flex;
  flex-direction: column;

  & > :deep(.el-collapse-item) {
    display: flex;
    flex-direction: column;

    &.is-active {
      flex: auto;
      & > .el-collapse-item__wrap {
        flex: auto;
        position: relative;
        & > .el-collapse-item__content {
          position: absolute;
          inset: 0;
          overflow: auto;
        }
      }
    }

    & > .el-collapse-item__wrap {
      transition: 0s;
    }
  }
}
</style>

可以看到还对transition做了限制 因为flex:auto导致的高度变化是不能渐变的
上述是使用css就做到的简单方案 实际需求更加复杂时 可以考虑测量元素尺寸 计算面板自适应时应当展示的最大高度 同时监听resize等事件避免数据过期