解决nz-table底部固定合计栏开启虚拟滚动后无法横向滚动

原创

已于 2023-07-27 15:34:37 修改 · 815 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #前端 #css3

于 2023-07-27 15:27:46 首次发布

文章描述了一个在前端处理大数据量表格时遇到的性能挑战，表格具有可配置列和无限列的需求，且无法分页。作者通过固定合计栏对齐、监听滚动事件以及应用虚拟滚动来优化性能。在启用虚拟滚动后，调整CSS样式以实现整个表格的横向滚动。此外，还处理了列宽度自适应变化的情况，确保合计栏的准确性。

先上效果图

如图表格是可配置列的，且列是可自定义的，也就是说可以有无限列，同时由于需求限制无法做成分页，需要一次性加载全量数据，因此延展出了性能问题。

1.底部合计栏固定对齐，拖动表格的同时合计跟着一起滚动对齐

具体思路就是给表格一个固定视窗的高度，动态获取表格配置（获取每列宽度，给合计栏的每个span一个相同的宽度），css开启滚动并隐藏合计栏的滚动条，监听表格的滚动事件，当表格滚动时给合计栏一个相同的滚动

ps：注意这时候并未开启虚拟滚动，开启虚拟滚动后滚动的视窗和现在是不一样的

 <nz-table
  #productTable
  class="statistics-table"
  [nzData]="dataList"
  [nzFrontPagination]="false"
  [nzScroll]="{ x: '100vw',y: '500px' }"
  [nzShowPagination]="false"
>
.
.
.
</nz-table>

 <div  class="fixed-footer" id="fixedFooter">
       <span   *ngFor="let item of summarySettings" class="footer-item" [ngStyle]="{width: item.width}">
              {
  
  {item.summary}}
        </span>
 </div>

这是表格大概模版

定义出来后我们再去浏览器打开f12，拖动表格滚动条，找到当前在滚动的元素