From a07ab6d7aa1060f856649a9bdbec9dfa50b14f26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E6=9C=A8?= <netfan@foxmail.com>
Date: Sat, 24 Jul 2021 14:36:16 +0800
Subject: [PATCH] fix(table): component shown in `fullscreen` mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复表格在全屏模式下编辑组件弹出层的显示问题
---
 CHANGELOG.zh_CN.md                                  |  1 +
 src/components/Table/src/components/TableAction.vue | 13 +++++++------
 .../Table/src/components/editable/EditableCell.vue  |  1 +
 src/views/demo/table/EditRowTable.vue               |  2 ++
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index 6447dc24..e27c5c79 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -4,6 +4,7 @@
 - **BasicTable** 修复可编辑单元格不支持`ellipsis`配置的问题
 - **ImgRotateDragVerify** 修复组件`resume`方法无法调用的问题
 - **TableAction** 修复 stopButtonPropagation 属性某些情况下不起作用的问题
+- **BasicTable** 修复全屏模式下看不到子组件弹出层（popconfirm 以及 select、treeSelect 等编辑组件）的问题
 - **Dark Theme** 黑暗主题下的配色问题修正
   - 修复`Tree`组件被选中节点的背景颜色
   - 修复`Alert`组件的颜色配置
diff --git a/src/components/Table/src/components/TableAction.vue b/src/components/Table/src/components/TableAction.vue
index 50aeb3cd..b2220ce7 100644
--- a/src/components/Table/src/components/TableAction.vue
+++ b/src/components/Table/src/components/TableAction.vue
@@ -35,7 +35,7 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, PropType, computed, toRaw } from 'vue';
+  import { defineComponent, PropType, computed, toRaw, unref } from 'vue';
   import { MoreOutlined } from '@ant-design/icons-vue';
   import { Divider, Tooltip, TooltipProps } from 'ant-design-vue';
   import Icon from '/@/components/Icon/index';
@@ -95,6 +95,7 @@
           .map((action) => {
             const { popConfirm } = action;
             return {
+              getPopupContainer: () => unref(table?.wrapRef.value) ?? document.body,
               type: 'link',
               size: 'small',
               ...action,
@@ -131,11 +132,11 @@
       });
 
       function getTooltip(data: string | TooltipProps): TooltipProps {
-        if (isString(data)) {
-          return { title: data, placement: 'bottom' };
-        } else {
-          return Object.assign({ placement: 'bottom' }, data);
-        }
+        return {
+          getPopupContainer: () => unref(table?.wrapRef.value) ?? document.body,
+          placement: 'bottom',
+          ...(isString(data) ? { title: data } : data),
+        };
       }
 
       function onCellClick(e: MouseEvent) {
diff --git a/src/components/Table/src/components/editable/EditableCell.vue b/src/components/Table/src/components/editable/EditableCell.vue
index c22ae19b..f8f648ea 100644
--- a/src/components/Table/src/components/editable/EditableCell.vue
+++ b/src/components/Table/src/components/editable/EditableCell.vue
@@ -113,6 +113,7 @@
         const value = isCheckValue ? (isNumber(val) && isBoolean(val) ? val : !!val) : val;
 
         return {
+          getPopupContainer: () => unref(table?.wrapRef.value) ?? document.body,
           placeholder: createPlaceholderMessage(unref(getComponent)),
           ...apiSelectProps,
           ...omit(compProps, 'onChange'),
diff --git a/src/views/demo/table/EditRowTable.vue b/src/views/demo/table/EditRowTable.vue
index 6927d8b7..e87e0cc9 100644
--- a/src/views/demo/table/EditRowTable.vue
+++ b/src/views/demo/table/EditRowTable.vue
@@ -171,6 +171,8 @@
         api: demoListApi,
         columns: columns,
         showIndexColumn: false,
+        showTableSetting: true,
+        tableSetting: { fullScreen: true },
         actionColumn: {
           width: 160,
           title: 'Action',
-- 
GitLab