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

package/lib/index.js

@@ -4,5 +4,5 @@ export { default } from './preset';
 export * from './config-provider';
 export * from './directives';
 export * as plugins from './plugins';
-export const version = "2.0.1-beta.28";
+export const version = "2.0.1-beta.28.table.1";
 window.__bkui_vue_version__ = version;

package/lib/table/hooks/use-columns.d.ts

@@ -1,16 +1,19 @@
 import { IEmptyObject } from '../const';
-import { Column, Settings, TablePropTypes } from '../props';
+import { Column, IHeadGroup, Settings, TablePropTypes } from '../props';
 declare const useColumns: (props: TablePropTypes) => {
     needColSpan: import("vue").ComputedRef<boolean>;
     needRowSpan: import("vue").ComputedRef<boolean>;
     tableColumnSchema: WeakMap<object, any> & Omit<WeakMap<object, any>, keyof WeakMap<any, any>>;
     tableColumnList: any[];
     visibleColumns: Column[];
-    debounceUpdateColumns: import("lodash").DebouncedFunc<(columns: any) => void>;
+    debounceUpdateColumns: import("lodash").DebouncedFunc<(columns: any, onComplete?: any) => void>;
     sortColumns: any[];
     filterColumns: any[];
+    columnGroup: Column[][];
+    columnGroupMap: WeakMap<Column, IHeadGroup>;
     clearColumnSort: () => void;
     formatColumns: () => void;
+    flatColumnTemplate: (cols: Column[]) => any[];
     isHiddenColumn: (col: Column) => any;
     getColumnId: (col: Column) => any;
     getColumnOrderWidth: (col: Column, orders?: string[]) => number;
@@ -33,6 +36,7 @@ declare const useColumns: (props: TablePropTypes) => {
     getColumnRefAttribute: (col: Column | IEmptyObject, attributeName: string) => any;
     getColumnCalcWidth: (column: Column) => any;
     getColumnWidth: (column: Column) => any;
+    getGroupAttribute: (group: Column) => IHeadGroup;
     resolveEventListener: (col: Column) => Record<string, (...args: any[]) => void> & {
         [x: string]: (e: MouseEvent) => void;
     };

package/lib/table/hooks/use-head.d.ts

@@ -9,6 +9,7 @@ declare const _default: ({ props, columns, rows, ctx, column, index, }: {
     column: Column;
     index: number;
     rows: UseRows;
+    rowIndex: number;
 }) => {
     getTH: () => JSX.Element;
 };

package/lib/table/hooks/use-layout.d.ts

@@ -13,6 +13,7 @@ declare const _default: (props: TablePropTypes, ctx: any) => {
     setFixedColumns: (values: Column[]) => void;
     setOffsetRight: () => void;
     setLineHeight: (val: number) => void;
+    setHeaderRowCount: (val: number) => void;
     initRootStyleVars: () => void;
     refRoot: Ref<HTMLElement>;
     refHead: Ref<HTMLElement>;

package/lib/table/index.js

@@ -18423,50 +18423,64 @@ 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;
@@ -18482,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) {
@@ -20043,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
@@ -20252,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
@@ -20336,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;
@@ -20494,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 是否重置表格数据
@@ -20520,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,
@@ -20534,6 +20624,7 @@ var useColumns = function useColumns(props) {
     getColumnRefAttribute: getColumnRefAttribute,
     getColumnCalcWidth: getColumnCalcWidth,
     getColumnWidth: getColumnWidth,
+    getGroupAttribute: getGroupAttribute,
     resolveEventListener: resolveEventListener,
     setColumnIsHidden: setColumnIsHidden,
     setColumnResizeWidth: setColumnResizeWidth,
@@ -20997,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;
@@ -21016,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;
@@ -21038,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();
@@ -21056,7 +21151,7 @@ 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;
@@ -21262,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,
@@ -22556,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 排序函数
@@ -22732,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();
       }
@@ -22930,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() {
@@ -23952,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;
     /**
@@ -23986,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),
@@ -24093,6 +24214,15 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
         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];
     }, function () {

package/lib/table/props.d.ts

@@ -162,8 +162,16 @@ export type IDraggableRowOption = {
     icon?: JSX.Element;
     width?: number;
 };
+export type IHeadGroup = {
+    thColspan: number;
+    thRowspan: number;
+    isGroup: boolean;
+    parent?: IHeadGroup;
+    label?: string;
+    offsetLeft?: number;
+};
 export type Column = {
-    label: LabelFunctionString;
+    label?: LabelFunctionString;
     field?: LabelFunctionString;
     render?: RenderFunctionString;
     renderHead?: RenderFunctionString;
@@ -184,6 +192,7 @@ export type Column = {
     prop?: LabelFunctionString;
     index?: number;
     explain?: IColumnExplain;
+    children?: Column[];
 };
 export declare const IColumnProp: import("vue-types").VueTypeDef<Column>;
 export type Thead = {

package/lib/table/table.css

@@ -1504,6 +1504,15 @@
   background-color: var(--background-color);
   height: var(--row-height);
 }
+.bk-table .bk-table-head.has-group .is-head-group {
+  border-bottom: 1px solid var(--table-border-color);
+}
+.bk-table .bk-table-head.has-group th {
+  border-right: 1px solid var(--table-border-color);
+}
+.bk-table .bk-table-head.has-group th.is-last-child {
+  border-right: none;
+}
 .bk-table .bk-table-head .col-resize-drag {
   position: absolute;
   top: 0;
@@ -1576,6 +1585,9 @@
 .bk-table.bordered-col .bk-table-head {
   border-right: 1px solid var(--table-border-color);
 }
+.bk-table.bordered-col .bk-table-head .is-head-group {
+  border-bottom: 1px solid var(--table-border-color);
+}
 .bk-table.bordered-col th {
   border-right: 1px solid var(--table-border-color);
 }

package/lib/table/table.less

@@ -308,6 +308,20 @@
     background-color: var(--background-color);
     height: var(--row-height);
 
+    &.has-group {
+      .is-head-group {
+        border-bottom: 1px solid @table-border-color;
+      }
+
+      th {
+        border-right: 1px solid @table-border-color;
+
+        &.is-last-child {
+          border-right: none;
+        }
+      }
+    }
+
     .col-resize-drag {
       position: absolute;
       top: 0;
@@ -406,6 +420,9 @@
   &.bordered-col {
     .@{bk-prefix}-table-head {
       border-right: 1px solid @table-border-color;
+      .is-head-group {
+        border-bottom: 1px solid @table-border-color;
+      }
     }
     th {
       border-right: 1px solid @table-border-color;

package/lib/table/table.variable.css

@@ -1894,6 +1894,15 @@
   background-color: var(--background-color);
   height: var(--row-height);
 }
+.bk-table .bk-table-head.has-group .is-head-group {
+  border-bottom: 1px solid var(--table-border-color);
+}
+.bk-table .bk-table-head.has-group th {
+  border-right: 1px solid var(--table-border-color);
+}
+.bk-table .bk-table-head.has-group th.is-last-child {
+  border-right: none;
+}
 .bk-table .bk-table-head .col-resize-drag {
   position: absolute;
   top: 0;
@@ -1966,6 +1975,9 @@
 .bk-table.bordered-col .bk-table-head {
   border-right: 1px solid var(--table-border-color);
 }
+.bk-table.bordered-col .bk-table-head .is-head-group {
+  border-bottom: 1px solid var(--table-border-color);
+}
 .bk-table.bordered-col th {
   border-right: 1px solid var(--table-border-color);
 }

package/lib/table/utils.d.ts

@@ -6,7 +6,7 @@ import { Column, GroupColumn, ISortPropShape, TablePropTypes } from './props';
  * @param args 如果是函数，传递参数
  * @returns
  */
-export declare const resolvePropVal: (prop: any, key: string | string[], args: any[]) => any;
+export declare const resolvePropVal: (prop: Record<string, unknown>, key: string | string[], args: unknown[]) => any;
 /**
  * 处理Props中的ActiveColumn，解析为统一的数组格式
  * @param props
@@ -159,4 +159,4 @@ export declare const getRawData: (data: any) => any;
  * @param parentVal
  * @returns
  */
-export declare const getNumberOrPercentValue: (val: string | number, parentVal?: number) => number;
+export declare const getNumberOrPercentValue: (val: number | string, parentVal?: number) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bkui-vue",
-  "version": "2.0.1-beta.28",
+  "version": "2.0.1-beta.28.table.1",
   "workspaces": [
     "packages/**",
     "scripts/cli",