el-dialog内容大于高度时可滑动

el-dialog内容大于高度时可滑动

在 Element UI 中，当 el-dialog 对话框的内容高度超过其可视区域时，默认情况下并不会自动出现滚动条。为了让内容在高度超出时能够滚动，你需要对 el-dialog 的内容部分进行一些样式调整。

以下是一个简单的实现方法，通过给 el-dialog__wrapper 或 el-dialog__body 添加自定义样式来实现滚动：

<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">打开对话框</el-button>

    <el-dialog
      title="内容可滚动的对话框"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      custom-class="my-custom-dialog"
      width="50%">
      
      <div class="dialog-content">
        <!-- 这里放置大量内容，使其高度超出对话框的可视区域 -->
        <p v-for="n in 50" :key="n">这是第 {{ n }} 行内容。</p>
      </div>
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    handleConfirm() {
      this.dialogVisible = false;
      // 可以在这里处理确认逻辑
    }
  }
};
</script>

<style scoped>
.my-custom-dialog .el-dialog__wrapper {
  overflow: auto; /* 使对话框内容区域可滚动 */
}

/* 或者你可以直接针对 body 部分设置样式 */
/*
.my-custom-dialog .el-dialog__body {
  overflow-y: auto; /* 垂直方向可滚动 */
  max-height: calc(100vh - 150px); /* 根据需要调整最大高度，这里预留了标题栏和底部按钮的空间 */
}
*/

.dialog-content {
  /* 其他内容样式 */
}

.dialog-footer {
  text-align: right;
  margin-top: 20px;
}
</style>

在这个示例中：
我为 el-dialog 添加了一个 custom-class 属性，并赋予了一个自定义类名 my-custom-dialog。
在 <style> 标签内，我使用了 .my-custom-dialog .el-dialog__wrapper 选择器来设置样式，使对话框的内容区域在高度超出时能够滚动。你也可以选择 .el-dialog__body 来设置样式，这取决于你希望滚动的具体区域。
我为对话框内容添加了一个 .dialog-content 类，用于放置大量内容，并使其高度超出对话框的可视区域以测试滚动效果。
我保留了对话框底部的按钮区域，并为其添加了一个 .dialog-footer 类。
请注意，append-to-body 属性用于将对话框附加到 body 元素上，这有助于确保对话框的样式和定位不会受到父容器的影响。然而，在某些情况下，如果你不希望对话框附加到 body 上，你可以移除这个属性，并相应地调整样式以确保滚动效果仍然有效。

另外，max-height 的值可能需要根据你的具体需求和对话框的标题栏、底部按钮等部分的高度进行调整。在这个示例中，我使用了 calc(100vh - 150px) 来计算最大高度，其中 100vh 表示视口高度的 100%，150px 是一个估计值，用于预留标题栏和底部按钮的空间。你可以根据实际情况进行调整。