refactor: getVxePopupContainer

packages/utils/src/helpers/get-popup-container.ts

@@ -12,27 +12,18 @@ export function getPopupContainer(node?: HTMLElement): HTMLElement {
 /**
  * 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 = '.vxe-table--row-expanded-wrapper';
-  if (id) {
-    selector = `div#${id} ${selector}`;
-  }
-  // 挂载到vxe-table的滚动区域
-  const vxeTableContainerNode = document.querySelector(selector);
-  if (!vxeTableContainerNode) {
-    console.warn('无法找到vxe-table元素, 将会挂载到body.');
+export function getVxePopupContainer(_node?: HTMLElement): HTMLElement {
+  /**
+   * 需要区分是否为固定列情况 如果为固定列返回parent会导致展开宽度不正常
+   * 如果是固定列的情况直接返回body 但是这样不会跟随滚动(个人认为这属于极限场景)
+   * 如果有更好的办法解决 请告知
+   */
+  if (_node?.closest('td.fixed--width')) {
     return document.body;
   }
-  return vxeTableContainerNode as HTMLElement;
+  // 返回parent元素
+  return _node?.parentElement ?? document.body;
 }