fantasy-ngzorro 2.2.37 → 2.2.39

package/bundles/fantasy-ngzorro.umd.js

@@ -1502,7 +1502,8 @@
         return getTableViewportWidth(nzTable, hostClass);
     }
     /**
-     * 无数据或列宽未超出容器时不启用横向 scroll（fluid：表宽 100%，勾选/序号列由 CSS 锁宽）
+     * 无数据或列宽未超出容器时不启用横向 scroll（表宽 100%、table-layout: auto）。
+     * auto 布局下单元格 max-width 不生效，固定宽列会被均摊撑开；需要锁宽的场景见 hd-table 的横向布局。
      * @param {?} nzTable
      * @param {?} hasData
      * @param {?=} colWidth
@@ -10951,6 +10952,67 @@
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
+    /**
+     * 勾选列宽（px），与模板 nzWidth、less 兜底保持一致
+     * @type {?}
+     */
+    var SELECT_COL_WIDTH = 40;
+    /**
+     * 横向布局计算结果
+     * @record
+     */
+    function HdTableHorizontalLayout() { }
+    if (false) {
+        /**
+         * 传给 nzScroll.x；只有列宽总和 <= 0 时为 null
+         * @type {?}
+         */
+        HdTableHorizontalLayout.prototype.scrollX;
+        /**
+         * 按声明宽比例分给各业务列的总补宽，列多时为 0
+         * @type {?}
+         */
+        HdTableHorizontalLayout.prototype.fluidExtra;
+        /**
+         * 实际渲染总宽 = 声明总宽 + fluidExtra
+         * @type {?}
+         */
+        HdTableHorizontalLayout.prototype.displayTotal;
+        /**
+         * 列少、靠补宽吃满容器，不需要真正横滚
+         * @type {?}
+         */
+        HdTableHorizontalLayout.prototype.isFluid;
+    }
+    /**
+     * 列多（或量不到容器宽）：scroll.x = 声明总宽，正常横滚
+     * @param {?} declaredWidth
+     * @return {?}
+     */
+    function fixedLayout(declaredWidth) {
+        return {
+            scrollX: Math.ceil(declaredWidth) + "px",
+            fluidExtra: 0,
+            displayTotal: declaredWidth,
+            isFluid: false,
+        };
+    }
+    /**
+     * 列少：scroll.x = 容器宽，差额按声明宽比例分到各业务列
+     * @param {?} containerWidth
+     * @param {?} declaredWidth
+     * @return {?}
+     */
+    function fluidLayout(containerWidth, declaredWidth) {
+        /** @type {?} */
+        var fluidExtra = Math.max(0, containerWidth - declaredWidth);
+        return {
+            scrollX: containerWidth + "px",
+            fluidExtra: fluidExtra,
+            displayTotal: declaredWidth + fluidExtra,
+            isFluid: true,
+        };
+    }
     var HdTableComponent = /** @class */ (function () {
         function HdTableComponent(hostEl, cdr, commonSessionService) {
             var _this = this;
@@ -11036,23 +11098,21 @@
              */
             this.virtualScrollActive = null;
             /**
-             * 列宽合计（含勾选/序号 + fluid 补宽），footer 表宽与横向 scroll 共用
+             * 实际渲染列宽合计（含勾选/序号 + 补宽），合计 footer 表宽用
              */
             this.tableColWidthTotal = 0;
             /**
-             * fluid：声明列总宽 < 容器时，把差额补到最后一列业务列（不改缓存宽），
-             * 并设 scroll.x = 容器宽，避免表宽 100% 均摊撑开勾选列；拖拽改宽仍写 col.width。
+             * 待按比例分给各业务列的总补宽；只影响展示，不写回 col.width（列宽缓存、拖拽仍用声明宽）
              */
             this.fluidExtraWidth = 0;
             /**
-             * 列总宽未超出容器（fluid 补宽吃满）：不需要真正横滚，
-             * 用于关掉 ng-zorro fixed-header 带来的常驻 X 轴滚动条。
+             * 列少、靠补宽吃满容器：模板据此加 hd-table--fluid-x，隐藏 fixed-header 常驻的横滚槽
              */
             this.fluidHorizontal = false;
             /**
-             * fluid 补宽目标列缓存，避免模板每格 CD 时反复扫 tableCols
+             * 各业务列分到的补宽（按列对象取，applyHorizontalLayout 时整表重建）
              */
-            this.fluidExtraTargetCol = null;
+            this.fluidExtraByCol = new Map();
             /**
              * 数据更新后待复位纵向滚动位置
              */
@@ -11274,10 +11334,8 @@
                     changes["tableData"]["currentValue"]["pageNumber"] !==
                         changes["tableData"]["previousValue"]["pageNumber"]) {
                     this.pendingResetScrollTop = true;
-                    // pageSize/pageNumber 变化也要重算 scroll / fluid。
-                    // 业务常把 Page.pageSize 写成 content.length（如收款编辑 toPage），
-                    // virtualScroll=false 时若这里跳过，空表初始化后的 fluid 不会补上，勾选列被撑开。
-                    // applyTableScrollMode(false) 在模式未变时只 dealScroll，不会强制重建清排序态。
+                    // 业务可能把 Page.pageSize 写成 content.length，换数据时就会走到这里，
+                    // 必须重算横向布局。滚动模式不变时不会重建，排序态不会被清掉。
                     this.applyTableScrollMode(false);
                     // 翻页/改 pageSize：主动多次复位，覆盖 CDK 异步渲染时序
                     this.scheduleResetTableBodyScrollTop();
@@ -11289,9 +11347,7 @@
             }
             if (changes["tableData"]) {
                 this.pendingResetScrollTop = true;
-                // 不论是否虚拟滚动都要重算 scroll / fluid。
-                // 收款/付款编辑等页 [virtualScroll]=false + 异步灌数据：原先跳过会导致
-                // 空表初始化后不再补宽，勾选列被均摊撑开。
+                // 不论是否虚拟滚动，数据变化后都要重算横向布局
                 this.applyTableScrollMode(false);
                 // 数据更新后复位纵向滚动（含虚拟滚动场景）
                 this.scheduleResetTableBodyScrollTop();
@@ -11532,13 +11588,13 @@
             return col.fixed === "left" ? (col.fixedWidth || 0) + "px" : null;
         };
         Object.defineProperty(HdTableComponent.prototype, "lineNumberLeft", {
-            /** 开启合计时序号列的 left（勾选列占 40px） */
+            /** 开启合计时序号列的 left（跟在勾选列后面） */
             get: /**
-             * 开启合计时序号列的 left（勾选列占 40px）
+             * 开启合计时序号列的 left（跟在勾选列后面）
              * @return {?}
              */
             function () {
-                return this.showSelected ? "40px" : "0px";
+                return (this.showSelected ? SELECT_COL_WIDTH : 0) + "px";
             },
             enumerable: true,
             configurable: true
@@ -11569,64 +11625,194 @@
             enumerable: true,
             configurable: true
         });
-        /** 展示用列宽：fluid 时最后一列业务列 = 声明宽 + fluidExtraWidth */
         /**
-         * 展示用列宽：fluid 时最后一列业务列 = 声明宽 + fluidExtraWidth
+         * @private
+         * @param {?} col
+         * @return {?}
+         */
+        HdTableComponent.prototype.isColVisible = /**
+         * @private
+         * @param {?} col
+         * @return {?}
+         */
+        function (col) {
+            return !!col && col.isShow !== false;
+        };
+        /** 业务列声明宽：未配置时按 fixColWidth */
+        /**
+         * 业务列声明宽：未配置时按 fixColWidth
+         * @private
+         * @param {?} col
+         * @return {?}
+         */
+        HdTableComponent.prototype.getColDeclaredWidth = /**
+         * 业务列声明宽：未配置时按 fixColWidth
+         * @private
+         * @param {?} col
+         * @return {?}
+         */
+        function (col) {
+            return col && col.width > 0 ? col.width : ColWidth.fixColWidth;
+        };
+        /** 声明列宽合计：勾选列 + 序号列 + 可见业务列，不含补宽 */
+        /**
+         * 声明列宽合计：勾选列 + 序号列 + 可见业务列，不含补宽
+         * @private
+         * @return {?}
+         */
+        HdTableComponent.prototype.getDeclaredColWidthTotal = /**
+         * 声明列宽合计：勾选列 + 序号列 + 可见业务列，不含补宽
+         * @private
+         * @return {?}
+         */
+        function () {
+            var _this = this;
+            /** @type {?} */
+            var total = 0;
+            if (this.showSelected) {
+                total += SELECT_COL_WIDTH;
+            }
+            if (this.showTableTotal) {
+                total += this.lineNumberColWidth;
+            }
+            (this.tableCols || []).forEach((/**
+             * @param {?} col
+             * @return {?}
+             */
+            function (col) {
+                if (_this.isColVisible(col)) {
+                    total += _this.getColDeclaredWidth(col);
+                }
+            }));
+            return total;
+        };
+        /** 模板里 th / td / 合计 col 用的列宽：声明宽 + 该列按比例分到的补宽 */
+        /**
+         * 模板里 th / td / 合计 col 用的列宽：声明宽 + 该列按比例分到的补宽
          * @param {?} col
          * @return {?}
          */
         HdTableComponent.prototype.getColDisplayWidth = /**
-         * 展示用列宽：fluid 时最后一列业务列 = 声明宽 + fluidExtraWidth
+         * 模板里 th / td / 合计 col 用的列宽：声明宽 + 该列按比例分到的补宽
          * @param {?} col
          * @return {?}
          */
         function (col) {
             /** @type {?} */
-            var base = col && col.width != null && col.width > 0
-                ? col.width
-                : ColWidth.fixColWidth;
-            if (this.fluidExtraWidth <= 0 ||
-                !col ||
-                !this.fluidExtraTargetCol ||
-                col !== this.fluidExtraTargetCol) {
-                return base;
+            var declared = this.getColDeclaredWidth(col);
+            if (!col || this.fluidExtraWidth <= 0) {
+                return declared;
             }
-            return base + this.fluidExtraWidth;
+            /** @type {?} */
+            var extra = this.fluidExtraByCol.get(col);
+            return declared + (extra > 0 ? extra : 0);
         };
-        /** 按当前 layout 刷新 fluid 补宽目标列（仅 dealScroll / sync 时调用） */
         /**
-         * 按当前 layout 刷新 fluid 补宽目标列（仅 dealScroll / sync 时调用）
+         * 把 fluidExtra 按各可见业务列声明宽比例分配（最大余数法），
+         * 勾选列 / 序号列不参与；保证各列补宽之和等于 fluidExtra。
+         */
+        /**
+         * 把 fluidExtra 按各可见业务列声明宽比例分配（最大余数法），
+         * 勾选列 / 序号列不参与；保证各列补宽之和等于 fluidExtra。
          * @private
+         * @param {?} fluidExtra
          * @return {?}
          */
-        HdTableComponent.prototype.refreshFluidExtraTargetCol = /**
-         * 按当前 layout 刷新 fluid 补宽目标列（仅 dealScroll / sync 时调用）
+        HdTableComponent.prototype.rebuildFluidExtraByCol = /**
+         * 把 fluidExtra 按各可见业务列声明宽比例分配（最大余数法），
+         * 勾选列 / 序号列不参与；保证各列补宽之和等于 fluidExtra。
          * @private
+         * @param {?} fluidExtra
          * @return {?}
          */
-        function () {
-            this.fluidExtraTargetCol = null;
-            if (this.fluidExtraWidth <= 0 ||
-                !this.tableCols ||
-                !this.tableCols.length) {
+        function (fluidExtra) {
+            var _this = this;
+            this.fluidExtraByCol = new Map();
+            if (fluidExtra <= 0 || !this.tableCols || !this.tableCols.length) {
                 return;
             }
-            for (var i = this.tableCols.length - 1; i >= 0; i--) {
-                /** @type {?} */
-                var c = this.tableCols[i];
-                if (c && c.isShow && c.fixed !== "right") {
-                    this.fluidExtraTargetCol = c;
+            /** @type {?} */
+            var parts = [];
+            /** @type {?} */
+            var sumDeclared = 0;
+            this.tableCols.forEach((/**
+             * @param {?} col
+             * @return {?}
+             */
+            function (col) {
+                if (!_this.isColVisible(col)) {
                     return;
                 }
+                /** @type {?} */
+                var declared = _this.getColDeclaredWidth(col);
+                sumDeclared += declared;
+                parts.push({ col: col, declared: declared, share: 0, frac: 0 });
+            }));
+            if (sumDeclared <= 0 || !parts.length) {
+                return;
             }
-            for (var i = this.tableCols.length - 1; i >= 0; i--) {
+            /** @type {?} */
+            var assigned = 0;
+            parts.forEach((/**
+             * @param {?} part
+             * @return {?}
+             */
+            function (part) {
                 /** @type {?} */
-                var c = this.tableCols[i];
-                if (c && c.isShow) {
-                    this.fluidExtraTargetCol = c;
+                var exact = (fluidExtra * part.declared) / sumDeclared;
+                part.share = Math.floor(exact);
+                part.frac = exact - part.share;
+                assigned += part.share;
+            }));
+            /** @type {?} */
+            var remain = fluidExtra - assigned;
+            parts
+                .slice()
+                .sort((/**
+             * @param {?} a
+             * @param {?} b
+             * @return {?}
+             */
+            function (a, b) { return b.frac - a.frac; }))
+                .forEach((/**
+             * @param {?} part
+             * @return {?}
+             */
+            function (part) {
+                if (remain <= 0) {
                     return;
                 }
-            }
+                part.share += 1;
+                remain -= 1;
+            }));
+            parts.forEach((/**
+             * @param {?} part
+             * @return {?}
+             */
+            function (part) {
+                if (part.share > 0) {
+                    _this.fluidExtraByCol.set(part.col, part.share);
+                }
+            }));
+        };
+        /** 把横向布局结果写回组件状态（dealScroll / syncHorizontalScroll 共用） */
+        /**
+         * 把横向布局结果写回组件状态（dealScroll / syncHorizontalScroll 共用）
+         * @private
+         * @param {?} layout
+         * @return {?}
+         */
+        HdTableComponent.prototype.applyHorizontalLayout = /**
+         * 把横向布局结果写回组件状态（dealScroll / syncHorizontalScroll 共用）
+         * @private
+         * @param {?} layout
+         * @return {?}
+         */
+        function (layout) {
+            this.fluidExtraWidth = layout.fluidExtra;
+            this.fluidHorizontal = layout.isFluid;
+            this.rebuildFluidExtraByCol(layout.fluidExtra);
+            this.tableColWidthTotal = layout.displayTotal;
         };
         Object.defineProperty(HdTableComponent.prototype, "totalFooterTableWidth", {
             /** fluid → 100%；固定 → scroll.x（与表体同一套横向宽度） */
@@ -11754,7 +11940,6 @@
          * @return {?}
          */
         function (forceRemount) {
-            var _this = this;
             if (forceRemount === void 0) { forceRemount = false; }
             /** @type {?} */
             var useVirtual = this.useVirtualScroll;
@@ -11767,23 +11952,7 @@
                 // ng-zorro 只在 AfterViewInit 绑一次 header/body 的 scroll 同步；
                 // 若先以 y=null 创建再改成有 y，表头监听会丢，表现为列头不跟着横滚。
                 this.presetScrollBeforeRemount(useVirtual);
-                this.showTable = false;
-                this.cdr.markForCheck();
-                setTimeout((/**
-                 * @return {?}
-                 */
-                function () {
-                    _this.showTable = true;
-                    _this.cdr.markForCheck();
-                    setTimeout((/**
-                     * @return {?}
-                     */
-                    function () {
-                        _this.dealScroll();
-                        _this.cdr.markForCheck();
-                        _this.afterTableRender(useVirtual);
-                    }));
-                }));
+                this.remountTable(useVirtual);
                 return;
             }
             /** @type {?} */
@@ -11795,32 +11964,48 @@
             var nextHasX = !!(this.scroll && this.scroll.x);
             /** @type {?} */
             var nextHasY = !!(this.scroll && this.scroll.y);
-            // 运行中 x/y 从有变无/从无变有时，也必须重建：
-            // - y：ng-zorro 只在 AfterViewInit 绑一次 header/body 同步
-            // - x：空表 scroll.x=null（table-layout:auto）→ 有数据后设 scroll.x（fixed），
-            //   不重建时勾选列仍按 auto 均摊撑开（收款编辑等异步灌数页）
+            // scroll.x / scroll.y 从无到有（或反过来）时必须重建，原地改值不生效：
+            // - y：ng-zorro 8 只在 AfterViewInit 绑一次表头/表体滚动同步，且决定表头是否拆成独立 table
+            // - x：决定是否带 ant-table-fixed（table-layout: fixed），勾选列锁宽依赖它
             if (prevHasY !== nextHasY || prevHasX !== nextHasX) {
-                this.showTable = false;
-                this.cdr.markForCheck();
+                this.remountTable(useVirtual);
+                return;
+            }
+            this.cdr.markForCheck();
+            this.afterTableRender(useVirtual);
+        };
+        /** 销毁并重建 nz-table：等 DOM 出来后再按真实容器宽重算一次横向布局 */
+        /**
+         * 销毁并重建 nz-table：等 DOM 出来后再按真实容器宽重算一次横向布局
+         * @private
+         * @param {?} useVirtual
+         * @return {?}
+         */
+        HdTableComponent.prototype.remountTable = /**
+         * 销毁并重建 nz-table：等 DOM 出来后再按真实容器宽重算一次横向布局
+         * @private
+         * @param {?} useVirtual
+         * @return {?}
+         */
+        function (useVirtual) {
+            var _this = this;
+            this.showTable = false;
+            this.cdr.markForCheck();
+            setTimeout((/**
+             * @return {?}
+             */
+            function () {
+                _this.showTable = true;
+                _this.cdr.markForCheck();
                 setTimeout((/**
                  * @return {?}
                  */
                 function () {
-                    _this.showTable = true;
+                    _this.dealScroll();
                     _this.cdr.markForCheck();
-                    setTimeout((/**
-                     * @return {?}
-                     */
-                    function () {
-                        _this.dealScroll();
-                        _this.cdr.markForCheck();
-                        _this.afterTableRender(useVirtual);
-                    }));
+                    _this.afterTableRender(useVirtual);
                 }));
-                return;
-            }
-            this.cdr.markForCheck();
-            this.afterTableRender(useVirtual);
+            }));
         };
         /** 重建前预设 scroll，保证 AfterViewInit 时 header/body 结构已正确 */
         /**
@@ -12685,48 +12870,62 @@
         function (maxOffset) {
             return "calc(100vh - " + maxOffset + "px)";
         };
-        /**
-         * @private
-         * @return {?}
-         */
-        HdTableComponent.prototype.hasTableData = /**
-         * @private
-         * @return {?}
-         */
-        function () {
-            return !!(this.tableData &&
-                this.tableData.content &&
-                this.tableData.content.length);
-        };
-        /**
-         * 按声明列总宽 + 容器宽，计算 scroll.x 与 fluid 补宽。
-         * 列少：scroll.x = 内容区宽（clientWidth），差额加到最后业务列（勾选保持 40）；
-         * 列多：scroll.x = 声明总宽。
-         * 比较是否超宽用 offsetWidth（含 Y 槽），避免「仅因纵滚条」误开横滚；
-         * 补宽目标用 clientWidth，且 scroll.x 用 floor，避免表宽多 1px 逼出 X 轴滚动条。
-         */
-        /**
-         * 按声明列总宽 + 容器宽，计算 scroll.x 与 fluid 补宽。
-         * 列少：scroll.x = 内容区宽（clientWidth），差额加到最后业务列（勾选保持 40）；
-         * 列多：scroll.x = 声明总宽。
-         * 比较是否超宽用 offsetWidth（含 Y 槽），避免「仅因纵滚条」误开横滚；
-         * 补宽目标用 clientWidth，且 scroll.x 用 floor，避免表宽多 1px 逼出 X 轴滚动条。
+        /*
+         * 横向布局（勾选列锁 40px 的关键）
+         *
+         * 勾选列只有在 table-layout: fixed 下才锁得住：ng-zorro 8 仅在 nzScroll.x 有值时
+         * 给 table 加 ant-table-fixed；auto 布局下 table 宽 100%、每列都有 nzWidth，
+         * 剩余空间会按比例摊到所有列（含勾选列），单元格上的 max-width 也不生效。
+         * 所以只要有列（无论有没有数据）就一定设置 scroll.x：
+         * - 列少：scroll.x = 容器宽，差额按声明宽比例分到各业务列（fluid，不出真横滚）
+         * - 列多：scroll.x = 声明总宽，正常横滚
+         * less 里勾选列的 40px 只是 fixed 布局下的兜底。
+         */
+        /**
+         * 按声明列宽合计 + 容器宽算出横向布局。
+         * 判断「是否超宽」用 offsetWidth（含竖滚条槽），避免只因竖滚条就误开横滚；
+         * 补宽目标用 clientWidth 并向下取整，避免表宽多 1px 逼出横滚条。
+         */
+        /*
+           * 横向布局（勾选列锁 40px 的关键）
+           *
+           * 勾选列只有在 table-layout: fixed 下才锁得住：ng-zorro 8 仅在 nzScroll.x 有值时
+           * 给 table 加 ant-table-fixed；auto 布局下 table 宽 100%、每列都有 nzWidth，
+           * 剩余空间会按比例摊到所有列（含勾选列），单元格上的 max-width 也不生效。
+           * 所以只要有列（无论有没有数据）就一定设置 scroll.x：
+           * - 列少：scroll.x = 容器宽，差额按声明宽比例分到各业务列（fluid，不出真横滚）
+           * - 列多：scroll.x = 声明总宽，正常横滚
+           * less 里勾选列的 40px 只是 fixed 布局下的兜底。
+           */
+        /**
+         * 按声明列宽合计 + 容器宽算出横向布局。
+         * 判断「是否超宽」用 offsetWidth（含竖滚条槽），避免只因竖滚条就误开横滚；
+         * 补宽目标用 clientWidth 并向下取整，避免表宽多 1px 逼出横滚条。
          * @private
          * @param {?} declaredColWidth
          * @return {?}
          */
-        HdTableComponent.prototype.resolveHorizontalLayout = /**
-         * 按声明列总宽 + 容器宽，计算 scroll.x 与 fluid 补宽。
-         * 列少：scroll.x = 内容区宽（clientWidth），差额加到最后业务列（勾选保持 40）；
-         * 列多：scroll.x = 声明总宽。
-         * 比较是否超宽用 offsetWidth（含 Y 槽），避免「仅因纵滚条」误开横滚；
-         * 补宽目标用 clientWidth，且 scroll.x 用 floor，避免表宽多 1px 逼出 X 轴滚动条。
+        HdTableComponent.prototype.resolveHorizontalLayout = /*
+           * 横向布局（勾选列锁 40px 的关键）
+           *
+           * 勾选列只有在 table-layout: fixed 下才锁得住：ng-zorro 8 仅在 nzScroll.x 有值时
+           * 给 table 加 ant-table-fixed；auto 布局下 table 宽 100%、每列都有 nzWidth，
+           * 剩余空间会按比例摊到所有列（含勾选列），单元格上的 max-width 也不生效。
+           * 所以只要有列（无论有没有数据）就一定设置 scroll.x：
+           * - 列少：scroll.x = 容器宽，差额按声明宽比例分到各业务列（fluid，不出真横滚）
+           * - 列多：scroll.x = 声明总宽，正常横滚
+           * less 里勾选列的 40px 只是 fixed 布局下的兜底。
+           */
+        /**
+         * 按声明列宽合计 + 容器宽算出横向布局。
+         * 判断「是否超宽」用 offsetWidth（含竖滚条槽），避免只因竖滚条就误开横滚；
+         * 补宽目标用 clientWidth 并向下取整，避免表宽多 1px 逼出横滚条。
          * @private
          * @param {?} declaredColWidth
          * @return {?}
          */
         function (declaredColWidth) {
-            if (!this.hasTableData() || declaredColWidth <= 0) {
+            if (declaredColWidth <= 0) {
                 return {
                     scrollX: null,
                     fluidExtra: 0,
@@ -12735,115 +12934,64 @@
                 };
             }
             /** @type {?} */
-            var viewportCompare = this.nzTableComponent
+            var compareWidth = this.nzTableComponent
                 ? getTableScrollXViewportWidth(this.nzTableComponent)
                 : 0;
-            // 表体尚未量到宽时（异步灌数 / spin / 刚 remount），用宿主宽兜底
-            if (viewportCompare <= 0 && this.hostEl && this.hostEl.nativeElement) {
-                /** @type {?} */
-                var hostW = ((/** @type {?} */ (this.hostEl.nativeElement))).offsetWidth;
-                if (hostW > 0) {
-                    viewportCompare = hostW;
-                }
+            // 表体还没渲染出来（刚重建 / 在 spin 里）时用宿主宽兜底
+            if (compareWidth <= 0 && this.hostEl && this.hostEl.nativeElement) {
+                compareWidth = ((/** @type {?} */ (this.hostEl.nativeElement))).offsetWidth;
             }
-            if (viewportCompare > 0) {
-                if (declaredColWidth > viewportCompare + 1) {
-                    return {
-                        scrollX: Math.ceil(declaredColWidth) + "px",
-                        fluidExtra: 0,
-                        displayTotal: declaredColWidth,
-                        isFluid: false,
-                    };
-                }
-                /** @type {?} */
-                var fillWidth = this.nzTableComponent
-                    ? getTableViewportWidth(this.nzTableComponent)
-                    : 0;
-                /** @type {?} */
-                var target = Math.floor(fillWidth > 0 ? fillWidth : viewportCompare);
-                /** @type {?} */
-                var fluidExtra = Math.max(0, target - declaredColWidth);
-                return {
-                    scrollX: target + "px",
-                    fluidExtra: fluidExtra,
-                    displayTotal: declaredColWidth + fluidExtra,
-                    isFluid: true,
-                };
+            // 仍量不到（如宿主在 display:none 里）：先按声明宽走 fixed，等 ResizeObserver 触发再转 fluid
+            if (compareWidth <= 0) {
+                return fixedLayout(declaredColWidth);
             }
-            // 视口仍测不到：至少用声明宽设 scroll.x，强制 fixed 布局锁勾选列，
-            // 避免落回 table-layout:auto 被均摊撑开；后续 sync/remount 再转 fluid。
-            return {
-                scrollX: Math.ceil(declaredColWidth) + "px",
-                fluidExtra: 0,
-                displayTotal: declaredColWidth,
-                isFluid: false,
-            };
+            // 1px 容差，避免亚像素误判
+            if (declaredColWidth > compareWidth + 1) {
+                return fixedLayout(declaredColWidth);
+            }
+            /** @type {?} */
+            var fillWidth = this.nzTableComponent
+                ? getTableViewportWidth(this.nzTableComponent)
+                : 0;
+            /** @type {?} */
+            var containerWidth = Math.floor(fillWidth > 0 ? fillWidth : compareWidth);
+            return fluidLayout(containerWidth, declaredColWidth);
         };
-        /** 表格渲染后按实际容器宽度校正横向 scroll / fluid 补宽 */
+        /** 表格渲染后按真实容器宽校正横向布局；只改 x，y 保持不变 */
         /**
-         * 表格渲染后按实际容器宽度校正横向 scroll / fluid 补宽
+         * 表格渲染后按真实容器宽校正横向布局；只改 x，y 保持不变
          * @private
          * @return {?}
          */
         HdTableComponent.prototype.syncHorizontalScroll = /**
-         * 表格渲染后按实际容器宽度校正横向 scroll / fluid 补宽
+         * 表格渲染后按真实容器宽校正横向布局；只改 x，y 保持不变
          * @private
          * @return {?}
          */
         function () {
             var _this = this;
             /** @type {?} */
-            var declared = 0;
-            if (this.showSelected) {
-                declared += 40;
-            }
-            if (this.showTableTotal) {
-                declared += this.lineNumberColWidth;
-            }
-            if (this.tableCols) {
-                this.tableCols.forEach((/**
-                 * @param {?} item
-                 * @return {?}
-                 */
-                function (item) {
-                    if (item && item.isShow !== false) {
-                        declared += item.width > 0 ? item.width : ColWidth.fixColWidth;
-                    }
-                }));
-            }
-            /** @type {?} */
             var prevHasX = !!(this.scroll && this.scroll.x);
             /** @type {?} */
-            var layout = this.resolveHorizontalLayout(declared);
-            /** @type {?} */
-            var currentY = this.scroll ? this.scroll.y : null;
-            /** @type {?} */
-            var nextHasX = !!layout.scrollX;
+            var layout = this.resolveHorizontalLayout(this.getDeclaredColWidthTotal());
             /** @type {?} */
-            var sameX = this.scroll && this.scroll.x === layout.scrollX;
-            /** @type {?} */
-            var sameExtra = this.fluidExtraWidth === layout.fluidExtra;
-            /** @type {?} */
-            var sameFluid = this.fluidHorizontal === layout.isFluid;
-            if (sameX &&
-                sameExtra &&
-                sameFluid &&
-                this.scroll &&
-                this.scroll.y === currentY) {
+            var unchanged = this.scroll &&
+                this.scroll.x === layout.scrollX &&
+                this.fluidExtraWidth === layout.fluidExtra &&
+                this.fluidHorizontal === layout.isFluid;
+            if (unchanged) {
                 setTimeout((/**
                  * @return {?}
                  */
                 function () { return _this.syncTotalFooterWithBody(); }));
                 return;
             }
-            this.fluidExtraWidth = layout.fluidExtra;
-            this.fluidHorizontal = layout.isFluid;
-            this.refreshFluidExtraTargetCol();
-            this.tableColWidthTotal = layout.displayTotal;
-            this.scroll = { x: layout.scrollX, y: currentY };
+            this.applyHorizontalLayout(layout);
+            this.refreshStickyOffsets();
+            this.scroll = { x: layout.scrollX, y: this.scroll ? this.scroll.y : null };
             this.cdr.markForCheck();
-            // sync 阶段若补上了 scroll.x，需重建才能切到 fixed 布局
-            if (prevHasX !== nextHasX) {
+            // x 从无到有（或反过来）要重建才能切换 table-layout
+            if (prevHasX !== !!layout.scrollX) {
                 this.applyTableScrollMode(true);
                 return;
             }
@@ -13157,21 +13305,32 @@
             }), 100);
         };
         /**
+         * 左/右冻结偏移按展示宽累计（fluid 比例补宽后各列变宽，不能再用声明宽）。
+         * 须在 applyHorizontalLayout 之后调用。
+         */
+        /**
+         * 左/右冻结偏移按展示宽累计（fluid 比例补宽后各列变宽，不能再用声明宽）。
+         * 须在 applyHorizontalLayout 之后调用。
+         * @private
          * @return {?}
          */
-        HdTableComponent.prototype.dealScroll = /**
+        HdTableComponent.prototype.refreshStickyOffsets = /**
+         * 左/右冻结偏移按展示宽累计（fluid 比例补宽后各列变宽，不能再用声明宽）。
+         * 须在 applyHorizontalLayout 之后调用。
+         * @private
          * @return {?}
          */
         function () {
+            var _this = this;
             /** @type {?} */
-            var colWidth = 0;
+            var leftOffset = 0;
             if (this.showSelected) {
-                colWidth += 40;
+                leftOffset += SELECT_COL_WIDTH;
             }
             if (this.showTableTotal) {
-                colWidth += this.lineNumberColWidth; // 序号列（固定宽，不随位数变化）
+                leftOffset += this.lineNumberColWidth;
             }
-            this.tableCols.forEach((/**
+            (this.tableCols || []).forEach((/**
              * @param {?} item
              * @return {?}
              */
@@ -13179,34 +13338,48 @@
                 if (!item.width) {
                     item.width = ColWidth.fixColWidth;
                 }
-                if (item.isShow !== false) {
-                    item.fixedWidth = colWidth;
-                    colWidth += item.width;
+                if (_this.isColVisible(item)) {
+                    item.fixedWidth = leftOffset;
+                    leftOffset += _this.getColDisplayWidth(item);
                 }
             }));
-            // 右侧固定列：从右往左累计偏移，避免多列都 right:0 互相遮挡
             /** @type {?} */
             var rightOffset = 0;
-            for (var i = this.tableCols.length - 1; i >= 0; i--) {
+            for (var i = (this.tableCols || []).length - 1; i >= 0; i--) {
                 /** @type {?} */
                 var item = this.tableCols[i];
-                if (item.isShow === false) {
+                if (!this.isColVisible(item)) {
                     continue;
                 }
                 if (item.fixed === "right") {
                     item.fixedRightWidth = rightOffset;
-                    rightOffset += item.width;
+                    rightOffset += this.getColDisplayWidth(item);
                 }
                 else {
                     item.fixedRightWidth = 0;
                 }
             }
+        };
+        /**
+         * @return {?}
+         */
+        HdTableComponent.prototype.dealScroll = /**
+         * @return {?}
+         */
+        function () {
+            (this.tableCols || []).forEach((/**
+             * @param {?} item
+             * @return {?}
+             */
+            function (item) {
+                if (!item.width) {
+                    item.width = ColWidth.fixColWidth;
+                }
+            }));
             /** @type {?} */
-            var layout = this.resolveHorizontalLayout(colWidth);
-            this.fluidExtraWidth = layout.fluidExtra;
-            this.fluidHorizontal = layout.isFluid;
-            this.refreshFluidExtraTargetCol();
-            this.tableColWidthTotal = layout.displayTotal;
+            var layout = this.resolveHorizontalLayout(this.getDeclaredColWidthTotal());
+            this.applyHorizontalLayout(layout);
+            this.refreshStickyOffsets();
             /** @type {?} */
             var maxOffset = this.getScrollYMaxOffset();
             /** @type {?} */
@@ -14443,7 +14616,7 @@
         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      <ng-container *ngIf=\"showColSettings\">\n        <span class=\"hd-table-col-settings\" nz-dropdown nzTrigger=\"click\" [nzDropdownMenu]=\"menu\"\n          [nzVisible]=\"isDropdownVisible\" (click)=\"confirmDropdown()\" title=\"\u5217\u8BBE\u7F6E\">\n          <svg class=\"hd-table-col-settings-icon\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M4.92031 1.80756C5.02551 1.42884 5.37033 1.16675 5.76339 1.16675H8.23667C8.62973 1.16675 8.97455 1.42884 9.07975 1.80756L9.37802 2.88133L10.4571 2.60273C10.8377 2.50448 11.2371 2.67206 11.4336 3.01245L12.6703 5.15438C12.8668 5.49478 12.8122 5.92445 12.5369 6.20491L11.7561 7.00008L12.5369 7.79525C12.8122 8.07572 12.8668 8.50539 12.6703 8.84579L11.4336 10.9877C11.2371 11.3281 10.8377 11.4957 10.4571 11.3974L9.37802 11.1188L9.07975 12.1926C8.97455 12.5713 8.62973 12.8334 8.23667 12.8334H5.76339C5.37033 12.8334 5.02551 12.5713 4.92031 12.1926L4.62206 11.1189L3.54315 11.3974C3.16258 11.4957 2.76318 11.3281 2.56666 10.9877L1.33001 8.84579C1.13349 8.50539 1.18806 8.07572 1.46343 7.79525L2.24419 7.00008L1.46344 6.20491C1.18806 5.92445 1.13349 5.49478 1.33002 5.15438L2.56666 3.01245C2.76319 2.67206 3.16258 2.50448 3.54316 2.60273L4.62206 2.88127L4.92031 1.80756ZM4.54541 10.843L4.54552 10.8433L4.54541 10.843ZM5.98508 2.33341L5.66952 3.46945C5.54185 3.92906 5.06958 4.20173 4.60771 4.08249L3.46618 3.78778L2.45122 5.54572L3.2773 6.38705C3.6115 6.72742 3.6115 7.27275 3.2773 7.61312L2.45122 8.45444L3.46617 10.2124L4.60771 9.91768C5.06958 9.79844 5.54185 10.0711 5.66952 10.5307L5.98508 11.6667H8.01498L8.33056 10.5307C8.45823 10.071 8.9305 9.79838 9.39237 9.91762L10.5341 10.2124L11.5491 8.45444L10.723 7.61312C10.3888 7.27275 10.3888 6.72742 10.723 6.38705L11.5491 5.54572L10.5341 3.78778L9.39237 4.08254C8.9305 4.20178 8.45823 3.92912 8.33056 3.46951L8.01498 2.33341H5.98508ZM7.00003 5.83342C6.3557 5.83342 5.83337 6.35575 5.83337 7.00008C5.83337 7.64441 6.3557 8.16675 7.00003 8.16675C7.64436 8.16675 8.1667 7.64441 8.1667 7.00008C8.1667 6.35575 7.64436 5.83342 7.00003 5.83342ZM4.6667 7.00008C4.6667 5.71142 5.71137 4.66675 7.00003 4.66675C8.2887 4.66675 9.33337 5.71142 9.33337 7.00008C9.33337 8.28875 8.2887 9.33342 7.00003 9.33342C5.71137 9.33342 4.6667 8.28875 4.6667 7.00008Z\"\n              fill=\"currentColor\" />\n          </svg>\n        </span>\n        <nz-dropdown-menu #menu=\"nzDropdownMenu\">\n          <div class=\"hd-table-col-settings-dropdown\">\n            <div class=\"hd-table-col-settings-list\">\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 class=\"hd-table-col-settings-footer\">\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          </div>\n        </nz-dropdown-menu>\n      </ng-container>\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\" [class.hd-table--virtual]=\"useVirtualScroll\"\n    [class.hd-table--scroll-y]=\"!!(scroll && scroll.y)\" [class.hd-table--scroll-x]=\"!!(scroll && scroll.x)\"\n    [class.hd-table--fluid-x]=\"fluidHorizontal\" [class.hd-table--has-select]=\"showSelected\"\n    [class.hd-table--has-total]=\"showTableTotal\" [nzScroll]=\"scroll\" [nzShowPagination]=\"pagination\"\n    [nzShowSizeChanger]=\"pagination\" [nzShowQuickJumper]=\"pagination\" [nzFrontPagination]=\"useFrontPagination\"\n    nzSize=\"middle\" [nzData]=\"tableData.content\" [nzTotal]=\"getTableTotalCount()\" [(nzPageIndex)]=\"tablePageIndex\"\n    [nzLoading]=\"tableLoading\" [nzPageSizeOptions]=\"[ 10, 50, 100, 200, 500, 1000 ]\" [(nzPageSize)]=\"tablePageSize\"\n    (nzPageSizeChange)=\"pagination ? search(true) : null\" (nzPageIndexChange)=\"pagination ? search(false) : null\"\n    (nzCurrentPageDataChange)=\"showSelected ? currentPageDataChange($event) : null\" [nzShowTotal]=\"tableTotalTemplate\"\n    [nzFooter]=\"showTableTotal ? tableTotalFooter : null\" [nzVirtualScroll]=\"useVirtualScroll\"\n    [nzVirtualItemSize]=\"useVirtualScroll ? effectiveVirtualItemSize : 0\" [nzVirtualForTrackBy]=\"virtualTrackByRow\">\n    <thead (nzSortChange)=\"sort($event)\" nzSingleSort>\n      <tr>\n        <th nzWidth=\"40px\" nzLeft=\"0px\" *ngIf=\"showSelected && selectType !== 'radio'\" nzShowCheckbox\n          [(nzChecked)]=\"isAllDisplayDataChecked\" [nzIndeterminate]=\"isIndeterminate\"\n          (nzCheckedChange)=\"checkAll($event)\"></th>\n        <th nzWidth=\"40px\" nzLeft=\"0px\" *ngIf=\"showSelected && selectType === 'radio'\"></th>\n        <th class=\"hd-table-line-no-col\" [nzWidth]=\"lineNumberColWidthPx\" [nzLeft]=\"lineNumberLeft\"\n          *ngIf=\"showTableTotal\">\u5E8F\u53F7</th>\n        <ng-container *ngFor=\"let col of tableCols\">\n          <th *ngIf=\"col.isShow\" [nzWidth]=\"getColDisplayWidth(col) + 'px'\" [nzAlign]=\"col.align\"\n            [nzLeft]=\"getLeftSticky(col)\" [nzRight]=\"getRightSticky(col)\" nz-resizable nzBounds=\"window\" nzPreview\n            (nzResizeEnd)=\"onResize($event, col)\" [nzShowSort]=\"col.canSort\" [nzSortKey]=\"col.name\"\n            [nzSort]=\"getColSort(col)\">\n            <span class=\"hd-table-col-title\">\n              <span class=\"hd-table-col-require\" *ngIf=\"col.require && col.editType\">*</span>\n              <ng-container *ngIf=\"getTitleParts(col) as titleParts; else plainTitle\">\n                <span class=\"hd-table-title-with-bar\">{{ titleParts[0] }}<i class=\"hd-table-row-no-bar\"></i>{{\n                  titleParts[1] }}</span>\n              </ng-container>\n              <ng-template #plainTitle>{{ col.title }}</ng-template>\n            </span>\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=\"useVirtualScroll\" nz-virtual-scroll let-data let-index=\"index\">\n        <tr class=\"hd-table-virtual-row\" [class.hd-table-row-invalid]=\"isInvalidRow(data)\">\n          <ng-container *ngTemplateOutlet=\"tableCells; context: { $implicit: data, index: index }\"></ng-container>\n        </tr>\n      </ng-template>\n      <ng-container *ngIf=\"!useVirtualScroll\">\n        <tr *ngFor=\"let data of hdTable.data; trackBy: trackByRow; index as i\"\n          [class.hd-table-row-invalid]=\"isInvalidRow(data)\">\n          <ng-container *ngTemplateOutlet=\"tableCells; context: { $implicit: data, index: i }\"></ng-container>\n        </tr>\n      </ng-container>\n    </tbody>\n    <ng-template #tableTotalTemplate>\n      \u5171 {{ getTableTotalCount() }} \u6761\u6570\u636E\n    </ng-template>\n    <ng-template #tableTotalFooter>\n      <!--\n        \u5217\u603B\u5BBD < \u5BB9\u5668\uFF1Ascroll.x=\u5BB9\u5668\u5BBD\uFF0C\u5DEE\u989D\u8865\u5230\u6700\u540E\u4E1A\u52A1\u5217\uFF08\u52FE\u9009\u4FDD\u6301 40\uFF09\uFF1B\u53EF\u62D6\u62FD\u3002\n        \u5217\u603B\u5BBD > \u5BB9\u5668\uFF1Ascroll.x=\u58F0\u660E\u603B\u5BBD\uFF0C\u6A2A\u6EDA\u540C\u6B65\u3002\n      -->\n      <div class=\"hd-table-total-footer\" [class.hd-table-total-footer--fluid]=\"isTotalFooterFluid\"\n        [class.hd-table-total-footer--y-gutter]=\"totalFooterNeedYGutter\">\n        <table class=\"hd-table-total-footer-table\" [style.width]=\"totalFooterTableWidth\">\n          <colgroup>\n            <!-- \u52FE\u9009/\u5E8F\u53F7\u9501\u5BBD\uFF0C\u4E0D\u53C2\u4E0E\u5747\u644A -->\n            <col *ngIf=\"showSelected\" style=\"width: 40px; min-width: 40px; max-width: 40px;\" />\n            <col *ngIf=\"showTableTotal\" [style.width.px]=\"lineNumberColWidth\" [style.min-width.px]=\"lineNumberColWidth\"\n              [style.max-width.px]=\"lineNumberColWidth\" />\n            <ng-container *ngFor=\"let col of tableCols; trackBy: trackByCol\">\n              <col *ngIf=\"col.isShow\" [style.width.px]=\"getColDisplayWidth(col)\" />\n            </ng-container>\n          </colgroup>\n          <tr class=\"hd-table-total\">\n            <td *ngIf=\"showSelected\" class=\"hd-table-total-footer-cell hd-table-total-footer-select\"\n              [class.hd-table-total-footer-sticky-left]=\"!isTotalFooterFluid\" style=\"left: 0;\">&nbsp;</td>\n            <td class=\"hd-table-total-footer-cell hd-table-total-footer-line-no\"\n              [class.hd-table-total-footer-sticky-left]=\"!isTotalFooterFluid\"\n              [style.left]=\"!isTotalFooterFluid ? lineNumberLeft : null\">\u5408\u8BA1</td>\n            <ng-container *ngFor=\"let col of tableCols; let colIndex = index; trackBy: trackByCol\">\n              <td *ngIf=\"col.isShow\" class=\"hd-table-total-footer-cell\"\n                [class.hd-table-total-footer-sticky-left]=\"!isTotalFooterFluid && col.fixed === 'left'\"\n                [class.hd-table-total-footer-sticky-right]=\"!isTotalFooterFluid && col.fixed === 'right'\"\n                [class.hd-table-total-align-left]=\"getTableTotalCellAlign(col, colIndex) === 'left'\"\n                [class.hd-table-total-align-center]=\"getTableTotalCellAlign(col, colIndex) === 'center'\"\n                [class.hd-table-total-align-right]=\"getTableTotalCellAlign(col, colIndex) === 'right'\"\n                [style.left]=\"!isTotalFooterFluid && col.fixed === 'left' ? (col.fixedWidth || 0) + 'px' : null\"\n                [style.right]=\"!isTotalFooterFluid && col.fixed === 'right' ? (col.fixedRightWidth || 0) + 'px' : null\"\n                [ngStyle]=\"{'text-align': getTableTotalCellAlign(col, colIndex)}\">\n                {{ getTableTotalCellValue(col, colIndex) }}\n              </td>\n            </ng-container>\n          </tr>\n        </table>\n      </div>\n    </ng-template>\n  </nz-table>\n</ng-container>\n\n<ng-template #tableCells let-data let-index=\"index\">\n  <td nzWidth=\"40px\" nzLeft=\"0px\" *ngIf=\"showSelected && selectType !== 'radio'\" nzShowCheckbox\n    [nzChecked]=\"mapOfCheckedId[data[selectField]]\" [nzDisabled]=\"isSelectDisabled(data)\"\n    (nzCheckedChange)=\"refreshStatus($event, data)\"></td>\n  <td nzWidth=\"40px\" nzLeft=\"0px\" class=\"hd-table-select-radio\" *ngIf=\"showSelected && selectType === 'radio'\">\n    <label nz-radio [nzDisabled]=\"isSelectDisabled(data)\" [ngModel]=\"!!mapOfCheckedId[data[selectField]]\"\n      (ngModelChange)=\"onRadioSelect($event, data)\"></label>\n  </td>\n  <td class=\"hd-table-line-no-col\" [nzWidth]=\"lineNumberColWidthPx\" [nzLeft]=\"lineNumberLeft\" *ngIf=\"showTableTotal\">{{\n    getLineNumber(index) }}</td>\n  <ng-container *ngFor=\"let col of tableCols; trackBy: trackByCol\">\n    <td *ngIf=\"col.isShow\" [style.max-width.px]=\"getColDisplayWidth(col)\" [nzAlign]=\"col.align\"\n      [nzLeft]=\"getLeftSticky(col)\" [nzRight]=\"getRightSticky(col)\"\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]=\"isDangerBtn(btn, data) ? 'common-danger-btn': ''\"\n                (click)=\"triggerEvent(btn.click || null, data)\">{{ getBtnName(btn, data) }}</a>\n            </ng-container>\n            <ng-template #showConfirmTemplate>\n              <a *ngIf=\"btn.permission ? btn.permission(data) : true\"\n                [class]=\"isDangerBtn(btn, data) ? 'common-danger-btn': ''\" nz-popconfirm\n                [nzPopconfirmTitle]=\"'\u786E\u8BA4\u8981' + getBtnName(btn, data) + '\u5417?'\"\n                (nzOnConfirm)=\"triggerEvent(btn.click || null, data)\">{{\n                getBtnName(btn, data) }}</a>\n            </ng-template>\n          </ng-container>\n        </div>\n      </ng-container>\n      <ng-template #notOperateTemplate>\n        <ng-container *ngIf=\"hasInlineEdit(col); else displayCellTpl\">\n          <div class=\"hd-table-cell-edit\">\n            <ng-container [ngSwitch]=\"col.editType\">\n              <input *ngSwitchCase=\"'input'\" nz-input class=\"hd-table-cell-edit-control\"\n                [placeholder]=\"col.placeholder || ''\" [disabled]=\"isEditDisabled(col, data)\" [ngModel]=\"data[col.name]\"\n                (ngModelChange)=\"onCellChange(col, data, $event)\" />\n              <nz-input-number *ngSwitchCase=\"'inputNumber'\" class=\"hd-table-cell-edit-control\"\n                [nzPlaceHolder]=\"col.placeholder || ''\" [nzDisabled]=\"isEditDisabled(col, data)\"\n                [nzMin]=\"getInputNumberProp(col, 'min', 0)\" [nzMax]=\"getInputNumberProp(col, 'max', 99999999)\"\n                [nzStep]=\"getInputNumberProp(col, 'step', 1)\" [nzPrecision]=\"getInputNumberProp(col, 'precision', 4)\"\n                [ngModel]=\"data[col.name]\" (ngModelChange)=\"onCellChange(col, data, $event)\">\n              </nz-input-number>\n              <nz-select *ngSwitchCase=\"'select'\" class=\"hd-table-cell-edit-control\"\n                [nzPlaceHolder]=\"col.placeholder || '\u8BF7\u9009\u62E9'\" [nzDisabled]=\"isEditDisabled(col, data)\"\n                [nzAllowClear]=\"col.selectOption && col.selectOption.hdAllowClear !== false\"\n                [nzShowSearch]=\"!col.selectOption || col.selectOption.hdShowSearch !== false\"\n                [nzServerSearch]=\"!!(col.selectOption && col.selectOption.hdServerSearch)\" [ngModel]=\"data[col.name]\"\n                (ngModelChange)=\"onSelectChange(col, data, $event)\"\n                (nzOpenChange)=\"onSelectOpenChange(col, data, $event)\" (nzOnSearch)=\"onSelectSearch(col, data, $event)\">\n                <nz-option *ngFor=\"let selectItem of getSelectList(col, data)\"\n                  [nzValue]=\"selectItem[col.selectOption.value]\" [nzLabel]=\"getSelectOptionLabel(col, selectItem)\">\n                </nz-option>\n              </nz-select>\n              <nz-date-picker *ngSwitchCase=\"'date'\" class=\"hd-table-cell-edit-control\"\n                [nzPlaceHolder]=\"col.placeholder || '\u8BF7\u9009\u62E9\u65E5\u671F'\" [nzDisabled]=\"isEditDisabled(col, data)\"\n                [nzDisabledDate]=\"getDisabledDate(col)\" [nzShowToday]=\"isDateShowToday(col)\"\n                [nzShowTime]=\"isDateShowTime(col)\" [nzFormat]=\"getDateFormat(col, false)\" [ngModel]=\"data[col.name]\"\n                (ngModelChange)=\"onCellChange(col, data, $event)\">\n              </nz-date-picker>\n              <nz-range-picker *ngSwitchCase=\"'dateRange'\" class=\"hd-table-cell-edit-control\"\n                [nzPlaceHolder]=\"getRangePlaceholder(col)\" [nzDisabled]=\"isEditDisabled(col, data)\"\n                [nzDisabledDate]=\"getDisabledDate(col)\" [nzFormat]=\"getDateFormat(col, true)\" [ngModel]=\"data[col.name]\"\n                (ngModelChange)=\"onCellChange(col, data, $event)\">\n              </nz-range-picker>\n            </ng-container>\n          </div>\n        </ng-container>\n        <ng-template #displayCellTpl>\n          <div [class.hd-table-cell-with-actions]=\"col.btnList && col.btnList.length\">\n            <div class=\"hd-table-cell-value\" [class.hd-table-cell-value--rowno]=\"hasRowNo(col)\"\n              [class.hd-table-cell-value--edit]=\"isEditable(col, data)\">\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\">\n                    <span *ngIf=\"cell.overflow && !(col.canWarp && showDetail)\" class=\"hd-table-cell-ellipsis\"\n                      nz-tooltip [nzTooltipTitle]=\"cell.title\">{{ cell.display }}</span>\n                    <span *ngIf=\"!cell.overflow || (col.canWarp && showDetail)\">{{ cell.display }}</span>\n                  </ng-container>\n                </hd-status>\n              </ng-container>\n              <ng-template #otherTemplate>\n                <ng-container *ngIf=\"col.click && (!col.canClick || col.canClick(data));else noClickTemplate\">\n                  <ng-container *ngIf=\"(data | hdTableCell:col) as cell\">\n                    <a *ngIf=\"cell.overflow && !(col.canWarp && showDetail)\" class=\"hd-table-cell-ellipsis\" nz-tooltip\n                      [nzTooltipTitle]=\"cell.title\" [ngStyle]=\"{'color': getLinkCellColor(col, data, cell.isEmpty)}\"\n                      (click)=\"triggerEvent(col.click || null, data)\">{{ cell.display }}</a>\n                    <a *ngIf=\"!cell.overflow || (col.canWarp && showDetail)\"\n                      [ngStyle]=\"{'color': getLinkCellColor(col, data, cell.isEmpty)}\"\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 *ngIf=\"cell.overflow && !(col.canWarp && showDetail)\" class=\"hd-table-cell-ellipsis\"\n                      nz-tooltip [nzTooltipTitle]=\"cell.title\" [ngStyle]=\"{'color': getPlainCellColor(col, data)}\">{{\n                      cell.display }}</span>\n                    <span *ngIf=\"!cell.overflow || (col.canWarp && showDetail)\"\n                      [ngStyle]=\"{'color': getPlainCellColor(col, data)}\">{{ cell.display }}</span>\n                  </ng-container>\n                </ng-template>\n              </ng-template>\n              <span class=\"hd-table-row-no\" *ngIf=\"hasRowNo(col) && getRowNoText(col, data, index)\">\n                <i class=\"hd-table-row-no-bar\"></i>{{ getRowNoText(col, data, index) }}\n              </span>\n              <a *ngIf=\"isEditable(col, data)\" class=\"hd-table-edit-icon\" href=\"javascript:;\" title=\"\u7F16\u8F91\"\n                (click)=\"onEditClick($event, col, data)\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n                  aria-hidden=\"true\">\n                  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                    d=\"M8.10797 1.42626C8.44968 1.08456 9.0037 1.08456 9.34541 1.42626L10.9746 3.05542C11.3163 3.39713 11.3163 3.95115 10.9746 4.29286L5.01002 10.2574C4.87077 10.3967 4.68863 10.4849 4.49305 10.5078L2.72936 10.7142C2.18281 10.7782 1.71357 10.3278 1.7551 9.77914L1.89441 7.93871C1.9102 7.73007 2.00024 7.53399 2.14819 7.38604L8.10797 1.42626ZM7.67304 3.51111L8.88972 4.72779L9.94337 3.67414L8.72669 2.45746L7.67304 3.51111ZM8.06477 5.55274L6.84808 4.33606L3.04959 8.13456L2.94515 9.51434L4.25672 9.36079L8.06477 5.55274ZM12.25 12.8333L1.75 12.8333V11.6666L12.25 11.6666V12.8333Z\"\n                    fill=\"currentColor\" />\n                </svg>\n              </a>\n            </div>\n            <div class=\"common-btn-group hd-table-cell-actions\" *ngIf=\"col.btnList && col.btnList.length\">\n              <ng-container *ngFor=\"let btn of col.btnList\">\n                <ng-container *ngIf=\"!needShowConfirm(btn, data);else cellActionConfirmTpl\">\n                  <a *ngIf=\"btn.permission ? btn.permission(data) : true\"\n                    [class]=\"isDangerBtn(btn, data) ? 'common-danger-btn': ''\"\n                    (click)=\"triggerEvent(btn.click || null, data)\">{{ getBtnName(btn, data) }}</a>\n                </ng-container>\n                <ng-template #cellActionConfirmTpl>\n                  <a *ngIf=\"btn.permission ? btn.permission(data) : true\"\n                    [class]=\"isDangerBtn(btn, data) ? 'common-danger-btn': ''\" nz-popconfirm\n                    [nzPopconfirmTitle]=\"'\u786E\u8BA4\u8981' + getBtnName(btn, data) + '\u5417?'\"\n                    (nzOnConfirm)=\"triggerEvent(btn.click || null, data)\">{{\n                    getBtnName(btn, data) }}</a>\n                </ng-template>\n              </ng-container>\n            </div>\n          </div>\n        </ng-template>\n      </ng-template>\n    </td>\n  </ng-container>\n</ng-template>",
+                        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      <ng-container *ngIf=\"showColSettings\">\n        <span class=\"hd-table-col-settings\" nz-dropdown nzTrigger=\"click\" [nzDropdownMenu]=\"menu\"\n          [nzVisible]=\"isDropdownVisible\" (click)=\"confirmDropdown()\" title=\"\u5217\u8BBE\u7F6E\">\n          <svg class=\"hd-table-col-settings-icon\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n              d=\"M4.92031 1.80756C5.02551 1.42884 5.37033 1.16675 5.76339 1.16675H8.23667C8.62973 1.16675 8.97455 1.42884 9.07975 1.80756L9.37802 2.88133L10.4571 2.60273C10.8377 2.50448 11.2371 2.67206 11.4336 3.01245L12.6703 5.15438C12.8668 5.49478 12.8122 5.92445 12.5369 6.20491L11.7561 7.00008L12.5369 7.79525C12.8122 8.07572 12.8668 8.50539 12.6703 8.84579L11.4336 10.9877C11.2371 11.3281 10.8377 11.4957 10.4571 11.3974L9.37802 11.1188L9.07975 12.1926C8.97455 12.5713 8.62973 12.8334 8.23667 12.8334H5.76339C5.37033 12.8334 5.02551 12.5713 4.92031 12.1926L4.62206 11.1189L3.54315 11.3974C3.16258 11.4957 2.76318 11.3281 2.56666 10.9877L1.33001 8.84579C1.13349 8.50539 1.18806 8.07572 1.46343 7.79525L2.24419 7.00008L1.46344 6.20491C1.18806 5.92445 1.13349 5.49478 1.33002 5.15438L2.56666 3.01245C2.76319 2.67206 3.16258 2.50448 3.54316 2.60273L4.62206 2.88127L4.92031 1.80756ZM4.54541 10.843L4.54552 10.8433L4.54541 10.843ZM5.98508 2.33341L5.66952 3.46945C5.54185 3.92906 5.06958 4.20173 4.60771 4.08249L3.46618 3.78778L2.45122 5.54572L3.2773 6.38705C3.6115 6.72742 3.6115 7.27275 3.2773 7.61312L2.45122 8.45444L3.46617 10.2124L4.60771 9.91768C5.06958 9.79844 5.54185 10.0711 5.66952 10.5307L5.98508 11.6667H8.01498L8.33056 10.5307C8.45823 10.071 8.9305 9.79838 9.39237 9.91762L10.5341 10.2124L11.5491 8.45444L10.723 7.61312C10.3888 7.27275 10.3888 6.72742 10.723 6.38705L11.5491 5.54572L10.5341 3.78778L9.39237 4.08254C8.9305 4.20178 8.45823 3.92912 8.33056 3.46951L8.01498 2.33341H5.98508ZM7.00003 5.83342C6.3557 5.83342 5.83337 6.35575 5.83337 7.00008C5.83337 7.64441 6.3557 8.16675 7.00003 8.16675C7.64436 8.16675 8.1667 7.64441 8.1667 7.00008C8.1667 6.35575 7.64436 5.83342 7.00003 5.83342ZM4.6667 7.00008C4.6667 5.71142 5.71137 4.66675 7.00003 4.66675C8.2887 4.66675 9.33337 5.71142 9.33337 7.00008C9.33337 8.28875 8.2887 9.33342 7.00003 9.33342C5.71137 9.33342 4.6667 8.28875 4.6667 7.00008Z\"\n              fill=\"currentColor\" />\n          </svg>\n        </span>\n        <nz-dropdown-menu #menu=\"nzDropdownMenu\">\n          <div class=\"hd-table-col-settings-dropdown\">\n            <div class=\"hd-table-col-settings-list\">\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 class=\"hd-table-col-settings-footer\">\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          </div>\n        </nz-dropdown-menu>\n      </ng-container>\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\" [class.hd-table--virtual]=\"useVirtualScroll\"\n    [class.hd-table--scroll-y]=\"!!(scroll && scroll.y)\" [class.hd-table--scroll-x]=\"!!(scroll && scroll.x)\"\n    [class.hd-table--fluid-x]=\"fluidHorizontal\" [class.hd-table--has-select]=\"showSelected\"\n    [class.hd-table--has-total]=\"showTableTotal\" [nzScroll]=\"scroll\" [nzShowPagination]=\"pagination\"\n    [nzShowSizeChanger]=\"pagination\" [nzShowQuickJumper]=\"pagination\" [nzFrontPagination]=\"useFrontPagination\"\n    nzSize=\"middle\" [nzData]=\"tableData.content\" [nzTotal]=\"getTableTotalCount()\" [(nzPageIndex)]=\"tablePageIndex\"\n    [nzLoading]=\"tableLoading\" [nzPageSizeOptions]=\"[ 10, 50, 100, 200, 500, 1000 ]\" [(nzPageSize)]=\"tablePageSize\"\n    (nzPageSizeChange)=\"pagination ? search(true) : null\" (nzPageIndexChange)=\"pagination ? search(false) : null\"\n    (nzCurrentPageDataChange)=\"showSelected ? currentPageDataChange($event) : null\" [nzShowTotal]=\"tableTotalTemplate\"\n    [nzFooter]=\"showTableTotal ? tableTotalFooter : null\" [nzVirtualScroll]=\"useVirtualScroll\"\n    [nzVirtualItemSize]=\"useVirtualScroll ? effectiveVirtualItemSize : 0\" [nzVirtualForTrackBy]=\"virtualTrackByRow\">\n    <thead (nzSortChange)=\"sort($event)\" nzSingleSort>\n      <tr>\n        <th nzWidth=\"40px\" nzLeft=\"0px\" *ngIf=\"showSelected && selectType !== 'radio'\" nzShowCheckbox\n          [(nzChecked)]=\"isAllDisplayDataChecked\" [nzIndeterminate]=\"isIndeterminate\"\n          (nzCheckedChange)=\"checkAll($event)\"></th>\n        <th nzWidth=\"40px\" nzLeft=\"0px\" *ngIf=\"showSelected && selectType === 'radio'\"></th>\n        <th class=\"hd-table-line-no-col\" [nzWidth]=\"lineNumberColWidthPx\" [nzLeft]=\"lineNumberLeft\"\n          *ngIf=\"showTableTotal\">\u5E8F\u53F7</th>\n        <ng-container *ngFor=\"let col of tableCols\">\n          <th *ngIf=\"col.isShow\" [nzWidth]=\"getColDisplayWidth(col) + 'px'\" [nzAlign]=\"col.align\"\n            [nzLeft]=\"getLeftSticky(col)\" [nzRight]=\"getRightSticky(col)\" nz-resizable nzBounds=\"window\" nzPreview\n            (nzResizeEnd)=\"onResize($event, col)\" [nzShowSort]=\"col.canSort\" [nzSortKey]=\"col.name\"\n            [nzSort]=\"getColSort(col)\">\n            <span class=\"hd-table-col-title\">\n              <span class=\"hd-table-col-require\" *ngIf=\"col.require && col.editType\">*</span>\n              <ng-container *ngIf=\"getTitleParts(col) as titleParts; else plainTitle\">\n                <span class=\"hd-table-title-with-bar\">{{ titleParts[0] }}<i class=\"hd-table-row-no-bar\"></i>{{\n                  titleParts[1] }}</span>\n              </ng-container>\n              <ng-template #plainTitle>{{ col.title }}</ng-template>\n            </span>\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=\"useVirtualScroll\" nz-virtual-scroll let-data let-index=\"index\">\n        <tr class=\"hd-table-virtual-row\" [class.hd-table-row-invalid]=\"isInvalidRow(data)\">\n          <ng-container *ngTemplateOutlet=\"tableCells; context: { $implicit: data, index: index }\"></ng-container>\n        </tr>\n      </ng-template>\n      <ng-container *ngIf=\"!useVirtualScroll\">\n        <tr *ngFor=\"let data of hdTable.data; trackBy: trackByRow; index as i\"\n          [class.hd-table-row-invalid]=\"isInvalidRow(data)\">\n          <ng-container *ngTemplateOutlet=\"tableCells; context: { $implicit: data, index: i }\"></ng-container>\n        </tr>\n      </ng-container>\n    </tbody>\n    <ng-template #tableTotalTemplate>\n      \u5171 {{ getTableTotalCount() }} \u6761\u6570\u636E\n    </ng-template>\n    <ng-template #tableTotalFooter>\n      <!--\n        \u5217\u603B\u5BBD < \u5BB9\u5668\uFF1Ascroll.x=\u5BB9\u5668\u5BBD\uFF0C\u5DEE\u989D\u6309\u58F0\u660E\u5BBD\u6BD4\u4F8B\u5206\u5230\u5404\u4E1A\u52A1\u5217\uFF08\u52FE\u9009\u4FDD\u6301 40\uFF09\uFF1B\u53EF\u62D6\u62FD\u3002\n        \u5217\u603B\u5BBD > \u5BB9\u5668\uFF1Ascroll.x=\u58F0\u660E\u603B\u5BBD\uFF0C\u6A2A\u6EDA\u540C\u6B65\u3002\n      -->\n      <div class=\"hd-table-total-footer\" [class.hd-table-total-footer--fluid]=\"isTotalFooterFluid\"\n        [class.hd-table-total-footer--y-gutter]=\"totalFooterNeedYGutter\">\n        <table class=\"hd-table-total-footer-table\" [style.width]=\"totalFooterTableWidth\">\n          <colgroup>\n            <!-- \u52FE\u9009/\u5E8F\u53F7\u9501\u5BBD\uFF0C\u4E0D\u53C2\u4E0E\u5747\u644A -->\n            <col *ngIf=\"showSelected\" style=\"width: 40px; min-width: 40px; max-width: 40px;\" />\n            <col *ngIf=\"showTableTotal\" [style.width.px]=\"lineNumberColWidth\" [style.min-width.px]=\"lineNumberColWidth\"\n              [style.max-width.px]=\"lineNumberColWidth\" />\n            <ng-container *ngFor=\"let col of tableCols; trackBy: trackByCol\">\n              <col *ngIf=\"col.isShow\" [style.width.px]=\"getColDisplayWidth(col)\" />\n            </ng-container>\n          </colgroup>\n          <tr class=\"hd-table-total\">\n            <td *ngIf=\"showSelected\" class=\"hd-table-total-footer-cell hd-table-total-footer-select\"\n              [class.hd-table-total-footer-sticky-left]=\"!isTotalFooterFluid\" style=\"left: 0;\">&nbsp;</td>\n            <td class=\"hd-table-total-footer-cell hd-table-total-footer-line-no\"\n              [class.hd-table-total-footer-sticky-left]=\"!isTotalFooterFluid\"\n              [style.left]=\"!isTotalFooterFluid ? lineNumberLeft : null\">\u5408\u8BA1</td>\n            <ng-container *ngFor=\"let col of tableCols; let colIndex = index; trackBy: trackByCol\">\n              <td *ngIf=\"col.isShow\" class=\"hd-table-total-footer-cell\"\n                [class.hd-table-total-footer-sticky-left]=\"!isTotalFooterFluid && col.fixed === 'left'\"\n                [class.hd-table-total-footer-sticky-right]=\"!isTotalFooterFluid && col.fixed === 'right'\"\n                [class.hd-table-total-align-left]=\"getTableTotalCellAlign(col, colIndex) === 'left'\"\n                [class.hd-table-total-align-center]=\"getTableTotalCellAlign(col, colIndex) === 'center'\"\n                [class.hd-table-total-align-right]=\"getTableTotalCellAlign(col, colIndex) === 'right'\"\n                [style.left]=\"!isTotalFooterFluid && col.fixed === 'left' ? (col.fixedWidth || 0) + 'px' : null\"\n                [style.right]=\"!isTotalFooterFluid && col.fixed === 'right' ? (col.fixedRightWidth || 0) + 'px' : null\"\n                [ngStyle]=\"{'text-align': getTableTotalCellAlign(col, colIndex)}\">\n                {{ getTableTotalCellValue(col, colIndex) }}\n              </td>\n            </ng-container>\n          </tr>\n        </table>\n      </div>\n    </ng-template>\n  </nz-table>\n</ng-container>\n\n<ng-template #tableCells let-data let-index=\"index\">\n  <td nzWidth=\"40px\" nzLeft=\"0px\" *ngIf=\"showSelected && selectType !== 'radio'\" nzShowCheckbox\n    [nzChecked]=\"mapOfCheckedId[data[selectField]]\" [nzDisabled]=\"isSelectDisabled(data)\"\n    (nzCheckedChange)=\"refreshStatus($event, data)\"></td>\n  <td nzWidth=\"40px\" nzLeft=\"0px\" class=\"hd-table-select-radio\" *ngIf=\"showSelected && selectType === 'radio'\">\n    <label nz-radio [nzDisabled]=\"isSelectDisabled(data)\" [ngModel]=\"!!mapOfCheckedId[data[selectField]]\"\n      (ngModelChange)=\"onRadioSelect($event, data)\"></label>\n  </td>\n  <td class=\"hd-table-line-no-col\" [nzWidth]=\"lineNumberColWidthPx\" [nzLeft]=\"lineNumberLeft\" *ngIf=\"showTableTotal\">{{\n    getLineNumber(index) }}</td>\n  <ng-container *ngFor=\"let col of tableCols; trackBy: trackByCol\">\n    <td *ngIf=\"col.isShow\" [style.max-width.px]=\"getColDisplayWidth(col)\" [nzAlign]=\"col.align\"\n      [nzLeft]=\"getLeftSticky(col)\" [nzRight]=\"getRightSticky(col)\"\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]=\"isDangerBtn(btn, data) ? 'common-danger-btn': ''\"\n                (click)=\"triggerEvent(btn.click || null, data)\">{{ getBtnName(btn, data) }}</a>\n            </ng-container>\n            <ng-template #showConfirmTemplate>\n              <a *ngIf=\"btn.permission ? btn.permission(data) : true\"\n                [class]=\"isDangerBtn(btn, data) ? 'common-danger-btn': ''\" nz-popconfirm\n                [nzPopconfirmTitle]=\"'\u786E\u8BA4\u8981' + getBtnName(btn, data) + '\u5417?'\"\n                (nzOnConfirm)=\"triggerEvent(btn.click || null, data)\">{{\n                getBtnName(btn, data) }}</a>\n            </ng-template>\n          </ng-container>\n        </div>\n      </ng-container>\n      <ng-template #notOperateTemplate>\n        <ng-container *ngIf=\"hasInlineEdit(col); else displayCellTpl\">\n          <div class=\"hd-table-cell-edit\">\n            <ng-container [ngSwitch]=\"col.editType\">\n              <input *ngSwitchCase=\"'input'\" nz-input class=\"hd-table-cell-edit-control\"\n                [placeholder]=\"col.placeholder || ''\" [disabled]=\"isEditDisabled(col, data)\" [ngModel]=\"data[col.name]\"\n                (ngModelChange)=\"onCellChange(col, data, $event)\" />\n              <nz-input-number *ngSwitchCase=\"'inputNumber'\" class=\"hd-table-cell-edit-control\"\n                [nzPlaceHolder]=\"col.placeholder || ''\" [nzDisabled]=\"isEditDisabled(col, data)\"\n                [nzMin]=\"getInputNumberProp(col, 'min', 0)\" [nzMax]=\"getInputNumberProp(col, 'max', 99999999)\"\n                [nzStep]=\"getInputNumberProp(col, 'step', 1)\" [nzPrecision]=\"getInputNumberProp(col, 'precision', 4)\"\n                [ngModel]=\"data[col.name]\" (ngModelChange)=\"onCellChange(col, data, $event)\">\n              </nz-input-number>\n              <nz-select *ngSwitchCase=\"'select'\" class=\"hd-table-cell-edit-control\"\n                [nzPlaceHolder]=\"col.placeholder || '\u8BF7\u9009\u62E9'\" [nzDisabled]=\"isEditDisabled(col, data)\"\n                [nzAllowClear]=\"col.selectOption && col.selectOption.hdAllowClear !== false\"\n                [nzShowSearch]=\"!col.selectOption || col.selectOption.hdShowSearch !== false\"\n                [nzServerSearch]=\"!!(col.selectOption && col.selectOption.hdServerSearch)\" [ngModel]=\"data[col.name]\"\n                (ngModelChange)=\"onSelectChange(col, data, $event)\"\n                (nzOpenChange)=\"onSelectOpenChange(col, data, $event)\" (nzOnSearch)=\"onSelectSearch(col, data, $event)\">\n                <nz-option *ngFor=\"let selectItem of getSelectList(col, data)\"\n                  [nzValue]=\"selectItem[col.selectOption.value]\" [nzLabel]=\"getSelectOptionLabel(col, selectItem)\">\n                </nz-option>\n              </nz-select>\n              <nz-date-picker *ngSwitchCase=\"'date'\" class=\"hd-table-cell-edit-control\"\n                [nzPlaceHolder]=\"col.placeholder || '\u8BF7\u9009\u62E9\u65E5\u671F'\" [nzDisabled]=\"isEditDisabled(col, data)\"\n                [nzDisabledDate]=\"getDisabledDate(col)\" [nzShowToday]=\"isDateShowToday(col)\"\n                [nzShowTime]=\"isDateShowTime(col)\" [nzFormat]=\"getDateFormat(col, false)\" [ngModel]=\"data[col.name]\"\n                (ngModelChange)=\"onCellChange(col, data, $event)\">\n              </nz-date-picker>\n              <nz-range-picker *ngSwitchCase=\"'dateRange'\" class=\"hd-table-cell-edit-control\"\n                [nzPlaceHolder]=\"getRangePlaceholder(col)\" [nzDisabled]=\"isEditDisabled(col, data)\"\n                [nzDisabledDate]=\"getDisabledDate(col)\" [nzFormat]=\"getDateFormat(col, true)\" [ngModel]=\"data[col.name]\"\n                (ngModelChange)=\"onCellChange(col, data, $event)\">\n              </nz-range-picker>\n            </ng-container>\n          </div>\n        </ng-container>\n        <ng-template #displayCellTpl>\n          <div [class.hd-table-cell-with-actions]=\"col.btnList && col.btnList.length\">\n            <div class=\"hd-table-cell-value\" [class.hd-table-cell-value--rowno]=\"hasRowNo(col)\"\n              [class.hd-table-cell-value--edit]=\"isEditable(col, data)\">\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\">\n                    <span *ngIf=\"cell.overflow && !(col.canWarp && showDetail)\" class=\"hd-table-cell-ellipsis\"\n                      nz-tooltip [nzTooltipTitle]=\"cell.title\">{{ cell.display }}</span>\n                    <span *ngIf=\"!cell.overflow || (col.canWarp && showDetail)\">{{ cell.display }}</span>\n                  </ng-container>\n                </hd-status>\n              </ng-container>\n              <ng-template #otherTemplate>\n                <ng-container *ngIf=\"col.click && (!col.canClick || col.canClick(data));else noClickTemplate\">\n                  <ng-container *ngIf=\"(data | hdTableCell:col) as cell\">\n                    <a *ngIf=\"cell.overflow && !(col.canWarp && showDetail)\" class=\"hd-table-cell-ellipsis\" nz-tooltip\n                      [nzTooltipTitle]=\"cell.title\" [ngStyle]=\"{'color': getLinkCellColor(col, data, cell.isEmpty)}\"\n                      (click)=\"triggerEvent(col.click || null, data)\">{{ cell.display }}</a>\n                    <a *ngIf=\"!cell.overflow || (col.canWarp && showDetail)\"\n                      [ngStyle]=\"{'color': getLinkCellColor(col, data, cell.isEmpty)}\"\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 *ngIf=\"cell.overflow && !(col.canWarp && showDetail)\" class=\"hd-table-cell-ellipsis\"\n                      nz-tooltip [nzTooltipTitle]=\"cell.title\" [ngStyle]=\"{'color': getPlainCellColor(col, data)}\">{{\n                      cell.display }}</span>\n                    <span *ngIf=\"!cell.overflow || (col.canWarp && showDetail)\"\n                      [ngStyle]=\"{'color': getPlainCellColor(col, data)}\">{{ cell.display }}</span>\n                  </ng-container>\n                </ng-template>\n              </ng-template>\n              <span class=\"hd-table-row-no\" *ngIf=\"hasRowNo(col) && getRowNoText(col, data, index)\">\n                <i class=\"hd-table-row-no-bar\"></i>{{ getRowNoText(col, data, index) }}\n              </span>\n              <a *ngIf=\"isEditable(col, data)\" class=\"hd-table-edit-icon\" href=\"javascript:;\" title=\"\u7F16\u8F91\"\n                (click)=\"onEditClick($event, col, data)\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n                  aria-hidden=\"true\">\n                  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                    d=\"M8.10797 1.42626C8.44968 1.08456 9.0037 1.08456 9.34541 1.42626L10.9746 3.05542C11.3163 3.39713 11.3163 3.95115 10.9746 4.29286L5.01002 10.2574C4.87077 10.3967 4.68863 10.4849 4.49305 10.5078L2.72936 10.7142C2.18281 10.7782 1.71357 10.3278 1.7551 9.77914L1.89441 7.93871C1.9102 7.73007 2.00024 7.53399 2.14819 7.38604L8.10797 1.42626ZM7.67304 3.51111L8.88972 4.72779L9.94337 3.67414L8.72669 2.45746L7.67304 3.51111ZM8.06477 5.55274L6.84808 4.33606L3.04959 8.13456L2.94515 9.51434L4.25672 9.36079L8.06477 5.55274ZM12.25 12.8333L1.75 12.8333V11.6666L12.25 11.6666V12.8333Z\"\n                    fill=\"currentColor\" />\n                </svg>\n              </a>\n            </div>\n            <div class=\"common-btn-group hd-table-cell-actions\" *ngIf=\"col.btnList && col.btnList.length\">\n              <ng-container *ngFor=\"let btn of col.btnList\">\n                <ng-container *ngIf=\"!needShowConfirm(btn, data);else cellActionConfirmTpl\">\n                  <a *ngIf=\"btn.permission ? btn.permission(data) : true\"\n                    [class]=\"isDangerBtn(btn, data) ? 'common-danger-btn': ''\"\n                    (click)=\"triggerEvent(btn.click || null, data)\">{{ getBtnName(btn, data) }}</a>\n                </ng-container>\n                <ng-template #cellActionConfirmTpl>\n                  <a *ngIf=\"btn.permission ? btn.permission(data) : true\"\n                    [class]=\"isDangerBtn(btn, data) ? 'common-danger-btn': ''\" nz-popconfirm\n                    [nzPopconfirmTitle]=\"'\u786E\u8BA4\u8981' + getBtnName(btn, data) + '\u5417?'\"\n                    (nzOnConfirm)=\"triggerEvent(btn.click || null, data)\">{{\n                    getBtnName(btn, data) }}</a>\n                </ng-template>\n              </ng-container>\n            </div>\n          </div>\n        </ng-template>\n      </ng-template>\n    </td>\n  </ng-container>\n</ng-template>",
                         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--multiple .ant-select-selection__rendered>ul>li.ant-select-search--inline:only-child{margin-left:4px}::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}::ng-deep .hd-table-container .ant-table-td-left-sticky,::ng-deep .hd-table-container .ant-table-td-right-sticky,::ng-deep .hd-table-container .ant-table-th-left-sticky,::ng-deep .hd-table-container .ant-table-th-right-sticky{z-index:2;transform:translateZ(0)}::ng-deep .hd-table-container .ant-table-thead>tr>th.ant-table-th-left-sticky,::ng-deep .hd-table-container .ant-table-thead>tr>th.ant-table-th-right-sticky{background:#f5f8f6!important}::ng-deep .hd-table-container .ant-table-tbody>tr>td.ant-table-td-left-sticky,::ng-deep .hd-table-container .ant-table-tbody>tr>td.ant-table-td-right-sticky{background:#fff}::ng-deep .hd-table-container .ant-table-tbody>tr.ant-table-row-hover>td.ant-table-td-left-sticky,::ng-deep .hd-table-container .ant-table-tbody>tr.ant-table-row-hover>td.ant-table-td-right-sticky,::ng-deep .hd-table-container .ant-table-tbody>tr:hover>td.ant-table-td-left-sticky,::ng-deep .hd-table-container .ant-table-tbody>tr:hover>td.ant-table-td-right-sticky{background:#ecf8f1!important}::ng-deep .hd-table-container .ant-table-scroll-position-left .ant-table-td-right-sticky,::ng-deep .hd-table-container .ant-table-scroll-position-left .ant-table-th-right-sticky,::ng-deep .hd-table-container .ant-table-scroll-position-middle .ant-table-td-right-sticky,::ng-deep .hd-table-container .ant-table-scroll-position-middle .ant-table-th-right-sticky,::ng-deep .hd-table-container .ant-table-scroll-position-right .ant-table-td-right-sticky,::ng-deep .hd-table-container .ant-table-scroll-position-right .ant-table-th-right-sticky{box-shadow:none!important}::ng-deep .hd-table-container .ant-table-fixed-right{right:0!important}: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-pagination-options .ant-select,::ng-deep .ant-pagination-options .ant-select-selection--single{min-width:100px}::ng-deep .ant-pagination-options-size-changer.ant-select{min-width:100px}::ng-deep .ant-time-picker{width:100%}::ng-deep .cdk-overlay-pane .hd-cascader-menus.ant-cascader-menus>.ant-cascader-menu:only-child{width:-webkit-max-content!important;width:-moz-max-content!important;width:max-content!important;min-width:var(--hd-cascader-menu-min-width,auto);max-width:560px}::ng-deep .cdk-overlay-pane .hd-cascader-menus.ant-cascader-menus>.ant-cascader-menu:only-child .ant-cascader-menu-item{white-space:nowrap}.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-col-settings{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:32px;height:32px;padding:0;margin-left:12px;cursor:pointer;color:#2a3634;background:0 0;border:1px solid #e5e6eb;border-radius:4px;vertical-align:middle;flex-shrink:0}.hd-table-col-settings:hover{color:#20b95d;background:#f5f8f6;border-color:#20b95d}.hd-table-col-settings .hd-table-col-settings-icon{display:block;width:14px;height:14px;flex-shrink:0}.hd-table-cell-with-actions{display:inline-flex;flex-wrap:wrap;align-items:center;-moz-column-gap:12px;column-gap:12px;row-gap:6px;max-width:100%}.hd-table-cell-with-actions .hd-table-cell-value{min-width:0}.hd-table-cell-with-actions .hd-table-cell-actions{flex-shrink:0}.hd-table-col-settings-dropdown{background:#fff;border:1px solid #e5e6eb;border-radius:4px;box-shadow:0 6px 16px rgba(0,0,0,.08),0 3px 6px rgba(0,0,0,.06);overflow:hidden}.hd-table-col-settings-list{max-height:400px;overflow-y:auto}.hd-table-col-settings-footer{text-align:right;background:#fff;padding:4px;border-top:1px solid #f0f0f0}.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 .ant-table-tbody>tr>td.hd-table-line-no-col,.hd-table-container ::ng-deep .ant-table-thead>tr>th.hd-table-line-no-col{width:72px!important;min-width:72px!important;max-width:72px!important;box-sizing:border-box}.hd-table-container ::ng-deep .ant-table-tbody>tr>td.ant-table-selection-column,.hd-table-container ::ng-deep .ant-table-thead>tr>th.ant-table-selection-column{width:40px!important;min-width:40px!important;max-width:40px!important;box-sizing:border-box;padding-left:8px!important;padding-right:8px!important}.hd-table-container .hd-table-cell-value--edit,.hd-table-container .hd-table-cell-value--rowno{display:inline-flex;align-items:center;min-width:0}.hd-table-container .hd-table-cell-value--edit>a:not(.hd-table-edit-icon),.hd-table-container .hd-table-cell-value--edit>hd-status,.hd-table-container .hd-table-cell-value--edit>span:not(.hd-table-row-no),.hd-table-container .hd-table-cell-value--rowno>a:not(.hd-table-edit-icon),.hd-table-container .hd-table-cell-value--rowno>hd-status,.hd-table-container .hd-table-cell-value--rowno>span:not(.hd-table-row-no){min-width:0}.hd-table-container .hd-table-row-no{display:inline-flex;flex-shrink:0;align-items:center;margin-left:4px;color:#1d1f29;font-size:14px;line-height:22px}.hd-table-container .hd-table-row-no-bar{display:inline-block;flex:0 0 auto;align-self:center;width:1px;height:14px;margin-right:4px;background:#1d1f29;vertical-align:middle}.hd-table-container .hd-table-edit-icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;margin-left:2px;width:14px;height:14px;color:#20b95d;line-height:1;cursor:pointer}.hd-table-container .hd-table-edit-icon:hover{color:#20bd62}.hd-table-container .hd-table-edit-icon svg{display:block;width:14px;height:14px}.hd-table-container .hd-table-col-title{display:inline-flex;align-items:center}.hd-table-container .hd-table-col-require{margin-right:4px;color:#f5222d;font-family:SimSun,sans-serif}.hd-table-container .hd-table-title-with-bar{display:inline-flex;align-items:center}.hd-table-container .hd-table-title-with-bar .hd-table-row-no-bar{width:1px;height:14px;margin:0 4px;align-self:center}.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid.ant-table-row-hover>td,.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid.ant-table-row-hover>td.ant-table-td-left-sticky,.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid.ant-table-row-hover>td.ant-table-td-right-sticky,.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid:hover>td,.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid:hover>td.ant-table-td-left-sticky,.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid:hover>td.ant-table-td-right-sticky,.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid>td,.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid>td.ant-table-td-left-sticky,.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid>td.ant-table-td-right-sticky{background:#f7f8fa!important;color:#868a9c!important}.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid .common-btn-group>a{color:#20b95d!important}.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid .common-btn-group>a:hover{color:#20bd62!important}.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid .common-btn-group .common-danger-btn:hover{color:#f05b24!important}.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid .hd-table-cell-value>a{color:#20b95d}.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid .common-billNumber>a{color:#3b77e3}.hd-table-container ::ng-deep .ant-table-tbody>tr.hd-table-row-invalid .hd-status-text{color:#868a9c!important}.hd-table-container ::ng-deep cdk-virtual-scroll-viewport.ant-table-body .hd-table-virtual-row>td{box-sizing:border-box}.hd-table-container.hd-table--scroll-x ::ng-deep .ant-table-body>table,.hd-table-container.hd-table--scroll-x ::ng-deep .ant-table-header>table,.hd-table-container.hd-table--scroll-x ::ng-deep .cdk-virtual-scroll-content-wrapper>table{table-layout:fixed}.hd-table-container:not(.hd-table--scroll-y):not(.hd-table--scroll-x) ::ng-deep .ant-table-body{max-height:none!important;overflow-y:visible!important}.hd-table-container.hd-table--scroll-x:not(.hd-table--scroll-y) ::ng-deep .ant-table-body{overflow-y:hidden!important}.hd-table-container.hd-table--fluid-x ::ng-deep .ant-table-body{overflow-x:hidden!important}.hd-table-container.hd-table--fluid-x.hd-table--scroll-y ::ng-deep .ant-table-header{margin-bottom:0!important;padding-bottom:0!important;overflow-x:hidden!important}.hd-table-container.hd-table--has-total ::ng-deep .ant-table-footer{padding:0;overflow:hidden;background:#fafafa;border-top:1px solid #e8e8e8}.hd-table-total-footer{width:100%;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;background:#fafafa;scrollbar-width:thin;scrollbar-color:transparent transparent}.hd-table-total-footer::-webkit-scrollbar{width:12px;height:0}.hd-table-total-footer::-webkit-scrollbar-track{background:0 0}.hd-table-total-footer::-webkit-scrollbar-thumb{background:padding-box;border:4px solid transparent}.hd-table-total-footer::-webkit-scrollbar-corner{background:0 0}.hd-table-total-footer.hd-table-total-footer--y-gutter{overflow-y:scroll}.hd-table-total-footer.hd-table-total-footer--fluid{overflow-x:hidden}.hd-table-total-footer-table{table-layout:fixed;border-collapse:separate;border-spacing:0}.hd-table-total-footer-cell{padding:12px 8px;font-weight:500;background:#fafafa;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:0}.hd-table-total-footer-cell.hd-table-total-align-left{text-align:left!important}.hd-table-total-footer-cell.hd-table-total-align-center{text-align:center!important}.hd-table-total-footer-cell.hd-table-total-align-right{text-align:right!important}.hd-table-select-radio{text-align:center}.hd-table-select-radio ::ng-deep .ant-radio-wrapper{margin-right:0}.hd-table-total-footer-select{width:40px;min-width:40px;max-width:40px;padding-left:8px;padding-right:8px;text-align:center}.hd-table-total-footer-line-no{width:72px;min-width:72px;max-width:72px}.hd-table-total-footer-sticky-left,.hd-table-total-footer-sticky-right{position:-webkit-sticky;position:sticky;z-index:2;background:#fafafa}::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}.hd-table-cell-ellipsis{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.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}::ng-deep .ant-table-th-right-sticky .nz-resizable-handle-right{right:0}.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}.hd-table-cell-edit{width:100%;min-width:0}.hd-table-cell-edit-control{width:100%!important}::ng-deep .hd-table-cell-edit .ant-calendar-picker,::ng-deep .hd-table-cell-edit .ant-input,::ng-deep .hd-table-cell-edit .ant-input-number,::ng-deep .hd-table-cell-edit .ant-select{width:100%}::ng-deep .hd-table-cell-edit .ant-input,::ng-deep .hd-table-cell-edit .ant-input-number,::ng-deep .hd-table-cell-edit .ant-select-selection{height:32px}::ng-deep .hd-table-cell-edit .ant-input-number-input{height:30px}::ng-deep .hd-table-cell-edit .ant-select-selection__rendered{line-height:30px}"]
                     }] }
@@ -14681,28 +14854,26 @@
          */
         HdTableComponent.prototype.virtualScrollActive;
         /**
-         * 列宽合计（含勾选/序号 + fluid 补宽），footer 表宽与横向 scroll 共用
+         * 实际渲染列宽合计（含勾选/序号 + 补宽），合计 footer 表宽用
          * @type {?}
          */
         HdTableComponent.prototype.tableColWidthTotal;
         /**
-         * fluid：声明列总宽 < 容器时，把差额补到最后一列业务列（不改缓存宽），
-         * 并设 scroll.x = 容器宽，避免表宽 100% 均摊撑开勾选列；拖拽改宽仍写 col.width。
+         * 待按比例分给各业务列的总补宽；只影响展示，不写回 col.width（列宽缓存、拖拽仍用声明宽）
          * @type {?}
          */
         HdTableComponent.prototype.fluidExtraWidth;
         /**
-         * 列总宽未超出容器（fluid 补宽吃满）：不需要真正横滚，
-         * 用于关掉 ng-zorro fixed-header 带来的常驻 X 轴滚动条。
+         * 列少、靠补宽吃满容器：模板据此加 hd-table--fluid-x，隐藏 fixed-header 常驻的横滚槽
          * @type {?}
          */
         HdTableComponent.prototype.fluidHorizontal;
         /**
-         * fluid 补宽目标列缓存，避免模板每格 CD 时反复扫 tableCols
+         * 各业务列分到的补宽（按列对象取，applyHorizontalLayout 时整表重建）
          * @type {?}
          * @private
          */
-        HdTableComponent.prototype.fluidExtraTargetCol;
+        HdTableComponent.prototype.fluidExtraByCol;
         /**
          * 数据更新后待复位纵向滚动位置
          * @type {?}