fantasy-ngzorro 2.1.16 → 2.1.17

package/README.md

@@ -37,9 +37,9 @@
 | — | 2026-6-23 | hd-table 状态列支持 `stateField` 自定义取值字段、`isState` 按列名取值；hd-form Input 支持 `prefix` / `prefixIcon`；hd-detail-lines-page 支持 `isCrossPageSelect` 跨页勾选开关 |
 | — | 2026-7-6 | hd-form 支持 `FormListType.Checkbox`（单个复选框 / 复选框组）及 `CheckboxOption` 配置 |
 | — | 2026-8-6 | hd-form-lines：`allowEmpty` + 仅删除按钮时初始化不补空行、可删至 0 行；分页页码删空校正；ViewDom 字号 14px |
-| — | 2026-8-21 | 分页选项统一增加 500 / 1000；`hd-table` / `hd-detail-lines` / `hd-detail-lines-page` 默认 `tablePageSize` 改为 100 |
+| — | 2026-8-26 | `hd-table` 默认开启虚拟滚动（`virtualScroll` / `virtualItemSize`）；文档补齐 |
 | — | 2026-8-25 | hd-status：`statusToColor` 按 sunan-server 业务状态枚举全量去重补充（排除银行 / AGV / HTTP StatusCode） |
-| — | 2026-8-26 | 文档补齐：`hd-form-lines` 勾选/复制/插槽/暴露方法/`allowEmpty`；分页默认值与选项；`FormLine` 字段 |
+| — | 2026-8-21 | 分页选项统一增加 500 / 1000；`hd-table` / `hd-detail-lines` / `hd-detail-lines-page` 默认 `tablePageSize` 改为 100 |
 
 ## 前言
 
@@ -342,6 +342,8 @@ tableCols: HdTableColumn[] = [{
 | showSelected | boolean | false | 勾选列 |
 | selectField | string | billNumber | 勾选主键字段 |
 | showOperateColWarpButton | boolean | false | 展开/缩略显示换行列 |
+| virtualScroll | boolean | true | 虚拟滚动（需 `nzScroll.y`；仅渲染可视区行） |
+| virtualItemSize | number | — | 虚拟滚动行高（px）；**不传则首屏自动测量** |
 | showTableTotal | boolean | false | 底部合计行 |
 | tableTotalOption | HdTableTotalOption[] | — | 合计配置 |
 | isFirstEntrySearch | boolean | — | 首次进入是否自动查询 |

package/bundles/fantasy-ngzorro.umd.js

@@ -7005,6 +7005,7 @@
             this.tableCols = [];
             this.showSelected = false;
             this.showOperateColWarpButton = false;
+            this.virtualScroll = true;
             this.selectField = "billNumber";
             // 合计区域
             this.showTableTotal = false;
@@ -7048,6 +7049,36 @@
             this.localtionTmp = "";
             this.isFirstEntrySearchLocal = true;
             this.isCrossPageSelectLocal = false;
+            /**
+             * 自动测量前的兜底行高，测量完成后会更新
+             */
+            this.measuredVirtualItemSize = 47;
+            this.trackByRow = (/**
+             * @param {?} index
+             * @param {?} data
+             * @return {?}
+             */
+            function (index, data) {
+                /** @type {?} */
+                var key = data && data[_this.selectField];
+                return key != null ? String(key) : "row-" + index;
+            });
+            /**
+             * 虚拟滚动按数组下标追踪，避免业务主键 trackBy 导致 CDK 行复用错位
+             */
+            this.virtualTrackByRow = (/**
+             * @param {?} index
+             * @return {?}
+             */
+            function (index) { return index; });
+            this.trackByCol = (/**
+             * @param {?} _index
+             * @param {?} col
+             * @return {?}
+             */
+            function (_index, col) {
+                return col.title;
+            });
             // 拖拽操作
             this.beforeDrop = (/**
              * @param {?} arg
@@ -7165,12 +7196,18 @@
                     changes["tableData"]["previousValue"]["pageSize"] ||
                     changes["tableData"]["currentValue"]["pageNumber"] !==
                         changes["tableData"]["previousValue"]["pageNumber"]) {
+                    if (this.virtualScroll) {
+                        this.refreshVirtualScrollViewport();
+                    }
                     return;
                 }
                 if (!this.isCrossPageSelectLocal) {
                     this.resetStatus();
                 }
             }
+            if (changes["tableData"] && this.virtualScroll) {
+                this.refreshVirtualScrollViewport();
+            }
             if (changes["tableCols"] &&
                 JSON.stringify(changes["tableCols"].currentValue) !==
                     JSON.stringify(changes["tableCols"].previousValue) &&
@@ -7238,35 +7275,21 @@
         function () {
             this.showDetail = !this.showDetail;
             this.cdr.markForCheck();
+            this.refreshVirtualScrollViewport(true);
         };
-        /**
-         * @param {?} index
-         * @param {?} data
-         * @return {?}
-         */
-        HdTableComponent.prototype.trackByRow = /**
-         * @param {?} index
-         * @param {?} data
-         * @return {?}
-         */
-        function (index, data) {
-            /** @type {?} */
-            var key = data && data[this.selectField];
-            return key != null ? key : index;
-        };
-        /**
-         * @param {?} _index
-         * @param {?} col
-         * @return {?}
-         */
-        HdTableComponent.prototype.trackByCol = /**
-         * @param {?} _index
-         * @param {?} col
-         * @return {?}
-         */
-        function (_index, col) {
-            return col.title;
-        };
+        Object.defineProperty(HdTableComponent.prototype, "effectiveVirtualItemSize", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                if (this.virtualItemSize != null && this.virtualItemSize > 0) {
+                    return this.virtualItemSize;
+                }
+                return this.measuredVirtualItemSize;
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
          * @return {?}
          */
@@ -7337,7 +7360,90 @@
                 this.dealOperateBtn();
                 this.showTable = true;
                 this.cdr.markForCheck();
+                this.refreshVirtualScrollViewport();
+            }
+        };
+        /**
+         * @param {?=} forceMeasure
+         * @return {?}
+         */
+        HdTableComponent.prototype.refreshVirtualScrollViewport = /**
+         * @param {?=} forceMeasure
+         * @return {?}
+         */
+        function (forceMeasure) {
+            var _this = this;
+            if (forceMeasure === void 0) { forceMeasure = false; }
+            if (!this.virtualScroll) {
+                return;
+            }
+            setTimeout((/**
+             * @return {?}
+             */
+            function () {
+                /** @type {?} */
+                var viewport = _this.nzTableComponent &&
+                    _this.nzTableComponent.cdkVirtualScrollViewport;
+                if (!viewport) {
+                    return;
+                }
+                /** @type {?} */
+                var measured = _this.measureVirtualItemSize(forceMeasure);
+                if (measured) {
+                    _this.cdr.markForCheck();
+                    viewport.checkViewportSize();
+                    setTimeout((/**
+                     * @return {?}
+                     */
+                    function () {
+                        _this.measureVirtualItemSize(forceMeasure);
+                        viewport.checkViewportSize();
+                    }));
+                }
+                else {
+                    viewport.checkViewportSize();
+                }
+            }));
+        };
+        /** 未手动传 virtualItemSize 时，从已渲染行测量真实高度 */
+        /**
+         * 未手动传 virtualItemSize 时，从已渲染行测量真实高度
+         * @param {?=} force
+         * @return {?}
+         */
+        HdTableComponent.prototype.measureVirtualItemSize = /**
+         * 未手动传 virtualItemSize 时，从已渲染行测量真实高度
+         * @param {?=} force
+         * @return {?}
+         */
+        function (force) {
+            if (force === void 0) { force = false; }
+            if (this.virtualItemSize != null &&
+                this.virtualItemSize > 0 &&
+                !force) {
+                return false;
+            }
+            /** @type {?} */
+            var viewport = this.nzTableComponent &&
+                this.nzTableComponent.cdkVirtualScrollViewport;
+            if (!viewport) {
+                return false;
+            }
+            /** @type {?} */
+            var root = (/** @type {?} */ (viewport.elementRef.nativeElement));
+            /** @type {?} */
+            var row = ((/** @type {?} */ (root.querySelector("tr.hd-table-virtual-row")))) ||
+                ((/** @type {?} */ (root.querySelector("tbody tr"))));
+            if (!row || row.offsetHeight <= 0) {
+                return false;
             }
+            /** @type {?} */
+            var height = row.offsetHeight;
+            if (height === this.measuredVirtualItemSize) {
+                return false;
+            }
+            this.measuredVirtualItemSize = height;
+            return true;
         };
         // 设置列点击取消
         // 设置列点击取消
@@ -7910,18 +8016,16 @@
                     colWidth += item.width;
                 }
             }));
