x-extends / vxe-table

Vxe table 的表格组件
https://vxetable.cn
MIT License
7.67k stars 1.06k forks source link

tab切换时,表格宽度变化导致页面抖动 #2584

Closed qishibo closed 1 month ago

qishibo commented 1 month ago

可复现的链接(包含复现链接与示例代码):

https://codesandbox.io/p/sandbox/vue-2-playground-forked-sfwn3n?workspaceId=c5f54597-2142-45a8-af4f-0c9a288531bd

问题描述与截图:

vue 2.6.11, vxe-table 3.9.0-rc.15 如上复现链接,el-tab中添加了vxe-table, 切换tab时,表格宽度先是变窄,然后恢复到正常宽度,导致了页面抖动, 滚动条也是闪现了一下【没有的话多点两下会有的】,看了看相关issue没找到有效方案,不知道是用法错误还是其他问题

https://github.com/user-attachments/assets/e1342c70-eacc-4707-9e62-d6bc7ec10d6e

期望的结果:

No response

操作系统:

mac

浏览器版本:

chrome

vue 版本:

2.6.11

vxe-pc-ui 版本:

3.1.9

vxe-table 版本:

3.9.0-rc.15

是否使用当前最新版本?

xuliangzhan commented 1 month ago

当表格处于隐藏容器时,应该在容器可视时重新 resize 一下,有非常多种方式可解决,例如以下。 如果父容器改变宽度,表格出现缓缓收缩时,说明父容器缺少 overflow,加上即可解决。

第一种:当容器显示隐藏或者宽高发生变化时,配合手动调用 recalculate 方法刷新表格。 https://codesandbox.io/p/sandbox/vue-2-playground-forked-qdnrlr?file=%2Fpackage.json%3A15%2C30&workspaceId=44179298-eeaf-4b3b-a9c8-271d64c79ec4

第二种:通过 :sync-resize="tabName" 绑定变量,当变量变化时,表格会自动调用 recalculate 方法刷新表格。 https://codesandbox.io/p/sandbox/vue-2-playground-forked-lyppdm?workspaceId=44179298-eeaf-4b3b-a9c8-271d64c79ec4

第三种:通过 auto-resize 自动监听(全局设置),当容器宽高变化时,表格会自动调用 recalculate方法刷新表格。 https://codesandbox.io/p/sandbox/vue-2-playground-forked-ct87h7?file=%2Fpackage.json%3A13%2C29-14%2C28&workspaceId=44179298-eeaf-4b3b-a9c8-271d64c79ec4

第四种:使用配套的 vxe-tabs 页签,可以什么参数都不需要加,会自动同步刷新 https://codesandbox.io/p/sandbox/vue-2-playground-forked-ctqfdj?file=%2Fsrc%2FApp.vue%3A14%2C48&workspaceId=44179298-eeaf-4b3b-a9c8-271d64c79ec4

qishibo commented 1 month ago

@xuliangzhan 赞!

实际上用的是虚拟滚动,之前也试过auto-resize,当时用的版本是rc15没生效,https://codesandbox.io/p/sandbox/vue-2-playground-forked-yxjtq7?file=%2Fpackage.json%3A14%2C14 现在更到rc23解决了