bkui-vue 2.0.1-beta.27 → 2.0.1-beta.28.table.1

package/lib/table/index.js

@@ -17467,7 +17467,7 @@ var COLUMN_ATTRIBUTE = {
 /**
  * Y 轴滚动条宽度
  */
-var SCROLLY_WIDTH = 0;
+var SCROLLY_WIDTH = 8;
 /**
  * 默认行高
  */
@@ -18125,7 +18125,8 @@ var CELL_EVENT_TYPES = defineProperty_defineProperty(defineProperty_defineProper
   var afterResize = _ref.afterResize;
   var getColumnAttribute = columns.getColumnAttribute,
     getColumnOrderWidth = columns.getColumnOrderWidth,
-    setColumnAttribute = columns.setColumnAttribute;
+    setColumnAttribute = columns.setColumnAttribute,
+    setNextColumnWidth = columns.setNextColumnWidth;
   var getColListener = function getColListener(col) {
     return getColumnAttribute(col, COLUMN_ATTRIBUTE.LISTENERS);
   };
@@ -18143,7 +18144,7 @@ var CELL_EVENT_TYPES = defineProperty_defineProperty(defineProperty_defineProper
   var dragColumn = null;
   var dragStartOffsetX = 0;
   var dragOffsetX = (0,external_vue_namespaceObject.ref)(-1000);
-  var ORDER_LIST = [COLUMN_ATTRIBUTE.RESIZE_WIDTH, COLUMN_ATTRIBUTE.CALC_WIDTH];
+  var ORDER_LIST = [COLUMN_ATTRIBUTE.WIDTH];
   var stopDefaultEvent = function stopDefaultEvent(e) {
     e.stopImmediatePropagation();
     e.stopPropagation();
@@ -18157,8 +18158,8 @@ var CELL_EVENT_TYPES = defineProperty_defineProperty(defineProperty_defineProper
     var resolveWidth = getColumnOrderWidth(dragColumn, ORDER_LIST) + diff;
     var minWidth = getColumnOrderWidth(dragColumn, [COLUMN_ATTRIBUTE.COL_MIN_WIDTH]);
     var calcWidth = resolveWidth > minWidth ? resolveWidth : minWidth;
-    setColumnAttribute(dragColumn, COLUMN_ATTRIBUTE.RESIZE_WIDTH, calcWidth);
-    setColumnAttribute(dragColumn, COLUMN_ATTRIBUTE.CALC_WIDTH, calcWidth);
+    setNextColumnWidth(dragColumn, calcWidth);
+    setColumnAttribute(dragColumn, COLUMN_ATTRIBUTE.WIDTH, calcWidth);
     document.removeEventListener('mouseup', handleMouseUp);
     document.removeEventListener('mousemove', handleMouseMove);
     startX = 0;
@@ -18192,7 +18193,7 @@ var CELL_EVENT_TYPES = defineProperty_defineProperty(defineProperty_defineProper
   var removeCursor = function removeCursor(target) {
     var _target$style2;
     setNodeCursor.cancel();
-    (_target$style2 = target.style) === null || _target$style2 === void 0 || _target$style2.removeProperty('cursor');
+    target === null || target === void 0 || (_target$style2 = target.style) === null || _target$style2 === void 0 || _target$style2.removeProperty('cursor');
     target === null || target === void 0 || target.classList.remove('col-resize-hover');
   };
   var handler = defineProperty_defineProperty(defineProperty_defineProperty(defineProperty_defineProperty({}, EVENTS.MOUSE_DOWN, function (e, column) {
@@ -18202,7 +18203,6 @@ var CELL_EVENT_TYPES = defineProperty_defineProperty(defineProperty_defineProper
     isMouseDown = true;
     var target = e.target.closest('th');
     setColumnAttribute(column, COLUMN_ATTRIBUTE.COL_IS_DRAG, true);
-    setColumnAttribute(column, COLUMN_ATTRIBUTE.CALC_WIDTH, target.scrollWidth);
     setNodeCursor(target);
     dragColumn = column;
     startX = e.clientX;
@@ -18211,6 +18211,7 @@ var CELL_EVENT_TYPES = defineProperty_defineProperty(defineProperty_defineProper
     updateOffsetX(e)();
     document.addEventListener('mouseup', handleMouseUp);
     document.addEventListener('mousemove', handleMouseMove);
+    target === null || target === void 0 || target.classList.remove('col-resize-hover');
   }), EVENTS.MOUSE_MOVE, function (e, _column) {
     if (isMouseDown && !isDraging) {
       isDraging = true;
@@ -18422,55 +18423,69 @@ function v4(options, buf, offset) {
     }
     return columnCache.get(ctx);
   };
-  var resolveChildNode = function resolveChildNode(node) {
-    var _node$type, _node$type2, _node$component;
-    if (!node || ((_node$type = node.type) === null || _node$type === void 0 ? void 0 : _node$type.name) === 'Table') {
-      return;
-    }
-    if (((_node$type2 = node.type) === null || _node$type2 === void 0 ? void 0 : _node$type2.name) === 'TableColumn') {
-      var _node$props$render, _node$children;
-      var resolveProp = Object.assign({
-        index: columnIndex
-      }, copyProps(node.props), {
-        field: node.props.prop || node.props.field,
-        render: (_node$props$render = node.props.render) !== null && _node$props$render !== void 0 ? _node$props$render : (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children["default"],
-        uniqueId: getNodeCtxUid(node)
-      });
-      if (!columns.some(function (col) {
-        return col.uniqueId === resolveProp.uniqueId;
-      })) {
-        columns.push((0,external_vue_namespaceObject.unref)(resolveProp));
-        columnIndex = columnIndex + 1;
-      }
-      return;
-    }
+  var resolveNodeChilren = function resolveNodeChilren(node, rootNode, isColumnRoot) {
+    var _node$component;
     if (node !== null && node !== void 0 && (_node$component = node.component) !== null && _node$component !== void 0 && _node$component.subTree) {
       var _node$component2;
-      resolveChildNode(node === null || node === void 0 || (_node$component2 = node.component) === null || _node$component2 === void 0 ? void 0 : _node$component2.subTree);
+      resolveChildNode(node === null || node === void 0 || (_node$component2 = node.component) === null || _node$component2 === void 0 ? void 0 : _node$component2.subTree, rootNode);
       return;
     }
     if (typeof node === 'function') {
       return node();
     }
     if (Array.isArray(node)) {
-      node.forEach(resolveChildNode);
+      node.forEach(function (c) {
+        return resolveChildNode(c, rootNode);
+      });
       return;
     }
     if (Array.isArray(node === null || node === void 0 ? void 0 : node.children)) {
-      node.children.forEach(resolveChildNode);
+      node.children.forEach(function (c) {
+        return resolveChildNode(c, rootNode);
+      });
       return;
     }
-    if ((0,external_vue_namespaceObject.isVNode)(node) && node !== null && node !== void 0 && node.children && typeof_typeof(node === null || node === void 0 ? void 0 : node.children) === 'object') {
+    if (!isColumnRoot && (0,external_vue_namespaceObject.isVNode)(node) && node !== null && node !== void 0 && node.children && typeof_typeof(node === null || node === void 0 ? void 0 : node.children) === 'object') {
       Object.keys(node.children).forEach(function (key) {
-        return resolveChildNode(node.children[key]);
+        return resolveChildNode(node.children[key], rootNode);
+      });
+      return;
+    }
+  };
+  var resolveChildNode = function resolveChildNode(node, parent) {
+    var _node$type, _node$type2;
+    var rootNode = parent;
+    if (!node || ((_node$type = node.type) === null || _node$type === void 0 ? void 0 : _node$type.name) === 'Table') {
+      return;
+    }
+    if (((_node$type2 = node.type) === null || _node$type2 === void 0 ? void 0 : _node$type2.name) === 'TableColumn') {
+      var _node$props$render, _node$children, _parent$children;
+      var resolveProp = Object.assign({
+        index: columnIndex
+      }, copyProps(node.props), {
+        field: node.props.prop || node.props.field,
+        render: (_node$props$render = node.props.render) !== null && _node$props$render !== void 0 ? _node$props$render : (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children["default"],
+        uniqueId: getNodeCtxUid(node),
+        children: []
       });
+      var targetColumns = (_parent$children = parent === null || parent === void 0 ? void 0 : parent.children) !== null && _parent$children !== void 0 ? _parent$children : columns;
+      if (!targetColumns.some(function (col) {
+        return col.uniqueId === resolveProp.uniqueId;
+      })) {
+        targetColumns.push(resolveProp);
+        columnIndex = columnIndex + 1;
+        if (node.children) {
+          resolveNodeChilren(node, resolveProp, true);
+        }
+      }
       return;
     }
+    resolveNodeChilren(node, rootNode);
   };
   var resolveColumns = function resolveColumns(children) {
     columns.length = 0;
     columnIndex = 0;
-    var ghostBody = children.find(function (node) {
+    var ghostBody = children === null || children === void 0 ? void 0 : children.find(function (node) {
       var _node$type3;
       return ((_node$type3 = node.type) === null || _node$type3 === void 0 ? void 0 : _node$type3.name) === 'GhostBody';
     });
@@ -18481,7 +18496,9 @@ function v4(options, buf, offset) {
         resolveChildNode((_ghostBody$component2 = ghostBody.component) === null || _ghostBody$component2 === void 0 ? void 0 : _ghostBody$component2.subTree);
       } else {
         var _ghostBody$children$d, _ghostBody$children, _ghostBody$children$d2;
-        ((_ghostBody$children$d = (_ghostBody$children = ghostBody.children) === null || _ghostBody$children === void 0 || (_ghostBody$children$d2 = _ghostBody$children["default"]) === null || _ghostBody$children$d2 === void 0 ? void 0 : _ghostBody$children$d2.call(_ghostBody$children)) !== null && _ghostBody$children$d !== void 0 ? _ghostBody$children$d : []).forEach(resolveChildNode);
+        ((_ghostBody$children$d = (_ghostBody$children = ghostBody.children) === null || _ghostBody$children === void 0 || (_ghostBody$children$d2 = _ghostBody$children["default"]) === null || _ghostBody$children$d2 === void 0 ? void 0 : _ghostBody$children$d2.call(_ghostBody$children)) !== null && _ghostBody$children$d !== void 0 ? _ghostBody$children$d : []).forEach(function (c) {
+          return resolveChildNode(c);
+        });
       }
     }
     columns.sort(function (col1, col2) {
@@ -20042,6 +20059,8 @@ var useColumns = function useColumns(props) {
   var uuid = esm_browser_v4();
   var sortColumns = (0,external_vue_namespaceObject.reactive)([]);
   var filterColumns = (0,external_vue_namespaceObject.reactive)([]);
+  var columnGroup = (0,external_vue_namespaceObject.reactive)([]);
+  var columnGroupMap = new WeakMap();
   /**
    * 用来记录列的排序状态
    * @param col
@@ -20072,7 +20091,7 @@ var useColumns = function useColumns(props) {
     var colWidth = 0;
     if (/^\d+\.?\d*(px)?$/.test("".concat(col[attrName]))) {
       colWidth = Number("".concat(col[attrName]).replace(/px/, ''));
-      setColumnAttribute(col, COLUMN_ATTRIBUTE.CALC_WIDTH, colWidth);
+      setColumnAttribute(col, COLUMN_ATTRIBUTE.WIDTH, colWidth);
       setColumnRect(col, {
         width: colWidth,
         left: null,
@@ -20081,7 +20100,7 @@ var useColumns = function useColumns(props) {
     }
     if (/^\d+\.?\d*%$/.test("".concat(col[attrName]))) {
       colWidth = Number("".concat(col[attrName]).replace(/%/, '')) / 100 * width;
-      setColumnAttribute(col, COLUMN_ATTRIBUTE.CALC_WIDTH, colWidth);
+      setColumnAttribute(col, COLUMN_ATTRIBUTE.WIDTH, colWidth);
       setColumnRect(col, {
         width: colWidth,
         left: null,
@@ -20117,7 +20136,7 @@ var useColumns = function useColumns(props) {
     var autoWidthList = resolveColWidth(minWidthList, 'minWidth');
     autoWidthList.forEach(function (col) {
       var calcWidth = minColWidth > COL_MIN_WIDTH ? minColWidth : COL_MIN_WIDTH;
-      setColumnAttribute(col, COLUMN_ATTRIBUTE.CALC_WIDTH, calcWidth);
+      setColumnAttribute(col, COLUMN_ATTRIBUTE.WIDTH, calcWidth);
       setColumnRect(col, {
         width: calcWidth,
         left: null,
@@ -20251,6 +20270,81 @@ var useColumns = function useColumns(props) {
     };
     return filterFn;
   };
+  /**
+   * 格式化Column嵌套配置，支持多表头设置
+   * @param cols
+   */
+  var flatColumnTemplate = function flatColumnTemplate(cols) {
+    columnGroup.length = 0;
+    var maxDepth = 0;
+    var targetColumns = [];
+    var getMaxDepth = function getMaxDepth(root) {
+      var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+      if (root.length && maxDepth < depth) {
+        maxDepth = depth;
+      }
+      root.forEach(function (col) {
+        var _col$children;
+        return getMaxDepth((_col$children = col.children) !== null && _col$children !== void 0 ? _col$children : [], depth + 1);
+      });
+    };
+    getMaxDepth(cols);
+    var updateParentThColspan = function updateParentThColspan(col, count) {
+      if (col) {
+        var colMap = columnGroupMap.get(col);
+        colMap.thColspan = colMap.thColspan + count;
+        colMap.offsetLeft = colMap.offsetLeft + count;
+        updateParentThColspan(colMap.parent, count);
+      }
+    };
+    var foreachAllColumns = function foreachAllColumns(column, depth, parent, left) {
+      var _col$children$length, _col$children2, _col$children$length2, _col$children3, _col$children$length3, _col$children4, _col$children$length4, _col$children5, _col$children6;
+      var col = (0,external_vue_namespaceObject.toRaw)(column);
+      var leftColumnCount = left;
+      if (columnGroup[depth] === undefined) {
+        columnGroup[depth] = [];
+      }
+      var isGroup = !!((_col$children$length = (_col$children2 = col.children) === null || _col$children2 === void 0 ? void 0 : _col$children2.length) !== null && _col$children$length !== void 0 ? _col$children$length : false);
+      if (!((_col$children$length2 = (_col$children3 = col.children) === null || _col$children3 === void 0 ? void 0 : _col$children3.length) !== null && _col$children$length2 !== void 0 ? _col$children$length2 : false)) {
+        targetColumns.push(col);
+      }
+      if (!columnGroupMap.has(col)) {
+        columnGroupMap.set(col, {
+          thColspan: 1,
+          thRowspan: 1,
+          isGroup: isGroup,
+          offsetLeft: left
+        });
+      }
+      var colMap = columnGroupMap.get(col);
+      var childLength = (_col$children$length3 = (_col$children4 = col.children) === null || _col$children4 === void 0 ? void 0 : _col$children4.length) !== null && _col$children$length3 !== void 0 ? _col$children$length3 : 0;
+      var thColspan = (_col$children$length4 = (_col$children5 = col.children) === null || _col$children5 === void 0 ? void 0 : _col$children5.length) !== null && _col$children$length4 !== void 0 ? _col$children$length4 : 1;
+      var thRowspan = childLength > 0 ? 1 : maxDepth - depth;
+      var offsetLeft = leftColumnCount + (childLength > 0 ? childLength - 1 : 0);
+      Object.assign(colMap, {
+        thColspan: thColspan > 0 ? thColspan : 1,
+        parent: parent,
+        thRowspan: thRowspan,
+        offsetLeft: offsetLeft
+      });
+      columnGroup[depth].push(col);
+      if (thColspan > 1) {
+        updateParentThColspan(parent, thColspan - 1);
+      }
+      (_col$children6 = col.children) === null || _col$children6 === void 0 || _col$children6.forEach(function (c, index) {
+        leftColumnCount = leftColumnCount + foreachAllColumns(c, depth + 1, col, leftColumnCount + index);
+      });
+      return childLength > 0 ? childLength - 1 : 0;
+    };
+    var leftColumnCount = 0;
+    cols.forEach(function (col, index) {
+      leftColumnCount = leftColumnCount + foreachAllColumns(col, 0, null, leftColumnCount + index);
+    });
+    return targetColumns;
+  };
+  var getGroupAttribute = function getGroupAttribute(group) {
+    return columnGroupMap.get(group);
+  };
   /**
    * Format columns
    * @param columns
@@ -20318,6 +20412,9 @@ var useColumns = function useColumns(props) {
   var getColumnCalcWidth = function getColumnCalcWidth(column) {
     return getColumnAttribute(column, COLUMN_ATTRIBUTE.CALC_WIDTH);
   };
+  var getColumnWidth = function getColumnWidth(column) {
+    return getColumnAttribute(column, COLUMN_ATTRIBUTE.WIDTH);
+  };
   var setColumnRect = function setColumnRect(col, _ref2) {
     var left = _ref2.left,
       right = _ref2.right,
@@ -20332,11 +20429,12 @@ var useColumns = function useColumns(props) {
     };
     setColumnAttribute(col, COLUMN_ATTRIBUTE.COL_RECT, target);
   };
-  var debounceUpdateColumns = (0,lodash.debounce)(function (columns) {
+  var debounceUpdateColumns = (0,lodash.debounce)(function (columns, onComplete) {
     tableColumnList.length = 0;
-    tableColumnList.push.apply(tableColumnList, _toConsumableArray(columns));
+    tableColumnList.push.apply(tableColumnList, _toConsumableArray(flatColumnTemplate(columns)));
     formatColumns();
     setVisibleColumns();
+    onComplete === null || onComplete === void 0 || onComplete();
   });
   var setColumnIsHidden = function setColumnIsHidden(column) {
     var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -20362,7 +20460,7 @@ var useColumns = function useColumns(props) {
       Object.assign(tableColumnSchema.get(column)[COLUMN_ATTRIBUTE.COL_FILTER_OBJ], option);
     }
   };
-  var ORDER_LIST = [COLUMN_ATTRIBUTE.RESIZE_WIDTH, COLUMN_ATTRIBUTE.CALC_WIDTH, COLUMN_ATTRIBUTE.WIDTH];
+  var ORDER_LIST = [COLUMN_ATTRIBUTE.WIDTH];
   /**
    * 获取当前列实际宽度
    * width props中设置的默认宽度
@@ -20402,6 +20500,16 @@ var useColumns = function useColumns(props) {
       setFilterColumns(column, defineProperty_defineProperty({}, attrName, attrValue));
     }
   };
+  var setNextColumnWidth = function setNextColumnWidth(col, newWidth) {
+    var index = visibleColumns.findIndex(function (item) {
+      return item === col;
+    });
+    var diffWidth = getColumnOrderWidth(col) - newWidth;
+    var nextColumn = visibleColumns[index + 1];
+    if (nextColumn) {
+      setColumnAttribute(nextColumn, COLUMN_ATTRIBUTE.WIDTH, getColumnOrderWidth(nextColumn) + diffWidth);
+    }
+  };
   /**
    * 设置表格列属性
    * @param col 当前列
@@ -20480,13 +20588,6 @@ var useColumns = function useColumns(props) {
     }
     setColumnAttribute(column, COLUMN_ATTRIBUTE.COL_SORT_ACTIVE, active);
   };
-  (0,external_vue_namespaceObject.watch)(function () {
-    return [props.columns];
-  }, function () {
-    debounceUpdateColumns(props.columns);
-  }, {
-    immediate: true
-  });
   /**
    * 清理列排序
    * @param reset 是否重置表格数据
@@ -20506,8 +20607,11 @@ var useColumns = function useColumns(props) {
     debounceUpdateColumns: debounceUpdateColumns,
     sortColumns: sortColumns,
     filterColumns: filterColumns,
+    columnGroup: columnGroup,
+    columnGroupMap: columnGroupMap,
     clearColumnSort: clearColumnSort,
     formatColumns: formatColumns,
+    flatColumnTemplate: flatColumnTemplate,
     isHiddenColumn: isHiddenColumn,
     getColumnId: getColumnId,
     getColumnOrderWidth: getColumnOrderWidth,
@@ -20519,6 +20623,8 @@ var useColumns = function useColumns(props) {
     getColumnCustomClass: getColumnCustomClass,
     getColumnRefAttribute: getColumnRefAttribute,
     getColumnCalcWidth: getColumnCalcWidth,
+    getColumnWidth: getColumnWidth,
+    getGroupAttribute: getGroupAttribute,
     resolveEventListener: resolveEventListener,
     setColumnIsHidden: setColumnIsHidden,
     setColumnResizeWidth: setColumnResizeWidth,
@@ -20530,6 +20636,7 @@ var useColumns = function useColumns(props) {
     setFixedStyle: setFixedStyle,
     setColumnRect: setColumnRect,
     setVisibleColumns: setVisibleColumns,
+    setNextColumnWidth: setNextColumnWidth,
     resolveColsCalcWidth: resolveColsCalcWidth
   };
 };
@@ -20738,7 +20845,7 @@ var useColumns = function useColumns(props) {
     var length = fixedRightColumns.value.length;
     for (var i = length - 1; i >= 0; i--) {
       var col = fixedRightColumns.value[i];
-      var width = columns.getColumnCalcWidth(col);
+      var width = columns.getColumnWidth(col);
       columns.setColumnRect(col, {
         right: right,
         width: width
@@ -20750,7 +20857,7 @@ var useColumns = function useColumns(props) {
     }
     var left = 0;
     fixedLeftColumns.value.forEach(function (col) {
-      var width = columns.getColumnCalcWidth(col);
+      var width = columns.getColumnWidth(col);
       columns.setColumnRect(col, {
         left: left,
         width: width
@@ -20981,6 +21088,7 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
   var layout = (0,external_vue_namespaceObject.reactive)({});
   var fixedColumns = (0,external_vue_namespaceObject.reactive)([]);
   var lineHeight = (0,external_vue_namespaceObject.ref)((_props$rowHeight = props.rowHeight) !== null && _props$rowHeight !== void 0 ? _props$rowHeight : LINE_HEIGHT);
+  var headerRowCount = (0,external_vue_namespaceObject.ref)(1);
   var fixedBottomHeight = (0,external_vue_namespaceObject.computed)(function () {
     var _props$fixedBottom, _props$fixedBottom$he, _props$fixedBottom2, _props$fixedBottom$he2, _props$fixedBottom3;
     return ((_props$fixedBottom = props.fixedBottom) === null || _props$fixedBottom === void 0 ? void 0 : _props$fixedBottom.position) === 'relative' ? (_props$fixedBottom$he = (_props$fixedBottom2 = props.fixedBottom) === null || _props$fixedBottom2 === void 0 ? void 0 : _props$fixedBottom2.height) !== null && _props$fixedBottom$he !== void 0 ? _props$fixedBottom$he : LINE_HEIGHT : (_props$fixedBottom$he2 = (_props$fixedBottom3 = props.fixedBottom) === null || _props$fixedBottom3 === void 0 ? void 0 : _props$fixedBottom3.height) !== null && _props$fixedBottom$he2 !== void 0 ? _props$fixedBottom$he2 : 0;
@@ -21000,7 +21108,7 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     };
   });
   var headClass = (0,external_vue_namespaceObject.computed)(function () {
-    return (0,shared_namespaceObject.classes)(defineProperty_defineProperty(defineProperty_defineProperty({}, resolveClassName('table-head'), true), 'has-settings', !!props.settings));
+    return (0,shared_namespaceObject.classes)(defineProperty_defineProperty(defineProperty_defineProperty(defineProperty_defineProperty({}, resolveClassName('table-head'), true), 'has-settings', !!props.settings), 'has-group', headerRowCount.value > 1));
   });
   var setFixedColumnShawdow = function setFixedColumnShawdow() {
     var _refRoot$value, _refRoot$value2;
@@ -21022,6 +21130,9 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     translateX.value = val;
     setRootStyleVars();
   };
+  var setHeaderRowCount = function setHeaderRowCount(val) {
+    headerRowCount.value = val;
+  };
   var setTranslateY = function setTranslateY(val) {
     translateY.value = val;
     setRootStyleVars();
@@ -21040,16 +21151,17 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
   };
   var config = resolveHeadConfig(props);
   var headHeight = (0,external_vue_namespaceObject.computed)(function () {
-    return resolvePropVal(config, 'height', ['thead']);
+    return resolvePropVal(config, 'height', ['thead']) * headerRowCount.value;
   });
   var headStyle = (0,external_vue_namespaceObject.computed)(function () {
     var _props$thead$color, _props$thead;
     return {
       '--row-height': "".concat(headHeight.value, "px"),
-      '--background-color': DEF_COLOR[(_props$thead$color = (_props$thead = props.thead) === null || _props$thead === void 0 ? void 0 : _props$thead.color) !== null && _props$thead$color !== void 0 ? _props$thead$color : IHeadColor.DEF1]
+      '--background-color': DEF_COLOR[(_props$thead$color = (_props$thead = props.thead) === null || _props$thead === void 0 ? void 0 : _props$thead.color) !== null && _props$thead$color !== void 0 ? _props$thead$color : IHeadColor.DEF1],
+      paddingRight: props.scrollbar ? null : "".concat(SCROLLY_WIDTH, "px")
     };
   });
-  var bodyClass = defineProperty_defineProperty({}, resolveClassName('table-body'), true);
+  var bodyClass = defineProperty_defineProperty(defineProperty_defineProperty({}, resolveClassName('table-body'), true), 'is-bk-scrollbar', props.scrollbar);
   var footerClass = (0,external_vue_namespaceObject.computed)(function () {
     return (0,shared_namespaceObject.classes)(defineProperty_defineProperty(defineProperty_defineProperty({}, resolveClassName('table-footer'), true), 'is-hidden', footHeight.value === 0));
   });
@@ -21245,6 +21357,7 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     setFixedColumns: setFixedColumns,
     setOffsetRight: setOffsetRight,
     setLineHeight: setLineHeight,
+    setHeaderRowCount: setHeaderRowCount,
     initRootStyleVars: initRootStyleVars,
     refRoot: refRoot,
     refHead: refHead,
@@ -22539,6 +22652,7 @@ function use_head_isSlot(s) {
     index = _ref.index;
   var sortType = (0,external_vue_namespaceObject.ref)(columns.getColumnAttribute(column, COLUMN_ATTRIBUTE.COL_SORT_TYPE));
   var sortActive = (0,external_vue_namespaceObject.ref)(columns.getColumnAttribute(column, COLUMN_ATTRIBUTE.COL_SORT_ACTIVE));
+  var rawColumn = (0,external_vue_namespaceObject.toRaw)(column);
   /**
    * 点击排序事件
    * @param sortFn 排序函数
@@ -22715,14 +22829,36 @@ function use_head_isSlot(s) {
   var headStyle = Object.assign(columns.getFixedStlye(column), {
     '--background-color': DEF_COLOR[(_props$thead$color = (_props$thead = props.thead) === null || _props$thead === void 0 ? void 0 : _props$thead.color) !== null && _props$thead$color !== void 0 ? _props$thead$color : IHeadColor.DEF1]
   });
-  var classList = [columns.getHeadColumnClass(column, index), columns.getColumnCustomClass(column), column.align || props.headerAlign || props.align];
+  var group = columns.getGroupAttribute(rawColumn);
+  var classList = (0,external_vue_namespaceObject.computed)(function () {
+    return [columns.getHeadColumnClass(column, index), columns.getColumnCustomClass(column), column.align || props.headerAlign || props.align, {
+      'is-last-child': (group === null || group === void 0 ? void 0 : group.offsetLeft) + 1 === columns.visibleColumns.length
+    }];
+  });
+  var groupClass = (0,external_vue_namespaceObject.computed)(function () {
+    return classList.value.concat([{
+      'is-head-group': group === null || group === void 0 ? void 0 : group.isGroup,
+      'is-head-group-child': !!(group !== null && group !== void 0 && group.parent)
+    }]);
+  });
+  var getGroupRender = function getGroupRender() {
+    return resolvePropVal(column, 'label', [index, column]);
+  };
   var getTH = function getTH() {
+    if (group !== null && group !== void 0 && group.isGroup) {
+      return (0,external_vue_namespaceObject.createVNode)("th", {
+        "style": headStyle,
+        "class": groupClass.value,
+        "colspan": group === null || group === void 0 ? void 0 : group.thColspan,
+        "rowspan": group === null || group === void 0 ? void 0 : group.thRowspan
+      }, [getGroupRender()]);
+    }
     return (0,external_vue_namespaceObject.createVNode)("th", (0,external_vue_namespaceObject.mergeProps)({
       "style": headStyle,
-      "class": classList,
-      "colspan": 1,
+      "class": classList.value,
+      "colspan": group === null || group === void 0 ? void 0 : group.thColspan,
       "data-id": columns.getColumnId(column),
-      "rowspan": 1,
+      "rowspan": group === null || group === void 0 ? void 0 : group.thRowspan,
       "onClick": function onClick() {
         return handleColumnHeadClick();
       }
@@ -22913,21 +23049,20 @@ function use_render_isSlot(s) {
     };
     return (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [(0,external_vue_namespaceObject.createVNode)("thead", {
       "style": rowStyle
-    }, [(0,external_vue_namespaceObject.createVNode)(table_row, null, {
-      "default": function _default() {
-        return [(0,external_vue_namespaceObject.createVNode)("tr", null, [columns.visibleColumns.map(function (column, index) {
-          var _useHead = use_head({
-              props: props,
-              ctx: ctx,
-              columns: columns,
-              column: column,
-              index: index,
-              rows: rows
-            }),
-            getTH = _useHead.getTH;
-          return getTH();
-        })])];
-      }
+    }, [columns.columnGroup.map(function (cols, rowIndex) {
+      return (0,external_vue_namespaceObject.createVNode)("tr", null, [cols.map(function (column, index) {
+        var _useHead = use_head({
+            props: props,
+            ctx: ctx,
+            columns: columns,
+            column: column,
+            index: index,
+            rows: rows,
+            rowIndex: rowIndex
+          }),
+          getTH = _useHead.getTH;
+        return getTH();
+      })]);
     })])]);
   };
   var renderColumns = function renderColumns() {
@@ -23935,6 +24070,7 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
       setFootHeight = _useLayout.setFootHeight,
       setDragOffsetX = _useLayout.setDragOffsetX,
       setOffsetRight = _useLayout.setOffsetRight,
+      setHeaderRowCount = _useLayout.setHeaderRowCount,
       refBody = _useLayout.refBody,
       refRoot = _useLayout.refRoot;
     /**
@@ -23969,7 +24105,9 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
     var initTableColumns = function initTableColumns() {
       var _instance$subTree$chi, _instance$subTree;
       var children = (_instance$subTree$chi = (_instance$subTree = instance.subTree) === null || _instance$subTree === void 0 ? void 0 : _instance$subTree.children) !== null && _instance$subTree$chi !== void 0 ? _instance$subTree$chi : [];
-      columns.debounceUpdateColumns(resolveColumns(children));
+      columns.debounceUpdateColumns(resolveColumns(children), function () {
+        setHeaderRowCount(columns.columnGroup.length);
+      });
     };
     (0,external_vue_namespaceObject.provide)(PROVIDE_KEY_INIT_COL, initTableColumns);
     var _useFixedColumn = use_fixed_column(props, columns),
@@ -23980,8 +24118,8 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
      * 计算每一列的实际宽度
      */
     var computedColumnRect = function computedColumnRect() {
-      var _refRoot$value$offset, _refRoot$value;
-      var width = (_refRoot$value$offset = (_refRoot$value = refRoot.value) === null || _refRoot$value === void 0 ? void 0 : _refRoot$value.offsetWidth) !== null && _refRoot$value$offset !== void 0 ? _refRoot$value$offset : 0;
+      var _ref, _refRoot$value;
+      var width = (_ref = ((_refRoot$value = refRoot.value) === null || _refRoot$value === void 0 ? void 0 : _refRoot$value.offsetWidth) - (props.scrollbar ? 1 : SCROLLY_WIDTH)) !== null && _ref !== void 0 ? _ref : 0;
       columns.resolveColsCalcWidth(width);
       resolveFixedColumnStyle();
     };
@@ -24048,23 +24186,42 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
         setOffsetRight();
       });
     };
+    var observerResizing = (0,external_vue_namespaceObject.ref)(false);
+    var observerResizingTimer = null;
     use_observer_resize(refRoot, function () {
-      var _refBody$value2;
-      if ((props.height === '100%' || props.virtualEnabled) && (0,lodash.isElement)(refRoot.value)) {
-        if (isResizeBodyHeight.value) {
-          setTimeout(function () {
-            isResizeBodyHeight.value = false;
-          });
-          return;
+      if (!observerResizing.value) {
+        var _refBody$value2;
+        observerResizing.value = true;
+        if ((props.height === '100%' || props.virtualEnabled) && (0,lodash.isElement)(refRoot.value)) {
+          if (isResizeBodyHeight.value) {
+            setTimeout(function () {
+              isResizeBodyHeight.value = false;
+            });
+            return;
+          }
+          var tableHeight = refRoot.value.offsetHeight;
+          isResizeBodyHeight.value = true;
+          setBodyHeight(tableHeight);
+          setOffsetRight();
         }
-        var tableHeight = refRoot.value.offsetHeight;
-        isResizeBodyHeight.value = true;
-        setBodyHeight(tableHeight);
+        computedColumnRect();
         setOffsetRight();
+        (_refBody$value2 = refBody.value) === null || _refBody$value2 === void 0 || _refBody$value2.scrollTo(0, 0);
+        return;
       }
-      computedColumnRect();
-      (_refBody$value2 = refBody.value) === null || _refBody$value2 === void 0 || _refBody$value2.scrollTo(0, 0);
-      setOffsetRight();
+      observerResizingTimer && clearTimeout(observerResizingTimer);
+      observerResizingTimer = setTimeout(function () {
+        observerResizing.value = false;
+      });
+    });
+    (0,external_vue_namespaceObject.watch)(function () {
+      return [props.columns];
+    }, function () {
+      columns.debounceUpdateColumns(props.columns, function () {
+        setHeaderRowCount(columns.columnGroup.length);
+      });
+    }, {
+      immediate: true
     });
     (0,external_vue_namespaceObject.watch)(function () {
       return [dragOffsetX.value];
@@ -24101,12 +24258,9 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
       return [pagination.options.count, pagination.options.limit, pagination.options.current, props.data];
     }, function () {
       setTableData();
-      (0,external_vue_namespaceObject.nextTick)(function () {
-        var _refBody$value3;
-        (_refBody$value3 = refBody.value) === null || _refBody$value3 === void 0 || _refBody$value3.scrollTo(0, 1);
-      });
     }, {
-      immediate: true
+      immediate: true,
+      deep: true
     });
     ctx.expose({
       setRowExpand: rows.setRowExpand,