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。
在