Skip to content

fix(grid): [grid] fix footer bug in visual scroll scene #2839

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zzcr merged 2 commits into from
Jan 22, 2025
Merged

fix(grid): [grid] fix footer bug in visual scroll scene #2839

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b2bdada
fix: [grid] fix footer bug in visual scroll scene
gimmyhehe Jan 22, 2025
99fb173
test: fix e2e test case
gimmyhehe Jan 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/grid/editor/custom-edit.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@ import { test, expect } from '@playwright/test'
test('多行编辑', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-editor#editor-custom-edit')
await expect(page.getByRole('row', { name: '1 请选择 保存 取消' }).getByRole('textbox').first()).toBeVisible()
await expect(page.getByRole('row', { name: '2 请选择 保存 取消' }).getByRole('textbox').first()).toBeVisible()
await expect(page.getByRole('cell', { name: 'GFD 科技有限公司' }).getByRole('textbox')).toBeVisible()
await expect(page.getByRole('cell', { name: 'WWWW 科技有限公司' }).getByRole('textbox')).toBeVisible()
})
2 changes: 1 addition & 1 deletion packages/vue/src/grid/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@opentiny/vue-grid",
"type": "module",
"version": "3.21.1",
"version": "3.21.2",
"description": "",
"license": "MIT",
"sideEffects": false,
Expand Down
14 changes: 7 additions & 7 deletions packages/vue/src/grid/src/body/src/body.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -751,11 +751,12 @@ function renderDefEmpty(h) {
}

const syncHeaderAndFooterScroll = ({ bodyElem, footerElem, headerElem, isX }) => {
Copy link

@petercat-assistant petercat-assistant bot Jan 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

const scrollLeft = bodyElem.scrollLeft
if (isX && headerElem) {
headerElem.scrollLeft = bodyElem.scrollLeft
headerElem.scrollLeft = scrollLeft
}
if (isX && footerElem) {
footerElem.scrollLeft = bodyElem.scrollLeft
footerElem.scrollLeft = scrollLeft
}
}

Expand Down Expand Up @@ -870,10 +871,6 @@ export default defineComponent({
// 空数据元素
elemStore[`${keyPrefix}emptyBlock`] = $refs.emptyBlock

// 表体第一层div监听滚动事件
$el.onscroll = this.scrollEvent
$el._onscroll = this.scrollEvent

if (dropConfig) {
const { plugin, row = true } = dropConfig
plugin && row && (this.rowSortable = $table.rowDrop(this.$el))
Expand Down Expand Up @@ -907,7 +904,10 @@ export default defineComponent({
'div',
{
ref: 'body',
class: ['tiny-grid__body-wrapper', 'body__wrapper', { [classMap.isScrollload]: scrollLoad }]
class: ['tiny-grid__body-wrapper', 'body__wrapper', { [classMap.isScrollload]: scrollLoad }],
on: {
scroll: this.scrollEvent
}
},
[
// 表格主体内容x轴方向虚拟滚动条占位元素
Expand Down
6 changes: 4 additions & 2 deletions packages/vue/src/grid/src/table/src/methods.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1644,8 +1644,10 @@ const Methods = {
// 设置新的渲染列触发Vue渲染
this.tableColumn = ret.tableColumn
this.visibleColumnChanged = ret.visibleColumnChanged

this.$nextTick(this.updateStyle)
this.$nextTick(() => {
this.updateFooter()
Copy link

@petercat-assistant petercat-assistant bot Jan 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

this.updateStyle()
})
})
},
// 更新横向 X 可视渲染上下剩余空间大小
Expand Down
7 changes: 7 additions & 0 deletions packages/vue/src/grid/src/table/src/utils/updateStyle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ function getTableWidth({ scrollXLoad, tWidth, tableColumn }) {
}

function layoutFooter({
elemStore,
customHeight,
footerHeight,
headerHeight,
Expand All @@ -61,6 +62,11 @@ function layoutFooter({
let tWidth = tableWidth
// 如果是固定列与设置了超出隐藏
let ret = getTableWidth({ scrollXLoad, tWidth, tableColumn })
// 为表尾设置虚拟滚动占位宽度
const spaceElem = elemStore['main-footer-x-space']
Copy link

@petercat-assistant petercat-assistant bot Jan 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

if (spaceElem) {
spaceElem.style.width = `${tableWidth}px`
}

tableColumn = ret.tableColumn
tWidth = ret.tWidth
Expand Down Expand Up @@ -242,6 +248,7 @@ export function handleLayout(params) {
tableColumn = ret.tableColumn
} else if (layout === 'footer') {
tableColumn = layoutFooter({
elemStore,
customHeight,
fixedWrapperElem,
footerHeight,
Expand Down
Loading