描述

虚拟滚动是和表头锁定功能搭配使用的。

虚拟滚动不支持详情展开、数据分组。

表格表头锁定功能：使用双表来实现的，样式类ti3-table-fixed-head包裹的是表头(第一个表格)，样式类ti3-table-container包裹的是表体(第二个表格)。

表格虚拟滚动功能：在有样式类 ti3-table-container 的元素(第二个表格的父容器)上使用 itemSize 接口设置每条数据占据的高度，并且给其设置最大高度或高度，然后在 div.ti3-table-container > table > tbody > tr 上用 cdkVirtualFor 替换原有的 ngFor。

在使用虚拟滚动时可根据具体表格数据每行的高度来设置 itemSize 接口，详见下面个示例。

导入

import {{ '{' }} TiTableModule, TiOverflowModule {{ '}' }} from '@opentiny/ng';

使用虚拟滚动需要引入 ScrollingModule 模块， 前提是安装了 @angular/cdk 三方库。

import {{ '{' }} ScrollingModule {{ '}' }} from '@angular/cdk/scrolling;

示例

改变数据：无数据 改变数据：大量(有滚动条) 改变数据：少量(没有滚动条)

1.表格-单行:

{{column.title}}

{{row.firstName}}	{{row.lastName}}	{{row.age}}	{{row.balance}}	{{row.email}}
{{noDadaInfo}}

2.表格-多行:

{{column.title}}

{{row.firstName}} {{row.id + row.lastName}}	{{row.lastName}}	{{row.age}}	{{row.balance}}	{{row.email}}
{{noDadaInfo}}

3.小表格-单行:

{{column.title}}

{{row.firstName}}	{{row.lastName}}	{{row.age}}	{{row.balance}}	{{row.email}}
{{noDadaInfo}}

4.小表格-多行:

{{column.title}}

{{row.firstName}} {{row.id + row.lastName}}	{{row.lastName}}	{{row.age}}	{{row.balance}}	{{row.email}}
{{noDadaInfo}}