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-dialogtitle="内容可滚动的对话框":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 是一个估计值，用于预留标题栏和底部按钮的空间。你可以根据实际情况进行调整。
