Tencent / tdesign-vue-next

A Vue3.x UI components lib for TDesign.
https://tdesign.tencent.com/vue-next
MIT License
1.43k stars 462 forks source link

t-table闪烁问题,t-tabs里 放t-table ,切换 ,t-table 会闪烁 #4258

Open benbtx opened 4 months ago

benbtx commented 4 months ago

tdesign-vue-next 版本

"tdesign-vue-next": "1.8.1",

重现链接

No response

重现步骤

t-table闪烁问题,t-tabs里 放t-table ,切换 时,t-table 会闪烁 ;当为table 数据都为空时,‘暂无数据’四个字会明显的一闪变化位置

期望结果

不要闪烁

实际结果

No response

框架版本

Vue(3.4.19)

浏览器版本

125.0.6422.113 (正式版本) (32 位)

系统版本

win 10

Node版本

v16.20.2

补充说明

No response

github-actions[bot] commented 4 months ago

👋 @benbtx,感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

const-undefined-man commented 2 months ago

这个问题好像是这样的: table组件在加载的时候,.t-table--loading .t-table__content 有一个min-height:168px;然后empty状态下,.t-table__content 高度是169px。 可以理解为: 空数据状态 + 加载状态:闪烁;空数据行会被隐藏,导致闪烁。解决方案:空数据加载,空数据行正常显示。 一行数据情况 + 加载状态:闪烁;loading状态的高度太高,导致闪烁。解决方案:loading状态的min-height取消;用inset:0 代替。 两行数据情况 + 加载状态:闪烁;loading状态的高度太高,导致闪烁。解决方案:loading状态的min-height取消;用inset:0 代替。 超过两行数据情况 + 加载状态:正常,无需处理