最近遇到select数据量过大,导致select的option显示、下拉选择都非常卡顿,为了解决这个问题,就让数据初始显示100条,加了下拉加载的功能。
还要option的label内容过长,下拉框显示不完这个问题,需要使用nzCustomContent属性使option显示的内容是option标签中间定义的内容。
一、解决select数据量过大造成的卡顿
html代码:
<nz-select
style="width: 200px;"
[(ngModel)]="modal"
(nzScrollToBottom)="loadMore()"
nzPlaceHolder="请选择"
nzAllowClear
(ngModelChange)="modelChange($event)"
>
<nz-option *ngFor="let option of optionList" [nzValue]="option.value"[nzLabel]="option.label"></nz-option>
</nz-select>
ts代码:
optionListAll = []; // 定义从后台获取的select的option数据集合
optionList = []; // 定义显示的select的option数据集合
optionScrollPage = 1; // 全局变量定义option滚动的页数
optionScrollSize = 20; // 全局变量定义option每页条数
// 初始化时从后台获取
ngOnInit() {
this.initOption();