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

* fix: [grid] fix footer bug in visual scroll scene

* test: fix e2e test case

Author: gimmyhehe

examples/sites/demos/pc/app/grid/editor/custom-edit.spec.js

@@ -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()
 })

packages/vue/src/grid/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-grid",
   "type": "module",
-  "version": "3.21.1",
+  "version": "3.21.2",
   "description": "",
   "license": "MIT",
   "sideEffects": false,

packages/vue/src/grid/src/body/src/body.tsx

@@ -751,11 +751,12 @@ function renderDefEmpty(h) {
 }
 
 const syncHeaderAndFooterScroll = ({ bodyElem, footerElem, headerElem, isX }) => {
+  const scrollLeft = bodyElem.scrollLeft
   if (isX && headerElem) {
-    headerElem.scrollLeft = bodyElem.scrollLeft
+    headerElem.scrollLeft = scrollLeft
   }
   if (isX && footerElem) {
-    footerElem.scrollLeft = bodyElem.scrollLeft
+    footerElem.scrollLeft = scrollLeft
   }
 }
 
@@ -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))
@@ -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轴方向虚拟滚动条占位元素

packages/vue/src/grid/src/table/src/methods.ts

@@ -1644,8 +1644,10 @@ const Methods = {
       // 设置新的渲染列触发Vue渲染
       this.tableColumn = ret.tableColumn
       this.visibleColumnChanged = ret.visibleColumnChanged
-
-      this.$nextTick(this.updateStyle)
+      this.$nextTick(() => {
+        this.updateFooter()
+        this.updateStyle()
+      })
     })
   },
   // 更新横向 X 可视渲染上下剩余空间大小

packages/vue/src/grid/src/table/src/utils/updateStyle.ts

@@ -44,6 +44,7 @@ function getTableWidth({ scrollXLoad, tWidth, tableColumn }) {
 }
 
 function layoutFooter({
+  elemStore,
   customHeight,
   footerHeight,
   headerHeight,
@@ -61,6 +62,11 @@ function layoutFooter({
   let tWidth = tableWidth
   // 如果是固定列与设置了超出隐藏
   let ret = getTableWidth({ scrollXLoad, tWidth, tableColumn })
+  // 为表尾设置虚拟滚动占位宽度
+  const spaceElem = elemStore['main-footer-x-space']
+  if (spaceElem) {
+    spaceElem.style.width = `${tableWidth}px`
+  }
 
   tableColumn = ret.tableColumn
   tWidth = ret.tWidth
@@ -242,6 +248,7 @@ export function handleLayout(params) {
     tableColumn = ret.tableColumn
   } else if (layout === 'footer') {
     tableColumn = layoutFooter({
+      elemStore,
       customHeight,
       fixedWrapperElem,
       footerHeight,