ng-zorro nz-table 虚拟滚动

使用 ng-zorro 的 nz-table 展示列表时，正常使用 *ngFor 循环生成 tbody 中的 tr 即可

但如果数据量巨大，进入页面时，渲染就会耗个几秒，针对这种情况，则使用  nz-table 的虚拟滚动来优化：

https://ng.ant.design/components/table/zh#components-table-demo-virtual

 

本次测试数据 180，*ngFor 渲染需要，2~3s。

虚拟滚动则是正常渲染，略感延迟。

 

记录下调试过程：

按照官网的 demo 配置属性

 

结果显示存在问题（滚动条滚动后存在底部空白）

 

找了半天，才发现，是我 css 加了 td 的样式，因为 nzSize 为 small 时，行高还是不够小，所以又重新调整了 padding，使表格显示更紧凑

 

同样因为该 css 样式，跟  nzVirtualItemSize 属性配置的 50 高度不匹配，导致样式有问题，调整为紧凑后的 td 高度：

 

即可显示正常：