Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev

playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/playground",
-  "version": "5.5.5",
+  "version": "5.5.6",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

playground/src/adapter/vxe-table.ts

@@ -208,22 +208,34 @@ setupVbenVxeTable({
         }
 
         function renderConfirm(opt: Recordable<any>) {
+          let viewportWrapper: HTMLElement | null = null;
           return h(
             Popconfirm,
             {
+              /**
+               * 当popconfirm用在固定列中时，将固定列作为弹窗的容器时可能会因为固定列较窄而无法容纳弹窗
+               * 将表格主体区域作为弹窗容器时又会因为固定列的层级较高而遮挡弹窗
+               * 将body或者表格视口区域作为弹窗容器时又会导致弹窗无法跟随表格滚动。
+               * 鉴于以上各种情况，一种折中的解决方案是弹出层展示时，禁止操作表格的滚动条。
+               * 这样既解决了弹窗的遮挡问题，又不至于让弹窗随着表格的滚动而跑出视口区域。
+               */
               getPopupContainer(el) {
-                return (
-                  el
-                    .closest('.vxe-table--viewport-wrapper')
-                    ?.querySelector('.vxe-table--main-wrapper')
-                    ?.querySelector('tbody') || document.body
-                );
+                viewportWrapper = el.closest('.vxe-table--viewport-wrapper');
+                return document.body;
               },
               placement: 'topLeft',
               title: $t('ui.actionTitle.delete', [attrs?.nameTitle || '']),
               ...props,
               ...opt,
               icon: undefined,
+              onOpenChange: (open: boolean) => {
+                // 当弹窗打开时，禁止表格的滚动
+                if (open) {
+                  viewportWrapper?.style.setProperty('pointer-events', 'none');
+                } else {
+                  viewportWrapper?.style.removeProperty('pointer-events');
+                }
+              },
               onConfirm: () => {
                 attrs?.onClick?.({
                   code: opt.code,