使用cdk-virtual-scroll-viewport结合datatable表格时搜索结果异常的解决方法

嘿，我之前也踩过这个坑！问题出在datatable组件和Angular CDK虚拟滚动的渲染逻辑冲突上——datatable会接管整个表格的DOM管理，而cdk-virtual-scroll是靠只渲染可视区域内的元素来优化大数据量的，两者的数据源同步和DOM控制没对齐，就导致搜索后的数据没法正确显示。另外先提个小细节：你原代码里tbody的td有嵌套错误（一个td里又套了td），这个也会导致显示异常，先把这个修正哦！

下面给你两个可行的解决方案：

方案一：对齐数据源，手动触发虚拟滚动刷新 #

datatable有时候会内部拷贝数据源，导致和虚拟滚动的数据源不同步，我们可以通过手动触发虚拟滚动的刷新来解决：

1. 给cdk-virtual-scroll-viewport添加模板引用变量：

<cdk-virtual-scroll-viewport [itemSize]="20" #scrollViewport>

2. 在组件类中获取这个虚拟滚动视图实例：

import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { ViewChild } from '@angular/core';

// ...

@ViewChild('scrollViewport') scrollViewport: CdkVirtualScrollViewport;

3. 当执行搜索操作、templates数据源更新后，调用以下方法强制刷新：

// 假设这是你的搜索方法
onSearch(query: string) {
  // 这里执行你的过滤逻辑，更新templates数组
  this.templates = this.allTemplates.filter(t => t.name.includes(query) || t.details.includes(query));
  
  // 强制虚拟滚动重新计算可视区域并渲染
  this.scrollViewport.checkViewportSize();
  // 滚动到顶部，确保搜索结果从第一行开始显示
  this.scrollViewport.scrollToIndex(0);
}

4. 确保datatable没有维护独立的数据源，直接使用templates数组（如果datatable有[dtOptions]之类的配置，不要在里面单独设置数据源）。

方案二：调整组件结构，分离DOM控制权 #

把datatable的指令移到tbody层级，让它只负责tbody内的样式和交互，而虚拟滚动直接控制tr的渲染，避免两者的DOM控制权冲突：

修改后的代码如下：

<cdk-virtual-scroll-viewport [itemSize]="20">
  <table>
    <thead>
      <tr>
        <th> Template </th>
        <th> Details </th>
      </tr>
    </thead>
    <!-- 把datatable指令移到tbody上 -->
    <tbody datatable>
      <tr *cdkVirtualFor="let template of templates; let i=index">
        <td>{{ template.name}}</td>
        <td>{{ template.details}}</td>
      </tr>
    </tbody>
  </table>
</cdk-virtual-scroll-viewport>

额外注意点 #

• 确认itemSize的值和表格行的实际高度一致，如果行高和设置的itemSize偏差较大，虚拟滚动的计算会出错，也会导致显示异常；
• 如果datatable自带过滤功能，一定要让它的过滤结果直接更新到templates数组，而不是内部维护过滤后的副本，否则虚拟滚动无法感知到数据变化。

内容的提问来源于stack exchange，提问作者Raghu Vallikkat