el-dialog的overflow无效

### 解决 el-dialog 中 `overflow` 样式失效的方法

当遇到 Element UI 的 `el-dialog` 组件中内容过多导致滚动条无法正常工作的情况时，可以采用多种解决方案来确保溢出的内容能够被正确处理。

#### 方法一：局部或全局设置样式
通过覆盖默认样式，可以在不修改框架源码的情况下实现所需效果。具体做法是在项目的 CSS 文件中添加特定的选择器以调整 `.el-dialog__body` 部分的高度和溢出行为[^1]：

/* 调整对话框主体部分 */
.el-dialog {
    /* 确保整个对话框不会超过屏幕尺寸 */
    max-height: calc(100vh - 80px);
}

.el-dialog .el-dialog__body {
    height: 70%;
    overflow-y: auto;
}

这种方法适用于大多数场景，并且不需要深入到组件内部进行改动。

#### 方法二：使用绝对定位与弹性盒子模型
为了使弹窗始终位于视口中央并允许其内容区域自动适应大小变化，在某些情况下可能需要更复杂的CSS规则。下面是一个例子展示了如何利用 Flexbox 和相对单位让`.el-dialog`及其子元素更好地响应不同情况下的布局需求[^2]:

::v-deep .el-dialog{
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body{
    flex-grow: 1;
    overflow: auto;
}

此配置不仅解决了垂直居中的问题，还为主要内容区提供了可滚动的能力。

#### 方法三：在 Dialog 内部创建额外容器
如果上述两种方法都不能满足项目的需求，则考虑在一个新的 `<div>` 容器内包裹实际要展示的信息。这样做的好处是可以更加灵活地控制该层的外观属性而不影响其他部分的功能[^3]：

<template>
  <el-dialog :visible.sync="dialogVisible">
    <!-- 新增一层用于管理滚动 -->
    <div class="custom-scroll-container">
      {{ longContent }}
    </div>
  </el-dialog>
</template>

<style scoped>
.custom-scroll-container {
  height: 400px; /* 或者根据实际情况设定 */
  overflow-y: auto;
}
</style>

以上三种策略可以根据具体的业务逻辑和个人偏好选择最合适的方案实施。每种方式都有各自的优缺点，请依据应用场景做出最佳判断。