-            if (this.tableTotal) {
-                this.scroll = {
-                    x: "1px",
-                    y: "calc(100vh - 180px)",
-                };
-            }
-            else {
-                this.scroll = {
-                    x: "1px",
-                    y: "calc(100vh - 140px)",
-                };
-            }
+            /** @type {?} */
+            var scrollY = this.tableTotal
+                ? "calc(100vh - 180px)"
+                : "calc(100vh - 140px)";
+            /** @type {?} */
+            var scrollX = this.virtualScroll && colWidth > 0 ? colWidth + "px" : "1px";
+            this.scroll = {
+                x: scrollX,
+                y: scrollY,
+            };
         };
         // 表格勾选逻辑
         // 表格勾选逻辑
@@ -8084,9 +8188,9 @@
         HdTableComponent.decorators = [
             { type: core.Component, args: [{
                         selector: "hd-table",
-                        template: "<ng-container>\n  <hd-button-group>\n    <ng-template #buttonGroupLeft>\n      <ng-container *ngTemplateOutlet=\"tableLeftButton\"></ng-container>\n      <hd-button *ngIf=\"showOperateColWarpButton\" type=\"default\" (click)=\"toggleShowDetail()\">{{showDetail ?\n        '\u7F29\u7565\u663E\u793A': '\u5C55\u5F00\u663E\u793A'}}</hd-button>\n    </ng-template>\n    <ng-template #buttonGroupRight>\n      <ng-container *ngTemplateOutlet=\"tableRightButton\"></ng-container>\n      <hd-button type=\"primary\" nz-dropdown nzTrigger=\"click\" [nzDropdownMenu]=\"menu\" (clickAction)=\"confirmDropdown()\"\n        [nzVisible]=\"isDropdownVisible\">\u8BBE\u7F6E\u5217</hd-button>\n      <nz-dropdown-menu #menu=\"nzDropdownMenu\">\n        <div style=\"max-height: 400px;overflow-y: scroll;\">\n          <div *ngIf=\"showListNodes && nowListNodes.length > 0\" nz-menu style=\"padding: 5px 10px;\">\n            <nz-tree *ngIf=\"showListNodes\" [nzData]=\"nowListNodes\" nzCheckable nzDraggable nzBlockNode\n              nzShowExpand=\"false\" (nzCheckBoxChange)=\"checkAction($event)\" [nzBeforeDrop]=\"beforeDrop\"\n              [nzTreeTemplate]=\"nzTreeTemplate\">\n            </nz-tree>\n            <ng-template #nzTreeTemplate let-node>\n              <span\n                class=\"ng-tns-c31-110 draggable ng-star-inserted ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close\"\n                [title]=\"node.key\" draggable=\"true\" aria-grabbed=\"true\">\n                <span class=\"ant-tree-title\">\n                  <div class=\"hd-table-tree-node\">\n                    <span>{{node.key}}</span>\n                    <div *ngIf=\"!node.origin.disabled\" class=\"hd-table-tree-node-img\">\n                      <i nz-icon nzType=\"caret-up\" nzTheme=\"outline\"></i>\n                      <i nz-icon nzType=\"caret-down\" nzTheme=\"outline\"></i>\n                    </div>\n                  </div>\n                </span>\n              </span>\n            </ng-template>\n          </div>\n          <div *ngIf=\"showListNodes && hideListNodes.length > 0\" nz-menu style=\"padding: 5px 10px;\">\n            <nz-tree *ngIf=\"showListNodes\" [nzData]=\"hideListNodes\" nzCheckable nzShowExpand=\"false\"\n              (nzCheckBoxChange)=\"checkAction($event)\">\n            </nz-tree>\n          </div>\n        </div>\n        <div style=\"text-align: right;background: #fff;padding: 4px;\">\n          <hd-button style=\"margin-right: 4px;\" type=\"default\" size=\"small\" (clickAction)=\"cancelDropdown()\">\u53D6\u6D88\n          </hd-button>\n          <hd-button type=\"primary\" size=\"small\" (clickAction)=\"submitGrids()\">\u5B8C\u6210</hd-button>\n        </div>\n      </nz-dropdown-menu>\n    </ng-template>\n  </hd-button-group>\n  <hd-space type=\"row\" size=\"12\"></hd-space>\n  <ng-container *ngTemplateOutlet=\"tableTotal\"></ng-container>\n  <hd-space *ngIf=\"tableTotal\" type=\"row\" size=\"12\"></hd-space>\n  <nz-table *ngIf=\"showTable\" #hdTable class=\"hd-table-container\" [nzScroll]=\"scroll\" nzShowSizeChanger\n    nzShowSizeChanger nzShowQuickJumper nzFrontPagination=\"false\" nzSize=\"middle\" [nzData]=\"tableData.content\"\n    [nzTotal]=\"tableData.totalElements\" [(nzPageIndex)]=\"tablePageIndex\" [nzLoading]=\"tableLoading\"\n    [nzPageSizeOptions]=\"[ 10, 50, 100, 200, 500, 1000 ]\" [(nzPageSize)]=\"tablePageSize\" (nzPageSizeChange)=\"search(true)\"\n    (nzPageIndexChange)=\"search(false)\" (nzCurrentPageDataChange)=\"showSelected ? currentPageDataChange($event) : null\"\n    [nzShowTotal]=\"tableTotalTemplate\">\n    <thead (nzSortChange)=\"sort($event)\" nzSingleSort>\n      <tr>\n        <th nzWidth=\"40px\" nzLeft=\"0px\" *ngIf=\"showSelected\" nzShowCheckbox [(nzChecked)]=\"isAllDisplayDataChecked\"\n          [nzIndeterminate]=\"isIndeterminate\" (nzCheckedChange)=\"checkAll($event)\"></th>\n        <ng-container *ngFor=\"let col of tableCols\">\n          <th *ngIf=\"col.isShow\" [nzWidth]=\"col.width + 'px'\" [nzAlign]=\"col.align\"\n            [nzLeft]=\"col.fixed === 'left' ? col.fixedWidth + 'px' : null\"\n            [nzRight]=\"col.fixed === 'right' ? 0  + 'px' : null\" nz-resizable nzBounds=\"window\" nzPreview\n            (nzResizeEnd)=\"onResize($event, col)\" [nzShowSort]=\"col.canSort\" [nzSortKey]=\"col.name\">\n            {{ col.title }}\n            <nz-resize-handle nzDirection=\"right\">\n              <div class=\"resize-trigger\"></div>\n            </nz-resize-handle>\n          </th>\n        </ng-container>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let data of hdTable.data; trackBy: trackByRow; index as i\">\n        <td nzLeft=\"0px\" *ngIf=\"showSelected\" nzShowCheckbox [(nzChecked)]=\"mapOfCheckedId[data[selectField]]\"\n          (nzCheckedChange)=\"refreshStatus($event, data)\"></td>\n        <ng-container *ngFor=\"let col of tableCols; trackBy: trackByCol\">\n          <td *ngIf=\"col.isShow\" [ngStyle]=\"{'max-width': col.width + 'px'}\" [nzAlign]=\"col.align\"\n            [nzLeft]=\"col.fixed === 'left' ? col.fixedWidth + 'px' : null\"\n            [nzRight]=\"col.fixed === 'right' ? 0 + 'px' : null\"\n            [ngClass]=\"(col.canWarp && showDetail) ? 'common-td-wrap' : ''\">\n            <ng-container *ngIf=\"col.title === '\u64CD\u4F5C';else notOperateTemplate\">\n              <div class=\"common-btn-group\">\n                <ng-container *ngFor=\"let btn of col.btnList\">\n                  <ng-container *ngIf=\"!needShowConfirm(btn, data);else showConfirmTemplate\">\n                    <a *ngIf=\"btn.permission ? btn.permission(data) : true\"\n                      [class]=\"btn.name === '\u5220\u9664' ? 'common-danger-btn': ''\"\n                      (click)=\"triggerEvent(btn.click || null, data)\">{{ btn.name }}</a>\n                  </ng-container>\n                  <ng-template #showConfirmTemplate>\n                    <a *ngIf=\"btn.permission ? btn.permission(data) : true\"\n                      [class]=\"btn.name === '\u5220\u9664' ? 'common-danger-btn': ''\" nz-popconfirm\n                      [nzPopconfirmTitle]=\"'\u786E\u8BA4\u8981' + btn.name + '\u5417?'\"\n                      (nzOnConfirm)=\"triggerEvent(btn.click || null, data)\">{{\n                      btn.name }}</a>\n                  </ng-template>\n                </ng-container>\n              </div>\n            </ng-container>\n            <ng-template #notOperateTemplate>\n              <ng-container *ngIf=\"col.name === 'state' || col.isState;else otherTemplate\">\n                <hd-status [status]=\"data[getStateField(col)]\">\n                  <ng-container *ngIf=\"(data | hdTableCell:col) as cell\">{{ cell.display }}</ng-container>\n                </hd-status>\n              </ng-container>\n              <ng-template #otherTemplate>\n                <ng-container *ngIf=\"col.click;else noClickTemplate\">\n                  <ng-container *ngIf=\"(data | hdTableCell:col) as cell\">\n                    <a [attr.title]=\"cell.title\"\n                      [ngStyle]=\"{'color': cell.isEmpty ? '#2A3634' : (col?.color ? col.color : null)}\"\n                      (click)=\"triggerEvent(col.click || null, data)\">{{ cell.display }}</a>\n                  </ng-container>\n                </ng-container>\n                <ng-template #noClickTemplate>\n                  <ng-container *ngIf=\"(data | hdTableCell:col) as cell\">\n                    <span [attr.title]=\"cell.title\" [ngStyle]=\"{'color': col?.color ? col.color : null}\">{{ cell.display }}</span>\n                  </ng-container>\n                </ng-template>\n              </ng-template>\n            </ng-template>\n          </td>\n        </ng-container>\n      </tr>\n      <!-- \u5408\u8BA1\u6240\u6709\u6570\u636E\u533A\u57DF \u9700\u8981\u540E\u7AEF\u63A5\u53E3\u914D\u5408 -->\n      <tr *ngIf=\"showTableTotal\" class=\"hd-table-total\">\n        <td>\u5408\u8BA1</td>\n        <ng-container *ngFor=\"let tableTotalOption of tableTotalOptionList\">\n          <td>{{ tableTotalOption }}</td>\n        </ng-container>\n      </tr>\n    </tbody>\n    <ng-template #tableTotalTemplate>\n      \u5171 {{tableData.totalElements}} \u6761\u6570\u636E\n    </ng-template>\n  </nz-table>\n</ng-container>\n",
+                        template: "<ng-container>\n  <hd-button-group>\n    <ng-template #buttonGroupLeft>\n      <ng-container *ngTemplateOutlet=\"tableLeftButton\"></ng-container>\n      <hd-button *ngIf=\"showOperateColWarpButton\" type=\"default\" (click)=\"toggleShowDetail()\">{{showDetail ?\n        '\u7F29\u7565\u663E\u793A': '\u5C55\u5F00\u663E\u793A'}}</hd-button>\n    </ng-template>\n    <ng-template #buttonGroupRight>\n      <ng-container *ngTemplateOutlet=\"tableRightButton\"></ng-container>\n      <hd-button type=\"primary\" nz-dropdown nzTrigger=\"click\" [nzDropdownMenu]=\"menu\" (clickAction)=\"confirmDropdown()\"\n        [nzVisible]=\"isDropdownVisible\">\u8BBE\u7F6E\u5217</hd-button>\n      <nz-dropdown-menu #menu=\"nzDropdownMenu\">\n        <div style=\"max-height: 400px;overflow-y: scroll;\">\n          <div *ngIf=\"showListNodes && nowListNodes.length > 0\" nz-menu style=\"padding: 5px 10px;\">\n            <nz-tree *ngIf=\"showListNodes\" [nzData]=\"nowListNodes\" nzCheckable nzDraggable nzBlockNode\n              nzShowExpand=\"false\" (nzCheckBoxChange)=\"checkAction($event)\" [nzBeforeDrop]=\"beforeDrop\"\n              [nzTreeTemplate]=\"nzTreeTemplate\">\n            </nz-tree>\n            <ng-template #nzTreeTemplate let-node>\n              <span\n                class=\"ng-tns-c31-110 draggable ng-star-inserted ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close\"\n                [title]=\"node.key\" draggable=\"true\" aria-grabbed=\"true\">\n                <span class=\"ant-tree-title\">\n                  <div class=\"hd-table-tree-node\">\n                    <span>{{node.key}}</span>\n                    <div *ngIf=\"!node.origin.disabled\" class=\"hd-table-tree-node-img\">\n                      <i nz-icon nzType=\"caret-up\" nzTheme=\"outline\"></i>\n                      <i nz-icon nzType=\"caret-down\" nzTheme=\"outline\"></i>\n                    </div>\n                  </div>\n                </span>\n              </span>\n            </ng-template>\n          </div>\n          <div *ngIf=\"showListNodes && hideListNodes.length > 0\" nz-menu style=\"padding: 5px 10px;\">\n            <nz-tree *ngIf=\"showListNodes\" [nzData]=\"hideListNodes\" nzCheckable nzShowExpand=\"false\"\n              (nzCheckBoxChange)=\"checkAction($event)\">\n            </nz-tree>\n          </div>\n        </div>\n        <div style=\"text-align: right;background: #fff;padding: 4px;\">\n          <hd-button style=\"margin-right: 4px;\" type=\"default\" size=\"small\" (clickAction)=\"cancelDropdown()\">\u53D6\u6D88\n          </hd-button>\n          <hd-button type=\"primary\" size=\"small\" (clickAction)=\"submitGrids()\">\u5B8C\u6210</hd-button>\n        </div>\n      </nz-dropdown-menu>\n    </ng-template>\n  </hd-button-group>\n  <hd-space type=\"row\" size=\"12\"></hd-space>\n  <ng-container *ngTemplateOutlet=\"tableTotal\"></ng-container>\n  <hd-space *ngIf=\"tableTotal\" type=\"row\" size=\"12\"></hd-space>\n  <nz-table *ngIf=\"showTable\" #hdTable class=\"hd-table-container\" [nzScroll]=\"scroll\" nzShowSizeChanger\n    nzShowSizeChanger nzShowQuickJumper nzFrontPagination=\"false\" nzSize=\"middle\" [nzData]=\"tableData.content\"\n    [nzTotal]=\"tableData.totalElements\" [(nzPageIndex)]=\"tablePageIndex\" [nzLoading]=\"tableLoading\"\n    [nzPageSizeOptions]=\"[ 10, 50, 100, 200, 500, 1000 ]\" [(nzPageSize)]=\"tablePageSize\" (nzPageSizeChange)=\"search(true)\"\n    (nzPageIndexChange)=\"search(false)\" (nzCurrentPageDataChange)=\"showSelected ? currentPageDataChange($event) : null\"\n    [nzShowTotal]=\"tableTotalTemplate\" [nzVirtualScroll]=\"virtualScroll\" [nzVirtualItemSize]=\"virtualScroll ? effectiveVirtualItemSize : 0\"\n    [nzVirtualForTrackBy]=\"virtualTrackByRow\">\n    <thead (nzSortChange)=\"sort($event)\" nzSingleSort>\n      <tr>\n        <th nzWidth=\"40px\" nzLeft=\"0px\" *ngIf=\"showSelected\" nzShowCheckbox [(nzChecked)]=\"isAllDisplayDataChecked\"\n          [nzIndeterminate]=\"isIndeterminate\" (nzCheckedChange)=\"checkAll($event)\"></th>\n        <ng-container *ngFor=\"let col of tableCols\">\n          <th *ngIf=\"col.isShow\" [nzWidth]=\"col.width + 'px'\" [nzAlign]=\"col.align\"\n            [nzLeft]=\"col.fixed === 'left' ? col.fixedWidth + 'px' : null\"\n            [nzRight]=\"col.fixed === 'right' ? 0  + 'px' : null\" nz-resizable nzBounds=\"window\" nzPreview\n            (nzResizeEnd)=\"onResize($event, col)\" [nzShowSort]=\"col.canSort\" [nzSortKey]=\"col.name\">\n            {{ col.title }}\n            <nz-resize-handle nzDirection=\"right\">\n              <div class=\"resize-trigger\"></div>\n            </nz-resize-handle>\n          </th>\n        </ng-container>\n      </tr>\n    </thead>\n    <tbody>\n      <ng-template *ngIf=\"virtualScroll\" nz-virtual-scroll let-data let-index=\"index\">\n        <tr class=\"hd-table-virtual-row\">\n          <ng-container *ngTemplateOutlet=\"tableCells; context: { $implicit: data, index: index }\"></ng-container>\n        </tr>\n      </ng-template>\n      <ng-container *ngIf=\"!virtualScroll\">\n        <tr *ngFor=\"let data of hdTable.data; trackBy: trackByRow; index as i\">\n          <ng-container *ngTemplateOutlet=\"tableCells; context: { $implicit: data, index: i }\"></ng-container>\n        </tr>\n      </ng-container>\n    </tbody>\n    <tfoot *ngIf=\"showTableTotal\">\n      <tr class=\"hd-table-total\">\n        <td>\u5408\u8BA1</td>\n        <ng-container *ngFor=\"let tableTotalOption of tableTotalOptionList\">\n          <td>{{ tableTotalOption }}</td>\n        </ng-container>\n      </tr>\n    </tfoot>\n    <ng-template #tableTotalTemplate>\n      \u5171 {{tableData.totalElements}} \u6761\u6570\u636E\n    </ng-template>\n  </nz-table>\n</ng-container>\n\n<ng-template #tableCells let-data let-index=\"index\">\n  <td nzLeft=\"0px\" *ngIf=\"showSelected\" nzShowCheckbox [nzChecked]=\"mapOfCheckedId[data[selectField]]\"\n    (nzCheckedChange)=\"refreshStatus($event, data)\"></td>\n  <ng-container *ngFor=\"let col of tableCols; trackBy: trackByCol\">\n    <td *ngIf=\"col.isShow\" [ngStyle]=\"{'max-width': col.width + 'px'}\" [nzAlign]=\"col.align\"\n      [nzLeft]=\"col.fixed === 'left' ? col.fixedWidth + 'px' : null\"\n      [nzRight]=\"col.fixed === 'right' ? 0 + 'px' : null\"\n      [ngClass]=\"(col.canWarp && showDetail) ? 'common-td-wrap' : ''\">\n      <ng-container *ngIf=\"col.title === '\u64CD\u4F5C';else notOperateTemplate\">\n        <div class=\"common-btn-group\">\n          <ng-container *ngFor=\"let btn of col.btnList\">\n            <ng-container *ngIf=\"!needShowConfirm(btn, data);else showConfirmTemplate\">\n              <a *ngIf=\"btn.permission ? btn.permission(data) : true\"\n                [class]=\"btn.name === '\u5220\u9664' ? 'common-danger-btn': ''\"\n                (click)=\"triggerEvent(btn.click || null, data)\">{{ btn.name }}</a>\n            </ng-container>\n            <ng-template #showConfirmTemplate>\n              <a *ngIf=\"btn.permission ? btn.permission(data) : true\"\n                [class]=\"btn.name === '\u5220\u9664' ? 'common-danger-btn': ''\" nz-popconfirm\n                [nzPopconfirmTitle]=\"'\u786E\u8BA4\u8981' + btn.name + '\u5417?'\"\n                (nzOnConfirm)=\"triggerEvent(btn.click || null, data)\">{{\n                btn.name }}</a>\n            </ng-template>\n          </ng-container>\n        </div>\n      </ng-container>\n      <ng-template #notOperateTemplate>\n        <ng-container *ngIf=\"col.name === 'state' || col.isState;else otherTemplate\">\n          <hd-status [status]=\"data[getStateField(col)]\">\n            <ng-container *ngIf=\"(data | hdTableCell:col) as cell\">{{ cell.display }}</ng-container>\n          </hd-status>\n        </ng-container>\n        <ng-template #otherTemplate>\n          <ng-container *ngIf=\"col.click;else noClickTemplate\">\n            <ng-container *ngIf=\"(data | hdTableCell:col) as cell\">\n              <a [attr.title]=\"cell.title\"\n                [ngStyle]=\"{'color': cell.isEmpty ? '#2A3634' : (col?.color ? col.color : null)}\"\n                (click)=\"triggerEvent(col.click || null, data)\">{{ cell.display }}</a>\n            </ng-container>\n          </ng-container>\n          <ng-template #noClickTemplate>\n            <ng-container *ngIf=\"(data | hdTableCell:col) as cell\">\n              <span [attr.title]=\"cell.title\" [ngStyle]=\"{'color': col?.color ? col.color : null}\">{{ cell.display }}</span>\n            </ng-container>\n          </ng-template>\n        </ng-template>\n      </ng-template>\n    </td>\n  </ng-container>\n</ng-template>\n",
                         changeDetection: core.ChangeDetectionStrategy.OnPush,
-                        styles: ["::ng-deep .common-btn-group>a{font-size:14px;font-weight:400;color:#20b95d!important;white-space:nowrap}::ng-deep .common-btn-group .common-danger-btn:hover{color:#f05b24!important}::ng-deep .common-btn-group>a:hover{color:#20bd62!important}::ng-deep .common-btn-group>a:not(:last-child)::after{content:'';margin:0 2px}::ng-deep .common-billNumber>a{color:#3b77e3}button{box-shadow:unset;text-shadow:unset;padding:0 6px!important}::ng-deep .ant-form-item-label>label{color:#4b504e;font-size:14px}::ng-deep .ant-input-number-input{height:32px}::ng-deep .ant-input-number{height:32px}textarea.ant-input{height:auto;min-height:32px}::ng-deep .ant-select-selection--multiple{min-height:32px}::ng-deep .ant-select-selection__rendered>ul>li{height:26px!important;margin-top:3px!important;line-height:26px!important}::ng-deep .ant-advanced-search-form .ant-form-item{margin-bottom:0!important}::ng-deep .ant-select-selection--single{height:32px!important}::ng-deep .ant-input{height:32px}::ng-deep .ant-input[disabled]:hover{border-color:#d9d9d9!important}::ng-deep .ant-select-selection__rendered{line-height:32px!important}::ng-deep .ant-calendar-range-picker-input{text-align:left!important}::ng-deep .ant-calendar-picker{width:100%!important}::ng-deep .ant-row{margin-right:0!important;margin-left:0!important}::ng-deep .ant-col-6{padding-left:12px;padding-right:12px}::ng-deep .ant-col-12{padding-left:12px;padding-right:12px}::ng-deep .ant-col-18{padding-left:12px;padding-right:12px}::ng-deep .ant-col-24{padding-left:12px;padding-right:12px}::ng-deep .ant-alert-info{background-color:#f5f8f6;border:1px solid #cfe3d4}:host ::ng-deep th{background:#f5f8f6!important;font-weight:700!important;white-space:nowrap;font-size:14px;font-family:PingFangSC-Medium,PingFang SC;color:#2a3634;padding:8px!important;box-sizing:border-box}:host ::ng-deep td{font-weight:400;font-style:normal;font-size:14px;color:#2a3634;text-align:left;white-space:nowrap;padding:8px!important;box-sizing:border-box}::ng-deep .ant-pagination-options{display:inline-flex;align-items:center}::ng-deep .ant-time-picker{width:100%}.ant-input-number-disabled,.ant-input[disabled],.ant-select-disabled{color:#4b504e}.nz-resizable-preview{position:absolute;top:0;left:0;z-index:8;border:1px dashed #d1d1d1}.nz-resizable-handle{position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:9}.nz-resizable-handle-top{width:100%;height:10px;top:-5px;left:0}.nz-resizable-handle-right{height:100%}.nz-resizable-handle-bottom{width:100%;height:10px;bottom:-5px;left:0}.nz-resizable-handle-left{width:10px;height:100%;top:0;left:-5px}.nz-resizable-handle-topRight{width:20px;height:20px;top:-5px;right:-5px;z-index:10}.nz-resizable-handle-bottomRight{width:20px;height:20px;right:-5px;bottom:-5px;z-index:10}.nz-resizable-handle-bottomLeft{width:20px;height:20px;bottom:-5px;left:-5px;z-index:10}.nz-resizable-handle-topLeft{width:20px;height:20px;top:-5px;left:-5px;z-index:10}.nz-resizable:not(.nz-resizable-resizing) .nz-resizable-handle-bottom,.nz-resizable:not(.nz-resizable-resizing) .nz-resizable-handle-top{cursor:row-resize}.nz-resizable:not(.nz-resizable-resizing) .nz-resizable-handle-left,.nz-resizable:not(.nz-resizable-resizing) .nz-resizable-handle-right{cursor:col-resize}.nz-resizable:not(.nz-resizable-resizing) .nz-resizable-handle-bottomRight,.nz-resizable:not(.nz-resizable-resizing) .nz-resizable-handle-topLeft{cursor:nwse-resize}.nz-resizable:not(.nz-resizable-resizing) .nz-resizable-handle-bottomLeft,.nz-resizable:not(.nz-resizable-resizing) .nz-resizable-handle-topRight{cursor:nesw-resize}.hd-table-container ::ng-deep .ant-pagination-options-quick-jumper input{border-radius:2px;border:1px solid #d9d9d9}.hd-table-container ::ng-deep .ant-pagination-options .ant-select-selection{border-radius:2px}.hd-table-container ::ng-deep .ant-table-thead>tr>th{border-bottom:1px solid #ecf1ed;white-space:nowrap;text-overflow:ellipsis}.hd-table-container ::ng-deep .ant-table-tbody>tr>td{border-bottom:1px solid #ecf1ed;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.hd-table-container ::ng-deep .hd-table-total>td{border:0!important}::ng-deep .ant-dropdown-menu{border-radius:0}::ng-deep .ant-dropdown{margin-top:8px!important}.common-td-wrap{white-space:normal!important;word-break:break-all}.nz-resizable-preview{border-width:0 1px 0 0}.resize-trigger{width:10px;height:15px;position:relative;top:calc((100% - 15px)/ 2)}.resize-trigger::after{position:absolute;top:calc((100% - 15px)/ 2);left:0;background:#d5d5d5;content:'';width:1px;height:15px;z-index:1}.nz-resizable-handle-right{position:absolute;width:10px;top:0;right:-5px;z-index:inherit}.hd-table-tree-node{display:inline-flex;align-items:center;padding-right:10px}.hd-table-tree-node .hd-table-tree-node-img{display:flex;flex-direction:column;position:absolute;right:0;margin-top:-2.5px}.hd-table-tree-node .hd-table-tree-node-img i{opacity:.3}.hd-table-tree-node .hd-table-tree-node-img i:last-child{margin-top:-5px}img{width:20px;height:20px}.ant-table-th-left-sticky{z-index:2}::ng-deep .ant-table-thead>tr>th .ant-table-header-column .ant-table-column-sorters>:not(.ant-table-column-sorter){position:unset}"]
+                        styles: ["::ng-deep .common-btn-group>a{font-size:14px;font-weight:400;color:#20b95d!important;white-space:nowrap}::ng-deep .common-btn-group .common-danger-btn:hover{color:#f05b24!important}::ng-deep .common-btn-group>a:hover{color:#20bd62!important}::ng-deep .common-btn-group>a:not(:last-child)::after{content:'';margin:0 2px}::ng-deep .common-billNumber>a{color:#3b77e3}button{box-shadow:unset;text-shadow:unset;padding:0 6px!important}::ng-deep .ant-form-item-label>label{color:#4b504e;font-size:14px}::ng-deep .ant-input-number-input{height:32px}::ng-deep .ant-input-number{height:32px}textarea.ant-input{height:auto;min-height:32px}::ng-deep .ant-select-selection--multiple{min-height:32px}::ng-deep .ant-select-selection__rendered>ul>li{height:26px!important;margin-top:3px!important;line-height:26px!important}::ng-deep .ant-advanced-search-form .ant-form-item{margin-bottom:0!important}::ng-deep .ant-select-selection--single{height:32px!important}::ng-deep .ant-input{height:32px}::ng-deep .ant-input[disabled]:hover{border-color:#d9d9d9!important}::ng-deep .ant-select-selection__rendered{line-height:32px!important}::ng-deep .ant-calendar-range-picker-input{text-align:left!important}::ng-deep .ant-calendar-picker{width:100%!important}::ng-deep .ant-row{margin-right:0!important;margin-left:0!important}::ng-deep .ant-col-6{padding-left:12px;padding-right:12px}::ng-deep .ant-col-12{padding-left:12px;padding-right:12px}::ng-deep .ant-col-18{padding-left:12px;padding-right:12px}::ng-deep .ant-col-24{padding-left:12px;padding-right:12px}::ng-deep .ant-alert-info{background-color:#f5f8f6;border:1px solid #cfe3d4}:host ::ng-deep th{background:#f5f8f6!important;font-weight:700!important;white-space:nowrap;font-size:14px;font-family:PingFangSC-Medium,PingFang SC;color:#2a3634;padding:8px!important;box-sizing:border-box}:host ::ng-deep td{font-weight:400;font-style:normal;font-size:14px;color:#2a3634;text-align:left;white-space:nowrap;padding:8px!important;box-sizing:border-box}::ng-deep .ant-pagination-options{display:inline-flex;align-items:center}::ng-deep .ant-time-picker{width:100%}.ant-input-number-disabled,.ant-input[disabled],.ant-select-disabled{color:#4b504e}.nz-resizable-preview{position:absolute;top:0;left:0;z-index:8;border:1px dashed #d1d1d1}.nz-resizable-handle{position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:9}.nz-resizable-handle-top{width:100%;height:10px;top:-5px;left:0}.nz-resizable-handle-right{height:100%}.nz-resizable-handle-bottom{width:100%;height:10px;bottom:-5px;left:0}.nz-resizable-handle-left{width:10px;height:100%;top:0;left:-5px}.nz-resizable-handle-topRight{width:20px;height:20px;top:-5px;right:-5px;z-index:10}.nz-resizable-handle-bottomRight{width:20px;height:20px;right:-5px;bottom:-5px;z-index:10}.nz-resizable-handle-bottomLeft{width:20px;height:20px;bottom:-5px;left:-5px;z-index:10}.nz-resizable-handle-topLeft{width:20px;height:20px;top:-5px;left:-5px;z-index:10}.nz-resizable:not(.nz-resizable-resizing) .nz-resizable-handle-bottom,.nz-resizable:not(.nz-resizable-resizing) .nz-resizable-handle-top{cursor:row-resize}.nz-resizable:not(.nz-resizable-resizing) .nz-resizable-handle-left,.nz-resizable:not(.nz-resizable-resizing) .nz-resizable-handle-right{cursor:col-resize}.nz-resizable:not(.nz-resizable-resizing) .nz-resizable-handle-bottomRight,.nz-resizable:not(.nz-resizable-resizing) .nz-resizable-handle-topLeft{cursor:nwse-resize}.nz-resizable:not(.nz-resizable-resizing) .nz-resizable-handle-bottomLeft,.nz-resizable:not(.nz-resizable-resizing) .nz-resizable-handle-topRight{cursor:nesw-resize}.hd-table-container ::ng-deep .ant-pagination-options-quick-jumper input{border-radius:2px;border:1px solid #d9d9d9}.hd-table-container ::ng-deep .ant-pagination-options .ant-select-selection{border-radius:2px}.hd-table-container ::ng-deep .ant-table-thead>tr>th{border-bottom:1px solid #ecf1ed;white-space:nowrap;text-overflow:ellipsis}.hd-table-container ::ng-deep .ant-table-tbody>tr>td{border-bottom:1px solid #ecf1ed;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.hd-table-container ::ng-deep .hd-table-total>td{border:0!important}.hd-table-container ::ng-deep cdk-virtual-scroll-viewport.ant-table-body .hd-table-virtual-row>td{box-sizing:border-box}::ng-deep .ant-dropdown-menu{border-radius:0}::ng-deep .ant-dropdown{margin-top:8px!important}.common-td-wrap{white-space:normal!important;word-break:break-all}.nz-resizable-preview{border-width:0 1px 0 0}.resize-trigger{width:10px;height:15px;position:relative;top:calc((100% - 15px)/ 2)}.resize-trigger::after{position:absolute;top:calc((100% - 15px)/ 2);left:0;background:#d5d5d5;content:'';width:1px;height:15px;z-index:1}.nz-resizable-handle-right{position:absolute;width:10px;top:0;right:-5px;z-index:inherit}.hd-table-tree-node{display:inline-flex;align-items:center;padding-right:10px}.hd-table-tree-node .hd-table-tree-node-img{display:flex;flex-direction:column;position:absolute;right:0;margin-top:-2.5px}.hd-table-tree-node .hd-table-tree-node-img i{opacity:.3}.hd-table-tree-node .hd-table-tree-node-img i:last-child{margin-top:-5px}img{width:20px;height:20px}.ant-table-th-left-sticky{z-index:2}::ng-deep .ant-table-thead>tr>th .ant-table-header-column .ant-table-column-sorters>:not(.ant-table-column-sorter){position:unset}"]
                     }] }
         ];
         /** @nocollapse */
