在 Vue 2 中，使用 Element UI 2.x 版本时，如果在页面中同时展示两个 el-dialog 组件，可能会出现灰色遮罩层的问题。这是因为 el-dialog 组件在默认情况下会使用一个全局的遮罩层来阻止用户对其他页面元素的交互操作。当多个 el-dialog 组件同时出现时，由于默认的遮罩层是全局的，所以会导致出现一个灰色遮罩层。
要解决这个问题，你可以为每个 el-dialog 组件设置 modal 属性为 false，这样就可以避免全局遮罩层的出现。例如：
<template>
<div>
<el-dialog :visible="dialog1Visible" :modal="false">
<!-- Dialog 1 content -->
</el-dialog>
<el-dialog :visible="dialog2Visible" :modal="false">
<!-- Dialog 2 content -->
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialog1Visible: false,
dialog2Visible: false
}
}
// ...
}
</script>
通过将每个 el-dialog 组件的 modal 属性设置为 false，你可以同时展示多个 el-dialog 组件而不会出现灰色遮罩层。