canrd-outside / order-erp-front · Commits

Commit dce3fb0f20516aaf4817281f5d08109e53a73ecb

Authored by 无木
1 parent a5a9b3fb

fix(table): fix tableSettings popup in fullscreen mode 

修复全屏模式下的表格设置组件的弹出层配置
Inline Side-by-side
Showing 2 changed files with 36 additions and 11 deletions
src/components/Table/src/components/settings/ColumnSetting.vue
  View file @dce3fb0
... ... @@ -8,6 +8,7 @@
8 8 trigger="click"
9 9 @visibleChange="handleVisibleChange"
10 10 :overlayClassName="`${prefixCls}__cloumn-list`"
  11 + :getPopupContainer="getPopupContainer"
11 12 >
12 13 <template #title>
13 14 <div :class="`${prefixCls}__popover-title`">
... ... @@ -47,7 +48,11 @@
47 48 {{ item.label }}
48 49 </Checkbox>
49 50  
50   - <Tooltip placement="bottomLeft" :mouseLeaveDelay="0.4">
  51 + <Tooltip
  52 + placement="bottomLeft"
  53 + :mouseLeaveDelay="0.4"
  54 + :getPopupContainer="getPopupContainer"
  55 + >
51 56 <template #title>
52 57 {{ t('component.table.settingFixedLeft') }}
53 58 </template>
... ... @@ -64,7 +69,11 @@
64 69 />
65 70 </Tooltip>
66 71 <Divider type="vertical" />
67   - <Tooltip placement="bottomLeft" :mouseLeaveDelay="0.4">
  72 + <Tooltip
  73 + placement="bottomLeft"
  74 + :mouseLeaveDelay="0.4"
  75 + :getPopupContainer="getPopupContainer"
  76 + >
68 77 <template #title>
69 78 {{ t('component.table.settingFixedRight') }}
70 79 </template>
... ... @@ -109,8 +118,8 @@
109 118 import { useTableContext } from '../../hooks/useTableContext';
110 119 import { useDesign } from '/@/hooks/web/useDesign';
111 120 import { useSortable } from '/@/hooks/web/useSortable';
112   - import { isNullAndUnDef } from '/@/utils/is';
113   - import { getPopupContainer } from '/@/utils';
  121 + import { isFunction, isNullAndUnDef } from '/@/utils/is';
  122 + import { getPopupContainer as getParentContainer } from '/@/utils';
114 123 import { omit } from 'lodash-es';
115 124  
116 125 interface State {
... ... @@ -140,7 +149,7 @@
140 149 },
141 150 emits: ['columns-change'],
142 151  
143   - setup(_, { emit }) {
  152 + setup(_, { emit, attrs }) {
144 153 const { t } = useI18n();
145 154 const table = useTableContext();
146 155  
... ... @@ -350,6 +359,12 @@
350 359 emit('columns-change', data);
351 360 }
352 361  
  362 + function getPopupContainer() {
  363 + return isFunction(attrs.getPopupContainer)
  364 + ? attrs.getPopupContainer()
  365 + : getParentContainer();
  366 + }
  367 +
353 368 return {
354 369 t,
355 370 ...toRefs(state),
... ...
src/components/Table/src/components/settings/index.vue
  View file @dce3fb0
1 1 <template>
2 2 <div class="table-settings">
3   - <RedoSetting v-if="getSetting.redo" />
4   - <SizeSetting v-if="getSetting.size" />
5   - <ColumnSetting v-if="getSetting.setting" @columns-change="handleColumnChange" />
6   - <FullScreenSetting v-if="getSetting.fullScreen" />
  3 + <RedoSetting v-if="getSetting.redo" :getPopupContainer="getTableContainer" />
  4 + <SizeSetting v-if="getSetting.size" :getPopupContainer="getTableContainer" />
  5 + <ColumnSetting
  6 + v-if="getSetting.setting"
  7 + @columns-change="handleColumnChange"
  8 + :getPopupContainer="getTableContainer"
  9 + />
  10 + <FullScreenSetting v-if="getSetting.fullScreen" :getPopupContainer="getTableContainer" />
7 11 </div>
8 12 </template>
9 13 <script lang="ts">
10 14 import type { PropType } from 'vue';
11 15 import type { TableSetting, ColumnChangeParam } from '../../types/table';
12   - import { defineComponent, computed } from 'vue';
  16 + import { defineComponent, computed, unref } from 'vue';
13 17 import ColumnSetting from './ColumnSetting.vue';
14 18 import SizeSetting from './SizeSetting.vue';
15 19 import RedoSetting from './RedoSetting.vue';
16 20 import FullScreenSetting from './FullScreenSetting.vue';
17 21 import { useI18n } from '/@/hooks/web/useI18n';
  22 + import { useTableContext } from '../../hooks/useTableContext';
18 23  
19 24 export default defineComponent({
20 25 name: 'TableSetting',
... ... @@ -33,6 +38,7 @@
33 38 emits: ['columns-change'],
34 39 setup(props, { emit }) {
35 40 const { t } = useI18n();
  41 + const table = useTableContext();
36 42  
37 43 const getSetting = computed((): TableSetting => {
38 44 return {
... ... @@ -48,7 +54,11 @@
48 54 emit('columns-change', data);
49 55 }
50 56  
51   - return { getSetting, t, handleColumnChange };
  57 + function getTableContainer() {
  58 + return table ? unref(table.wrapRef) : document.body;
  59 + }
  60 +
  61 + return { getSetting, t, handleColumnChange, getTableContainer };
52 62 },
53 63 });
54 64 </script>
... ...