最近遇到了个问题：表格全屏时，调用弹窗显示不出来，退出全屏时，弹窗其实是在的。网上查了下，还是有相关资料的。
原因如下：
全屏的元素是没法被其它元素覆盖的，除非这个元素是全屏子元素。在使用Modal时，可选择是否挂载到某个HTML节点，一般会选择不挂载，这样Modal会默认挂载到和<div id="app"></div>同一级别下的节点上，遮罩会将app里面的内容覆盖，导致app里面的内容无法使用，只要把Modal关了就可以继续使用。而当我们想用背景的内容来操纵Modal里面的数据的时候，往往需要操作app里面的内容，例如点击按钮等等。这个时候就需要把Modal绑定到指定的节点上，一般可以选择在使用<a-modal>的同级别下新建一个div来让它挂载。
解决方法：
通过阅读AntDesign的官方文档得知有弹出层的组件都有一个名为 getPopupContainer 的属性即浮层渲染父节点，默认是渲染到 body 上Tooltip、Popconfirm、Popover 、Select等组件都有该属性。
<div class="action-columns" ref="root"> <a-popover v-model="visible" placement="bottomRight" trigger="click" :get-popup-container="() => $refs.root"> <div slot="title"> <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange" class="check-all" />列展示 <a-button @click="resetColumns" style="float: right" type="link" size="small">重置</a-button> </div>
像Modal和Notification组件虽然没有 getPopupContainer 属性，但有一个 getContainer 属性可以用于配置渲染节点的输出位置，我们只需要将这个属性指定到我们全屏的Div上即可。首先声明一个函数用于绑定全屏元素：
const getContainer = () => {
return document.getElementById("fullscreen")
}然后在Modal组件里注入属性：
// 使用id定位全屏元素
<advance-table id="fullscreen" :columns="columns" :data-source="dataSource" ... />
// 调用对话框
<xm-modal ref="handleElasticGroupRef" :config="elasticGroupConfig" ... />
elasticGroupConfig: {
title: '新建弹性组',
width: '880px',
hideFooter: true,
getContainer: getContainer,
onOpen: () => {
if (this.elasticGroupModel.id === 0) {
this.elasticGroupConfig.title = '新建弹性组'
} else (this.elasticGroupModel.id === 1) {
this.elasticGroupConfig.title = "编辑弹性组"
}
},
onClose: () => {
this.formReset()
},
},
// 封装的Modal对话框组件
<template>
<div>
<a-modal
:zIndex="config.zIndex || 1001"
:width="config.width || 520"
:title="config.title"
:visible="visible"
:confirm-loading="confirmLoading"
:getContainer="config.getContainer"
@ok="handleOk"
@cancel="close"
class="xm-modal"
:footer="config.hideFooter ? null : undefined"
>
......
</template>
<script>
export default {
props: {
config: {
type: Object,
required: true,
},
},
......这样表格全屏时，弹窗也可以正常显示出来了。
参考：
