fix(grid): [grid] fix footer bug in visual scroll scene #2839
Conversation
WalkthroughThis pull request focuses on updating the Changes
Suggested reviewers
Poem
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Walkthrough此PR修复了横向虚拟滚动场景下表尾渲染不正常的问题。主要通过同步表头和表尾的滚动位置，并在表尾设置虚拟滚动占位宽度来解决。 Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
| @@ -751,11 +751,12 @@ function renderDefEmpty(h) { | |||
| } | |||
|
|
|||
| const syncHeaderAndFooterScroll = ({ bodyElem, footerElem, headerElem, isX }) => { | |||
There was a problem hiding this comment.
The variable scrollLeft is introduced to store bodyElem.scrollLeft, which is then used to set headerElem.scrollLeft and footerElem.scrollLeft. This change ensures that the scroll position is consistent across header and footer, which is crucial for visual alignment.
|
|
||
| this.$nextTick(this.updateStyle) | ||
| this.$nextTick(() => { | ||
| this.updateFooter() |
There was a problem hiding this comment.
The update to call updateFooter() before updateStyle() ensures that the footer is correctly rendered before any style updates, which is important for maintaining layout integrity.
| @@ -61,6 +62,11 @@ function layoutFooter({ | |||
| let tWidth = tableWidth | |||
| // 如果是固定列与设置了超出隐藏 | |||
| let ret = getTableWidth({ scrollXLoad, tWidth, tableColumn }) | |||
| // 为表尾设置虚拟滚动占位宽度 | |||
| const spaceElem = elemStore['main-footer-x-space'] | |||
There was a problem hiding this comment.
Adding a virtual scroll placeholder width for the footer helps in maintaining the correct layout when horizontal scrolling is involved. This ensures that the footer aligns properly with the table content.
WalkthroughThis PR fixes the problem of abnormal rendering of the end of the table in horizontal virtual scrolling scenarios. This is mainly solved by synchronizing the scrolling positions of the table header and table footer, and setting the virtual scrolling occupancy width at the table footer. Changes
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
examples/sites/demos/pc/app/grid/editor/custom-edit.spec.js (1)
Line range hint
1-9: Consider adding tests for footer functionality.Since this PR fixes a footer bug in the visual scroll scene, it would be beneficial to add test coverage for this specific functionality to prevent regressions.
Would you like me to help generate test cases that verify the footer's behavior during horizontal virtual scrolling?
Consider translating the test name for consistency.
The test name "多行编辑" (multi-line editing) could be translated to English for better maintainability across international teams.
-test('多行编辑', async ({ page }) => { +test('Multi-line editing', async ({ page }) => {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
examples/sites/demos/pc/app/grid/editor/custom-edit.spec.js(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (1)
examples/sites/demos/pc/app/grid/editor/custom-edit.spec.js (1)
6-7: LGTM! Improved element targeting strategy.The change from row-based to cell-based targeting is a good improvement that makes the tests more precise and maintainable.
* fix: [grid] fix footer bug in visual scroll scene * test: fix e2e test case
* fix: [grid] fix footer bug in visual scroll scene * test: fix e2e test case
PR
修复横向虚拟滚动场景下，表尾渲染不正常问题。
修复前：
修复后：
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
Version Update
@opentiny/vue-gridpackage version from 3.21.1 to 3.21.2Performance Improvements
Technical Refinements
Test Updates