fix(table): component shown in `fullscreen` mode

修复表格在全屏模式下编辑组件弹出层的显示问题

fix(table): component shown in `fullscreen` mode
修复表格在全屏模式下编辑组件弹出层的显示问题
无木
1 parent 9b8f165a
Showing 4 changed files with 11 additions and 6 deletions
CHANGELOG.zh_CN.md
src/components/Table/src/components/TableAction.vue
src/components/Table/src/components/editable/EditableCell.vue
src/views/demo/table/EditRowTable.vue
@@ -4,6 +4,7 @@
 - **BasicTable** 修复可编辑单元格不支持`ellipsis`配置的问题
 - **ImgRotateDragVerify** 修复组件`resume`方法无法调用的问题
 - **TableAction** 修复 stopButtonPropagation 属性某些情况下不起作用的问题
+- **BasicTable** 修复全屏模式下看不到子组件弹出层（popconfirm 以及 select、treeSelect 等编辑组件）的问题
 - **Dark Theme** 黑暗主题下的配色问题修正
   - 修复`Tree`组件被选中节点的背景颜色
   - 修复`Alert`组件的颜色配置
@@ -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) {
@@ -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'),
@@ -171,6 +171,8 @@
         api: demoListApi,
         columns: columns,
         showIndexColumn: false,
+        showTableSetting: true,
+        tableSetting: { fullScreen: true },
         actionColumn: {
           width: 160,
           title: 'Action',