From 9f33320bead181f5a379a4147a8fd8bb18120fe0 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Sat, 2 Nov 2024 15:08:18 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=9C=A8VxeTable=E5=9B=BA=E5=AE=9A?=
 =?UTF-8?q?=E5=88=97=E6=97=B6,=20getPopupContainer=E4=BC=9A=E5=AF=BC?=
 =?UTF-8?q?=E8=87=B4=E5=AE=BD=E5=BA=A6=E4=B8=8D=E5=A4=9F,=20=E5=BC=B9?=
 =?UTF-8?q?=E5=87=BA=E5=B1=82=E6=A0=B7=E5=BC=8F=E5=BC=82=E5=B8=B8=20?=
 =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=8A=9E=E6=B3=95(=E5=B0=86=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E5=85=83=E7=B4=A0=E6=8C=82=E8=BD=BD=E5=88=B0VXe?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E5=AE=B9=E5=99=A8=E4=B8=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  6 ++++
 apps/web-antd/package.json                    |  2 +-
 .../src/views/monitor/logininfor/index.vue    |  4 +--
 .../src/views/monitor/online/index.vue        |  4 +--
 .../src/views/system/client/index.vue         |  4 +--
 .../src/views/system/config/index.vue         |  4 +--
 apps/web-antd/src/views/system/dept/index.vue |  4 +--
 .../src/views/system/dict/data/index.vue      |  8 ++++--
 .../src/views/system/dict/type/index.vue      |  8 ++++--
 apps/web-antd/src/views/system/menu/index.vue |  4 +--
 .../src/views/system/notice/index.vue         |  4 +--
 .../src/views/system/oss-config/index.vue     |  4 +--
 apps/web-antd/src/views/system/oss/index.vue  |  4 +--
 apps/web-antd/src/views/system/post/index.vue |  4 +--
 .../src/views/system/role-assign/index.vue    |  4 +--
 apps/web-antd/src/views/system/role/index.vue |  6 ++--
 .../src/views/system/tenant/index.vue         |  6 ++--
 .../src/views/system/tenantPackage/index.vue  |  4 +--
 apps/web-antd/src/views/system/user/index.vue |  6 ++--
 apps/web-antd/src/views/tool/gen/index.vue    |  3 ++
 .../src/views/workflow/category/index.vue     |  4 +--
 .../utils/src/helpers/get-popup-container.ts  | 28 +++++++++++++++++++
 22 files changed, 83 insertions(+), 42 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 04092531..026090c9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 1.0.1
+
+**BUG FIXES**
+
+- 在VxeTable固定列时, getPopupContainer会导致宽度不够, 弹出层样式异常 解决办法(将弹窗元素挂载到VXe滚动容器上)
+
 # 1.0.0
 
 **FEATURES**
diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index 9878aa87..4bfd05f8 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-antd",
-  "version": "1.0.0-beta",
+  "version": "1.0.0",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/web-antd/src/views/monitor/logininfor/index.vue b/apps/web-antd/src/views/monitor/logininfor/index.vue
index 4583a5af..78201b10 100644
--- a/apps/web-antd/src/views/monitor/logininfor/index.vue
+++ b/apps/web-antd/src/views/monitor/logininfor/index.vue
@@ -4,7 +4,7 @@ import type { Recordable } from '@vben/types';
 import { ref } from 'vue';
 
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
-import { getPopupContainer } from '@vben/utils';
+import { getVxePopupContainer } from '@vben/utils';
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
 import dayjs from 'dayjs';
@@ -199,7 +199,7 @@ async function handleUnlock() {
             {{ $t('pages.common.info') }}
           </ghost-button>
           <Popconfirm
-            :get-popup-container="getPopupContainer"
+            :get-popup-container="getVxePopupContainer"
             placement="left"
             title="确认删除?"
             @confirm="() => handleDelete(row)"
diff --git a/apps/web-antd/src/views/monitor/online/index.vue b/apps/web-antd/src/views/monitor/online/index.vue
index e9b4d635..43d9c328 100644
--- a/apps/web-antd/src/views/monitor/online/index.vue
+++ b/apps/web-antd/src/views/monitor/online/index.vue
@@ -2,7 +2,7 @@
 import type { Recordable } from '@vben/types';
 
 import { Page, type VbenFormProps } from '@vben/common-ui';
-import { getPopupContainer } from '@vben/utils';
+import { getVxePopupContainer } from '@vben/utils';
 
 import { Popconfirm } from 'ant-design-vue';
 
@@ -58,7 +58,7 @@ async function handleForceOffline(row: Recordable<any>) {
     <BasicTable table-title="在线用户列表">
       <template #action="{ row }">
         <Popconfirm
-          :get-popup-container="getPopupContainer"
+          :get-popup-container="getVxePopupContainer"
           :title="`确认强制下线[${row.userName}]?`"
           placement="left"
           @confirm="handleForceOffline(row)"
diff --git a/apps/web-antd/src/views/system/client/index.vue b/apps/web-antd/src/views/system/client/index.vue
index 8ff96d42..2c76523b 100644
--- a/apps/web-antd/src/views/system/client/index.vue
+++ b/apps/web-antd/src/views/system/client/index.vue
@@ -5,7 +5,7 @@ import { ref } from 'vue';
 
 import { useAccess } from '@vben/access';
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
-import { getPopupContainer } from '@vben/utils';
+import { getVxePopupContainer } from '@vben/utils';
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
 
@@ -172,7 +172,7 @@ const { hasAccessByCodes } = useAccess();
           </ghost-button>
           <Popconfirm
             :disabled="row.id === 1"
-            :get-popup-container="getPopupContainer"
+            :get-popup-container="getVxePopupContainer"
             placement="left"
             title="确认删除？"
             @confirm="handleDelete(row)"
diff --git a/apps/web-antd/src/views/system/config/index.vue b/apps/web-antd/src/views/system/config/index.vue
index 1acf9dc9..c752dd67 100644
--- a/apps/web-antd/src/views/system/config/index.vue
+++ b/apps/web-antd/src/views/system/config/index.vue
@@ -4,7 +4,7 @@ import type { Recordable } from '@vben/types';
 import { ref } from 'vue';
 
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
-import { getPopupContainer } from '@vben/utils';
+import { getVxePopupContainer } from '@vben/utils';
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
 import dayjs from 'dayjs';
@@ -174,7 +174,7 @@ async function handleRefreshCache() {
             {{ $t('pages.common.edit') }}
           </ghost-button>
           <Popconfirm
-            :get-popup-container="getPopupContainer"
+            :get-popup-container="getVxePopupContainer"
             placement="left"
             title="确认删除？"
             @confirm="handleDelete(row)"
diff --git a/apps/web-antd/src/views/system/dept/index.vue b/apps/web-antd/src/views/system/dept/index.vue
index 94aa5ac9..afd663de 100644
--- a/apps/web-antd/src/views/system/dept/index.vue
+++ b/apps/web-antd/src/views/system/dept/index.vue
@@ -6,7 +6,7 @@ import { nextTick } from 'vue';
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
 import {
   eachTree,
-  getPopupContainer,
+  getVxePopupContainer,
   listToTree,
   removeEmptyChildren,
 } from '@vben/utils';
@@ -166,7 +166,7 @@ function setExpandOrCollapse(expand: boolean) {
             {{ $t('pages.common.add') }}
           </ghost-button>
           <Popconfirm
-            :get-popup-container="getPopupContainer"
+            :get-popup-container="getVxePopupContainer"
             placement="left"
             title="确认删除？"
             @confirm="handleDelete(row)"
diff --git a/apps/web-antd/src/views/system/dict/data/index.vue b/apps/web-antd/src/views/system/dict/data/index.vue
index e2d0c48e..4306fa29 100644
--- a/apps/web-antd/src/views/system/dict/data/index.vue
+++ b/apps/web-antd/src/views/system/dict/data/index.vue
@@ -4,7 +4,7 @@ import type { Recordable } from '@vben/types';
 import { ref } from 'vue';
 
 import { useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
-import { getPopupContainer } from '@vben/utils';
+import { getVxePopupContainer } from '@vben/utils';
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
 import dayjs from 'dayjs';
@@ -144,7 +144,7 @@ emitter.on('rowClick', async (value) => {
 
 <template>
   <div>
-    <BasicTable table-title="字典数据列表">
+    <BasicTable id="dict-data" table-title="字典数据列表">
       <template #toolbar-tools>
         <Space>
           <a-button
@@ -187,7 +187,9 @@ emitter.on('rowClick', async (value) => {
             {{ $t('pages.common.edit') }}
           </ghost-button>
           <Popconfirm
-            :get-popup-container="getPopupContainer"
+            :get-popup-container="
+              (node) => getVxePopupContainer(node, 'dict-data')
+            "
             placement="left"
             title="确认删除？"
             @confirm="handleDelete(row)"
diff --git a/apps/web-antd/src/views/system/dict/type/index.vue b/apps/web-antd/src/views/system/dict/type/index.vue
index 9568771d..c624bc9a 100644
--- a/apps/web-antd/src/views/system/dict/type/index.vue
+++ b/apps/web-antd/src/views/system/dict/type/index.vue
@@ -5,7 +5,7 @@ import { computed, ref } from 'vue';
 
 import { useAccess } from '@vben/access';
 import { useVbenModal, type VbenFormProps } from '@vben/common-ui';
-import { getPopupContainer } from '@vben/utils';
+import { getVxePopupContainer } from '@vben/utils';
 
 import {
   Dropdown,
@@ -188,7 +188,7 @@ const couldSyncTenantDict = computed(() => {
 
 <template>
   <div>
-    <BasicTable table-title="字典类型列表">
+    <BasicTable id="dict-type" table-title="字典类型列表">
       <template #toolbar-tools>
         <Space>
           <Dropdown>
@@ -243,7 +243,9 @@ const couldSyncTenantDict = computed(() => {
             {{ $t('pages.common.edit') }}
           </ghost-button>
           <Popconfirm
-            :get-popup-container="getPopupContainer"
+            :get-popup-container="
+              (node) => getVxePopupContainer(node, 'dict-type')
+            "
             placement="left"
             title="确认删除？"
             @confirm="handleDelete(row)"
diff --git a/apps/web-antd/src/views/system/menu/index.vue b/apps/web-antd/src/views/system/menu/index.vue
index 0204f50c..b045b693 100644
--- a/apps/web-antd/src/views/system/menu/index.vue
+++ b/apps/web-antd/src/views/system/menu/index.vue
@@ -8,7 +8,7 @@ import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
 import { Fallback } from '@vben/common-ui';
 import {
   eachTree,
-  getPopupContainer,
+  getVxePopupContainer,
   listToTree,
   removeEmptyChildren,
 } from '@vben/utils';
@@ -174,7 +174,7 @@ const isAdmin = computed(() => {
             {{ $t('pages.common.add') }}
           </ghost-button>
           <Popconfirm
-            :get-popup-container="getPopupContainer"
+            :get-popup-container="getVxePopupContainer"
             placement="left"
             title="确认删除？"
             @confirm="handleDelete(row)"
diff --git a/apps/web-antd/src/views/system/notice/index.vue b/apps/web-antd/src/views/system/notice/index.vue
index 348e94a8..f431873b 100644
--- a/apps/web-antd/src/views/system/notice/index.vue
+++ b/apps/web-antd/src/views/system/notice/index.vue
@@ -4,7 +4,7 @@ import type { Recordable } from '@vben/types';
 import { ref } from 'vue';
 
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
-import { getPopupContainer } from '@vben/utils';
+import { getVxePopupContainer } from '@vben/utils';
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
 import dayjs from 'dayjs';
@@ -153,7 +153,7 @@ function handleMultiDelete() {
             {{ $t('pages.common.edit') }}
           </ghost-button>
           <Popconfirm
-            :get-popup-container="getPopupContainer"
+            :get-popup-container="getVxePopupContainer"
             placement="left"
             title="确认删除？"
             @confirm="handleDelete(row)"
diff --git a/apps/web-antd/src/views/system/oss-config/index.vue b/apps/web-antd/src/views/system/oss-config/index.vue
index f758d717..0b07868d 100644
--- a/apps/web-antd/src/views/system/oss-config/index.vue
+++ b/apps/web-antd/src/views/system/oss-config/index.vue
@@ -5,7 +5,7 @@ import { ref } from 'vue';
 
 import { useAccess } from '@vben/access';
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
-import { getPopupContainer } from '@vben/utils';
+import { getVxePopupContainer } from '@vben/utils';
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
 import dayjs from 'dayjs';
@@ -169,7 +169,7 @@ const { hasAccessByCodes } = useAccess();
             {{ $t('pages.common.edit') }}
           </ghost-button>
           <Popconfirm
-            :get-popup-container="getPopupContainer"
+            :get-popup-container="getVxePopupContainer"
             placement="left"
             title="确认删除？"
             @confirm="handleDelete(row)"
diff --git a/apps/web-antd/src/views/system/oss/index.vue b/apps/web-antd/src/views/system/oss/index.vue
index 1d0931e4..b7b4f9e6 100644
--- a/apps/web-antd/src/views/system/oss/index.vue
+++ b/apps/web-antd/src/views/system/oss/index.vue
@@ -6,7 +6,7 @@ import { useRouter } from 'vue-router';
 
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
 import { $t } from '@vben/locales';
-import { getPopupContainer } from '@vben/utils';
+import { getVxePopupContainer } from '@vben/utils';
 
 import {
   Image,
@@ -219,7 +219,7 @@ const [FileUploadModal, fileUploadApi] = useVbenModal({
             {{ $t('pages.common.download') }}
           </ghost-button>
           <Popconfirm
-            :get-popup-container="getPopupContainer"
+            :get-popup-container="getVxePopupContainer"
             placement="left"
             title="确认删除？"
             @confirm="handleDelete(row)"
diff --git a/apps/web-antd/src/views/system/post/index.vue b/apps/web-antd/src/views/system/post/index.vue
index 807c0323..9daa9208 100644
--- a/apps/web-antd/src/views/system/post/index.vue
+++ b/apps/web-antd/src/views/system/post/index.vue
@@ -4,7 +4,7 @@ import type { Recordable } from '@vben/types';
 import { ref } from 'vue';
 
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
-import { getPopupContainer } from '@vben/utils';
+import { getVxePopupContainer } from '@vben/utils';
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
 import dayjs from 'dayjs';
@@ -187,7 +187,7 @@ function handleMultiDelete() {
             {{ $t('pages.common.edit') }}
           </GhostButton>
           <Popconfirm
-            :get-popup-container="getPopupContainer"
+            :get-popup-container="getVxePopupContainer"
             placement="left"
             title="确认删除？"
             @confirm="handleDelete(row)"
diff --git a/apps/web-antd/src/views/system/role-assign/index.vue b/apps/web-antd/src/views/system/role-assign/index.vue
index fcf284a2..8ba1fcfe 100644
--- a/apps/web-antd/src/views/system/role-assign/index.vue
+++ b/apps/web-antd/src/views/system/role-assign/index.vue
@@ -5,7 +5,7 @@ import { nextTick, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
-import { getPopupContainer } from '@vben/utils';
+import { getVxePopupContainer } from '@vben/utils';
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
 
@@ -157,7 +157,7 @@ function handleMultipleAuthCancel() {
       </template>
       <template #action="{ row }">
         <Popconfirm
-          :get-popup-container="getPopupContainer"
+          :get-popup-container="getVxePopupContainer"
           :title="`是否取消授权用户[${row.userName} - ${row.nickName}]?`"
           placement="left"
           @confirm="handleAuthCancel(row)"
diff --git a/apps/web-antd/src/views/system/role/index.vue b/apps/web-antd/src/views/system/role/index.vue
index 9a414d11..f0074894 100644
--- a/apps/web-antd/src/views/system/role/index.vue
+++ b/apps/web-antd/src/views/system/role/index.vue
@@ -11,7 +11,7 @@ import {
   useVbenModal,
   type VbenFormProps,
 } from '@vben/common-ui';
-import { getPopupContainer } from '@vben/utils';
+import { getVxePopupContainer } from '@vben/utils';
 
 import {
   Dropdown,
@@ -222,7 +222,7 @@ function handleAssignRole(record: Recordable<any>) {
               {{ $t('pages.common.edit') }}
             </ghost-button>
             <Popconfirm
-              :get-popup-container="getPopupContainer"
+              :get-popup-container="getVxePopupContainer"
               placement="left"
               title="确认删除？"
               @confirm="handleDelete(row)"
@@ -237,7 +237,7 @@ function handleAssignRole(record: Recordable<any>) {
             </Popconfirm>
           </Space>
           <Dropdown
-            :get-popup-container="getPopupContainer"
+            :get-popup-container="getVxePopupContainer"
             placement="bottomRight"
           >
             <template #overlay>
diff --git a/apps/web-antd/src/views/system/tenant/index.vue b/apps/web-antd/src/views/system/tenant/index.vue
index 46c1dabc..9191dcfd 100644
--- a/apps/web-antd/src/views/system/tenant/index.vue
+++ b/apps/web-antd/src/views/system/tenant/index.vue
@@ -6,7 +6,7 @@ import { computed, ref } from 'vue';
 import { useAccess } from '@vben/access';
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
 import { Fallback } from '@vben/common-ui';
-import { getPopupContainer } from '@vben/utils';
+import { getVxePopupContainer } from '@vben/utils';
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
 import dayjs from 'dayjs';
@@ -205,7 +205,7 @@ const isSuperAdmin = computed(() => {
             {{ $t('pages.common.edit') }}
           </ghost-button>
           <Popconfirm
-            :get-popup-container="getPopupContainer"
+            :get-popup-container="getVxePopupContainer"
             :title="`确认同步[${row.companyName}]的套餐吗?`"
             placement="left"
             @confirm="handleSync(row)"
@@ -218,7 +218,7 @@ const isSuperAdmin = computed(() => {
             </ghost-button>
           </Popconfirm>
           <Popconfirm
-            :get-popup-container="getPopupContainer"
+            :get-popup-container="getVxePopupContainer"
             placement="left"
             title="确认删除？"
             @confirm="handleDelete(row)"
diff --git a/apps/web-antd/src/views/system/tenantPackage/index.vue b/apps/web-antd/src/views/system/tenantPackage/index.vue
index c67817a7..63174316 100644
--- a/apps/web-antd/src/views/system/tenantPackage/index.vue
+++ b/apps/web-antd/src/views/system/tenantPackage/index.vue
@@ -6,7 +6,7 @@ import { computed, ref } from 'vue';
 import { useAccess } from '@vben/access';
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
 import { Fallback } from '@vben/common-ui';
-import { getPopupContainer } from '@vben/utils';
+import { getVxePopupContainer } from '@vben/utils';
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
 import dayjs from 'dayjs';
@@ -192,7 +192,7 @@ const isSuperAdmin = computed(() => {
             {{ $t('pages.common.edit') }}
           </ghost-button>
           <Popconfirm
-            :get-popup-container="getPopupContainer"
+            :get-popup-container="getVxePopupContainer"
             placement="left"
             title="确认删除？"
             @confirm="handleDelete(row)"
diff --git a/apps/web-antd/src/views/system/user/index.vue b/apps/web-antd/src/views/system/user/index.vue
index a1691c4f..43d7f800 100644
--- a/apps/web-antd/src/views/system/user/index.vue
+++ b/apps/web-antd/src/views/system/user/index.vue
@@ -12,7 +12,7 @@ import {
 } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 import { preferences } from '@vben/preferences';
-import { getPopupContainer } from '@vben/utils';
+import { getVxePopupContainer } from '@vben/utils';
 
 import {
   Avatar,
@@ -266,7 +266,7 @@ const { hasAccessByCodes } = useAccess();
                 {{ $t('pages.common.edit') }}
               </ghost-button>
               <Popconfirm
-                :get-popup-container="getPopupContainer"
+                :get-popup-container="getVxePopupContainer"
                 placement="left"
                 title="确认删除？"
                 @confirm="handleDelete(row)"
@@ -281,7 +281,7 @@ const { hasAccessByCodes } = useAccess();
               </Popconfirm>
             </Space>
             <Dropdown
-              :get-popup-container="getPopupContainer"
+              :get-popup-container="getVxePopupContainer"
               placement="bottomRight"
             >
               <template #overlay>
diff --git a/apps/web-antd/src/views/tool/gen/index.vue b/apps/web-antd/src/views/tool/gen/index.vue
index 63464069..357e7184 100644
--- a/apps/web-antd/src/views/tool/gen/index.vue
+++ b/apps/web-antd/src/views/tool/gen/index.vue
@@ -5,6 +5,7 @@ import { nextTick, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
 
 import { message, Modal, Popconfirm, Space } from 'ant-design-vue';
 import dayjs from 'dayjs';
@@ -263,6 +264,7 @@ function handleImport() {
           {{ $t('pages.common.edit') }}
         </a-button>
         <Popconfirm
+          :get-popup-container="getVxePopupContainer"
           :title="`确认同步[${row.tableName}]?`"
           placement="left"
           @confirm="handleSync(row)"
@@ -285,6 +287,7 @@ function handleImport() {
           生成代码
         </a-button>
         <Popconfirm
+          :get-popup-container="getVxePopupContainer"
           :title="`确认删除[${row.tableName}]?`"
           placement="left"
           @confirm="handleDelete(row)"
diff --git a/apps/web-antd/src/views/workflow/category/index.vue b/apps/web-antd/src/views/workflow/category/index.vue
index 428ae439..b54ede7d 100644
--- a/apps/web-antd/src/views/workflow/category/index.vue
+++ b/apps/web-antd/src/views/workflow/category/index.vue
@@ -4,7 +4,7 @@ import type { Recordable } from '@vben/types';
 import { nextTick } from 'vue';
 
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
-import { getPopupContainer, listToTree } from '@vben/utils';
+import { getVxePopupContainer, listToTree } from '@vben/utils';
 
 import { Popconfirm, Space } from 'ant-design-vue';
 
@@ -130,7 +130,7 @@ function collapseAll() {
             {{ $t('pages.common.add') }}
           </ghost-button>
           <Popconfirm
-            :get-popup-container="getPopupContainer"
+            :get-popup-container="getVxePopupContainer"
             placement="left"
             title="确认删除？"
             @confirm="handleDelete(row)"
diff --git a/packages/utils/src/helpers/get-popup-container.ts b/packages/utils/src/helpers/get-popup-container.ts
index ca5a72dd..ccd48ecc 100644
--- a/packages/utils/src/helpers/get-popup-container.ts
+++ b/packages/utils/src/helpers/get-popup-container.ts
@@ -4,3 +4,31 @@
 export function getPopupContainer(node?: HTMLElement): HTMLElement {
   return (node?.parentNode as HTMLElement) ?? document.body;
 }
+
+/**
+ * VxeTable专用弹窗层
+ * 解决问题: https://gitee.com/dapppp/ruoyi-plus-vben5/issues/IB1DM3
+ * 单表格用法跟上面getPopupContainer一样
+ * 一个页面(body下)有多个表格元素 必须先指定ID & ID参数传入该函数
+ * <BasicTable id="xxx" />
+ * getVxePopupContainer="(node) => getVxePopupContainer(node, 'xxx')"
+ * @param _node 触发的元素
+ * @param id 表格唯一id 当页面(该窗口)有>=两个表格 必须提供ID
+ * @returns 挂载节点
+ */
+export function getVxePopupContainer(
+  _node?: HTMLElement,
+  id?: string,
+): HTMLElement {
+  let selector = 'div.vxe-table--body-wrapper.body--wrapper';
+  if (id) {
+    selector = `div#${id} ${selector}`;
+  }
+  // 挂载到vxe-table的滚动区域
+  const vxeTableContainerNode = document.querySelector(selector);
+  if (!vxeTableContainerNode) {
+    console.warn('无法找到vxe-table元素, 将会挂载到body.');
+    return document.body;
+  }
+  return vxeTableContainerNode as HTMLElement;
+}