描述

表格虚拟滚动

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

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

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

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

导入

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

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

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

示例

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

{{column.title}}

{{node.name}}	{{node.size}}	{{node.type}}
{{noDadaInfo}}