Protable频闪问题总结

现象：切换Tab键，Tab标签下面的表格内容会出现频闪问题 一般原因有以下几种：

1. 组件重新渲染问题

   • 表格组件在切换标签时被完全卸载和重新挂载
   • 数据重新加载导致的短暂空白

2. 数据加载延迟

   • 异步数据获取未完成时显示空白，然后突然显示内容
   • 数据加载时间不一致导致的闪烁

3. CSS过渡/动画问题

   • 切换动画设置不当导致视觉闪烁
   • 布局重排(reflow)导致的闪烁

4. 虚拟滚动/Vue key问题

   • 表格使用虚拟滚动但配置不当
   • Vue/React中key值设置不合理导致组件重建

5. 状态管理问题

   • 切换标签时状态重置导致表格重新初始化

   但这次的频闪原因还不在于上述几种原因内，特此记录一下；这次频闪的原因是Protable设置了sticky粘性表头属性；这个属性设置了之后在表格滚动的时候，表头可以固定不跟随滚动条滚动；主要是这个属性会添加一个样式，就会切换时表格频闪问题 因此解决方案是不启用Protable自带的sticky属性，最后自己写了css样式

   /* 固定表头 */
   .ant-table-thead > tr > th {
   position: sticky;
   top: 0;
   z-index: 100;
   background: #fff;
   box-shadow: 0 1px 0 #f0f0f0;
   }