fix: delete Popconfirm being obscured by fixed columns #6118
+19
−7
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
LooseLi
requested review from
anncwb,
vince292007,
mynetfan and
jinmao88
as code owners
|
## Walkthrough
The change updates the `getPopupContainer` method in the VXE table's `CellOperation` renderer to always return `document.body` as the popup container for the `Popconfirm` component. This adjustment addresses issues where the popup could be obscured by fixed columns. Additionally, pointer events on the `.vxe-table--viewport-wrapper` element are disabled while the popup is open to prevent scrolling and ensure the popup remains visible. No other logic or exported entity signatures were modified.
## Changes
| File(s) | Change Summary |
|--------------------------------------------|-----------------------------------------------------------------------------------------------------------------|
| playground/src/adapter/vxe-table.ts | Refactored `getPopupContainer` in `CellOperation` renderer to always return `document.body`; disabled pointer events on `.vxe-table--viewport-wrapper` while popconfirm is open to prevent scrolling and popup clipping. |
## Sequence Diagram(s)
```mermaid
sequenceDiagram
participant User
participant Table
participant Popconfirm
participant ViewportWrapper
User->>Table: Trigger CellOperation (e.g., delete)
Table->>Popconfirm: Render with getPopupContainer returning document.body
Popconfirm->>document.body: Attach popup to body
Popconfirm->>ViewportWrapper: Disable pointer-events on open
User->>ViewportWrapper: Attempt to scroll (blocked)
Popconfirm->>ViewportWrapper: Enable pointer-events on closeAssessment against linked issues
Suggested reviewers
Poem
|
|
在antd这样会造成滚动不跟随 且antd默认就是挂载在body
|
mynetfan
requested changes
May 6, 2025
|
你们说得对，我确实没有考虑到弹窗跟随表格滚动的情况。现在看起来问题比预期的要复杂。 |
我暂时也没找到既能解决遮挡又能让弹窗跟随表格滚动的兼容方案，目前这个确实是个不错的折中思路，学习了！ |
mynetfan
added a commit
that referenced
this pull request
May 19, 2025
* fix: delete Popconfirm being obscured by fixed columns * fix: opened popConfirm will prevent the table from scrolling --------- Co-authored-by: Netfan <[email protected]>
baohaojie123
added a commit
to baohaojie123/vue-vben-admin
that referenced
this pull request
Jun 4, 2025
* 'main' of https://github.com/baohaojie123/vue-vben-admin: fix: missing argument for getPopupContainer fix: delete Popconfirm being obscured by fixed columns (vbenjs#6118) chore: release v5.5.6 fix: handle undefined children in generate-menus (vbenjs#6117) fix: when keepAlive is enabled, returning directly through browser buttons/gestures will not close pop ups (vbenjs#6113) # Conflicts: # apps/web-antd/package.json # apps/web-naive/package.json
baohaojie123
added a commit
to baohaojie123/vue-vben-admin
that referenced
this pull request
Jun 4, 2025
* 'main' of https://github.com/baohaojie123/vue-vben-admin: fix: missing argument for getPopupContainer fix: delete Popconfirm being obscured by fixed columns (vbenjs#6118) chore: release v5.5.6 fix: handle undefined children in generate-menus (vbenjs#6117) fix: when keepAlive is enabled, returning directly through browser buttons/gestures will not close pop ups (vbenjs#6113)
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Fixes #6114
在角色管理页面中，当用户点击删除按钮时，删除确认框（Popconfirm）会被表格右侧的固定列遮挡，导致用户无法正常操作确认框。这个问题在平板和移动设备上尤为明显，因为屏幕宽度有限，表格的操作列会通过绝对定位固定在右侧。
通过代码分析，发现问题的根本原因是：
解决方案
修改了 vxe-table.ts 文件中的 renderConfirm 函数，将 Popconfirm 组件的定位容器从表格内部的 tbody 元素改为 document.body。这样修改后，删除确认框不再受表格内部层叠上下文的限制，因此不会被固定列遮挡。
Type of change
Please delete options that are not relevant.
pnpm-lock.yamlunless you introduce a new test example.Checklist
pnpm run docs:devcommand.pnpm test.feat:,fix:,perf:,docs:, orchore:.Summary by CodeRabbit