fix(table): fix tableSettings popup in fullscreen mode

修复全屏模式下的表格设置组件的弹出层配置
vbenjs · Jul 24, 2021 · dce3fb0 · dce3fb0
1 parent a5a9b3f
commit dce3fb0
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 11 deletions.
diff --git a/src/components/Table/src/components/settings/ColumnSetting.vue b/src/components/Table/src/components/settings/ColumnSetting.vue
@@ -8,6 +8,7 @@
       trigger="click"
       @visibleChange="handleVisibleChange"
       :overlayClassName="`${prefixCls}__cloumn-list`"
+      :getPopupContainer="getPopupContainer"
     >
       <template #title>
         <div :class="`${prefixCls}__popover-title`">
@@ -47,7 +48,11 @@
                   {{ item.label }}
                 </Checkbox>
 
-                <Tooltip placement="bottomLeft" :mouseLeaveDelay="0.4">
+                <Tooltip
+                  placement="bottomLeft"
+                  :mouseLeaveDelay="0.4"
+                  :getPopupContainer="getPopupContainer"
+                >
                   <template #title>
                     {{ t('component.table.settingFixedLeft') }}
                   </template>
@@ -64,7 +69,11 @@
                   />
                 </Tooltip>
                 <Divider type="vertical" />
-                <Tooltip placement="bottomLeft" :mouseLeaveDelay="0.4">
+                <Tooltip
+                  placement="bottomLeft"
+                  :mouseLeaveDelay="0.4"
+                  :getPopupContainer="getPopupContainer"
+                >
                   <template #title>
                     {{ t('component.table.settingFixedRight') }}
                   </template>
@@ -109,8 +118,8 @@
   import { useTableContext } from '../../hooks/useTableContext';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useSortable } from '/@/hooks/web/useSortable';
-  import { isNullAndUnDef } from '/@/utils/is';
-  import { getPopupContainer } from '/@/utils';
+  import { isFunction, isNullAndUnDef } from '/@/utils/is';
+  import { getPopupContainer as getParentContainer } from '/@/utils';
   import { omit } from 'lodash-es';
 
   interface State {
@@ -140,7 +149,7 @@
     },
     emits: ['columns-change'],
 
-    setup(_, { emit }) {
+    setup(_, { emit, attrs }) {
       const { t } = useI18n();
       const table = useTableContext();
 
@@ -350,6 +359,12 @@
         emit('columns-change', data);
       }
 
+      function getPopupContainer() {
+        return isFunction(attrs.getPopupContainer)
+          ? attrs.getPopupContainer()
+          : getParentContainer();
+      }
+
       return {
         t,
         ...toRefs(state),

diff --git a/src/components/Table/src/components/settings/index.vue b/src/components/Table/src/components/settings/index.vue
@@ -1,20 +1,25 @@
 <template>
   <div class="table-settings">
-    <RedoSetting v-if="getSetting.redo" />
-    <SizeSetting v-if="getSetting.size" />
-    <ColumnSetting v-if="getSetting.setting" @columns-change="handleColumnChange" />
-    <FullScreenSetting v-if="getSetting.fullScreen" />
+    <RedoSetting v-if="getSetting.redo" :getPopupContainer="getTableContainer" />
+    <SizeSetting v-if="getSetting.size" :getPopupContainer="getTableContainer" />
+    <ColumnSetting
+      v-if="getSetting.setting"
+      @columns-change="handleColumnChange"
+      :getPopupContainer="getTableContainer"
+    />
+    <FullScreenSetting v-if="getSetting.fullScreen" :getPopupContainer="getTableContainer" />
   </div>
 </template>
 <script lang="ts">
   import type { PropType } from 'vue';
   import type { TableSetting, ColumnChangeParam } from '../../types/table';
-  import { defineComponent, computed } from 'vue';
+  import { defineComponent, computed, unref } from 'vue';
   import ColumnSetting from './ColumnSetting.vue';
   import SizeSetting from './SizeSetting.vue';
   import RedoSetting from './RedoSetting.vue';
   import FullScreenSetting from './FullScreenSetting.vue';
   import { useI18n } from '/@/hooks/web/useI18n';
+  import { useTableContext } from '../../hooks/useTableContext';
 
   export default defineComponent({
     name: 'TableSetting',
@@ -33,6 +38,7 @@
     emits: ['columns-change'],
     setup(props, { emit }) {
       const { t } = useI18n();
+      const table = useTableContext();
 
       const getSetting = computed((): TableSetting => {
         return {
@@ -48,7 +54,11 @@
         emit('columns-change', data);
       }
 
-      return { getSetting, t, handleColumnChange };
+      function getTableContainer() {
+        return table ? unref(table.wrapRef) : document.body;
+      }
+
+      return { getSetting, t, handleColumnChange, getTableContainer };
     },
   });
 </script>