@@ -8100,6 +8204,8 @@
             tableData: [{ type: core.Input }],
             showSelected: [{ type: core.Input }],
             showOperateColWarpButton: [{ type: core.Input }],
+            virtualScroll: [{ type: core.Input }],
+            virtualItemSize: [{ type: core.Input }],
             selectField: [{ type: core.Input }],
             showTableTotal: [{ type: core.Input }],
             tableTotalOption: [{ type: core.Input }],
@@ -8116,7 +8222,8 @@
             tablePageSizeChangeEvent: [{ type: core.Output }],
             tableTotal: [{ type: core.ContentChild, args: ["tableTotal", { static: false },] }],
             tableLeftButton: [{ type: core.ContentChild, args: ["tableLeftButton", { static: false },] }],
-            tableRightButton: [{ type: core.ContentChild, args: ["tableRightButton", { static: false },] }]
+            tableRightButton: [{ type: core.ContentChild, args: ["tableRightButton", { static: false },] }],
+            nzTableComponent: [{ type: core.ViewChild, args: ["hdTable", { static: false },] }]
         };
         __decorate([
             core$1.InputBoolean(),
@@ -8126,6 +8233,10 @@
             core$1.InputBoolean(),
             __metadata("design:type", Boolean)
         ], HdTableComponent.prototype, "showOperateColWarpButton", void 0);
+        __decorate([
+            core$1.InputBoolean(),
+            __metadata("design:type", Boolean)
+        ], HdTableComponent.prototype, "virtualScroll", void 0);
         __decorate([
             core$1.InputBoolean(),
             __metadata("design:type", Boolean)
@@ -8144,6 +8255,13 @@
         /** @type {?} */
         HdTableComponent.prototype.showOperateColWarpButton;
         /** @type {?} */
+        HdTableComponent.prototype.virtualScroll;
+        /**
+         * 手动指定行高；不传则在首屏渲染后自动测量
+         * @type {?}
+         */
+        HdTableComponent.prototype.virtualItemSize;
+        /** @type {?} */
         HdTableComponent.prototype.selectField;
         /** @type {?} */
         HdTableComponent.prototype.showTableTotal;
@@ -8229,6 +8347,22 @@
         HdTableComponent.prototype.isFirstEntrySearchLocal;
         /** @type {?} */
         HdTableComponent.prototype.isCrossPageSelectLocal;
+        /**
+         * 自动测量前的兜底行高，测量完成后会更新
+         * @type {?}
+         */
+        HdTableComponent.prototype.measuredVirtualItemSize;
+        /** @type {?} */
+        HdTableComponent.prototype.nzTableComponent;
+        /** @type {?} */
+        HdTableComponent.prototype.trackByRow;
+        /**
+         * 虚拟滚动按数组下标追踪，避免业务主键 trackBy 导致 CDK 行复用错位
+         * @type {?}
+         */
+        HdTableComponent.prototype.virtualTrackByRow;
+        /** @type {?} */
+        HdTableComponent.prototype.trackByCol;
         /** @type {?} */
         HdTableComponent.prototype.beforeDrop;
         /**