bkui-vue 2.0.2-beta.99 → 2.1.0-dev-beta.2

package/lib/table/index.js

@@ -2219,12 +2219,10 @@ function renderContent(opts) {
     theme = opts.theme,
     extCls = opts.extCls;
   var isLight = theme === 'light';
-  var zIndex = shared_namespaceObject.bkZIndexManager.getPopperIndex();
   var content = document.createElement('div');
   var prefix = document.documentElement.style.getPropertyValue('--bk-prefix') || 'bk';
   content.className = "".concat((0,shared_namespaceObject.resolveClassName)('popper', prefix), " ").concat(isLight ? 'light' : 'dark', " ").concat(extCls);
   content.innerText = value;
-  content.style.zIndex = String(zIndex);
   renderContext(value, content);
   if (hasArrow) {
     var arrow = renderArrow();
@@ -2303,6 +2301,7 @@ function show(el) {
     _opts$modifiers = opts.modifiers,
     modifiers = _opts$modifiers === void 0 ? [] : _opts$modifiers;
   if (disabled) return;
+  popper.style.zIndex = String(shared_namespaceObject.bkZIndexManager.getPopperIndex());
   renderContext(content, popper);
   if (hasArrow) {
     var arrow = renderArrow();
@@ -2638,7 +2637,8 @@ var CELL_EVENT_TYPES = defineProperty_defineProperty(defineProperty_defineProper
     }
     applyResizeResultByWidth(latestClampedWidth);
     afterResize === null || afterResize === void 0 || afterResize();
-    handleMouseoutDragSection((_e$target = e.target) !== null && _e$target !== void 0 ? _e$target : null);
+    var mouseUpTh = (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.closest('th');
+    handleMouseoutDragSection(mouseUpTh);
     cleanupDrag();
   };
   // rAF 驱动：mousemove 只记录最新坐标，每帧最多更新一次辅助线
@@ -2707,11 +2707,11 @@ var CELL_EVENT_TYPES = defineProperty_defineProperty(defineProperty_defineProper
     }
     preventSelection(e);
     var target = e.target;
-    removePointerClass(target);
     var th = target === null || target === void 0 ? void 0 : target.closest('th');
     if (!th) {
       return;
     }
+    removePointerClass(th);
     var column = poinerPlacement === 'left' ? getPreColumn(mouseMoveColumn) : mouseMoveColumn;
     setColumnAttribute(column, const_COLUMN_ATTRIBUTE.COL_IS_DRAG, true);
     dragColumn = column;
@@ -2723,38 +2723,37 @@ var CELL_EVENT_TYPES = defineProperty_defineProperty(defineProperty_defineProper
     setNodeCursor(headTable);
     isMouseDown = true;
   };
-  var removePointerClass = function removePointerClass(target) {
-    var _target$parentElement;
-    var targetElements = target === null || target === void 0 || (_target$parentElement = target.parentElement) === null || _target$parentElement === void 0 || (_target$parentElement = _target$parentElement.parentElement) === null || _target$parentElement === void 0 ? void 0 : _target$parentElement.querySelectorAll('.col-pointer-hover');
-    targetElements.forEach(function (element) {
+  var removePointerClass = function removePointerClass(th) {
+    var tr = th === null || th === void 0 ? void 0 : th.closest('tr');
+    var targetElements = tr === null || tr === void 0 ? void 0 : tr.querySelectorAll('.col-pointer-hover');
+    targetElements === null || targetElements === void 0 || targetElements.forEach(function (element) {
       element === null || element === void 0 || element.classList.remove('col-pointer-hover');
       element === null || element === void 0 || element.classList.remove('poiner-left');
       element === null || element === void 0 || element.classList.remove('poiner-right');
     });
   };
-  var addPointerClass = function addPointerClass(target, poinerPlacement) {
-    var targetTh = target.parentElement;
-    targetTh === null || targetTh === void 0 || targetTh.classList.add('col-pointer-hover');
-    targetTh === null || targetTh === void 0 || targetTh.classList.add("poiner-".concat(poinerPlacement));
-    var nextTarget = poinerPlacement === 'right' ? targetTh.nextElementSibling : targetTh.previousElementSibling;
+  var addPointerClass = function addPointerClass(th, poinerPlacement) {
+    th === null || th === void 0 || th.classList.add('col-pointer-hover');
+    th === null || th === void 0 || th.classList.add("poiner-".concat(poinerPlacement));
+    var nextTarget = poinerPlacement === 'right' ? th.nextElementSibling : th.previousElementSibling;
     var nextPlacement = poinerPlacement === 'right' ? 'left' : 'right';
     nextTarget === null || nextTarget === void 0 || nextTarget.classList.add('col-pointer-hover');
     nextTarget === null || nextTarget === void 0 || nextTarget.classList.add("poiner-".concat(nextPlacement));
   };
-  var handleMouseoutDragSection = function handleMouseoutDragSection(target) {
+  var handleMouseoutDragSection = function handleMouseoutDragSection(th) {
     if (!isDraging) {
-      if (target) {
-        target.classList.remove('cell-resize');
-        removePointerClass(target);
+      if (th) {
+        th.classList.remove('cell-resize');
+        removePointerClass(th);
       }
-      if (target) {
-        cellCursorStore.set(target, false);
+      if (th) {
+        cellCursorStore.set(th, false);
       }
       document.removeEventListener('mousedown', handlemouseDownEvent);
       setDragOffset(-1000);
     }
   };
-  var handler = defineProperty_defineProperty(defineProperty_defineProperty({}, EVENTS.MOUSE_MOVE, function (e, column, index) {
+  var handler = defineProperty_defineProperty(defineProperty_defineProperty({}, EVENTS.MOUSE_MOVE, function (e, column, _index) {
     if (isMouseDown) {
       isDraging = true;
       return;
@@ -2771,24 +2770,32 @@ var CELL_EVENT_TYPES = defineProperty_defineProperty(defineProperty_defineProper
       var thRect = th.getBoundingClientRect();
       var offsetWidth = thRect.width;
       var mouseOffsetX = e.clientX - thRect.left;
-      if (offsetWidth > 12 && (offsetWidth - mouseOffsetX < 8 || mouseOffsetX < 8 && index > 0)) {
+      var colIndex = columns.getColumnIndex(column);
+      var isFirstVisible = colIndex === 0;
+      if (offsetWidth > 12 && (offsetWidth - mouseOffsetX < 8 || mouseOffsetX < 8 && !isFirstVisible)) {
         isInDragSection = true;
         poinerPlacement = mouseOffsetX < 8 ? 'left' : 'right';
-        if (!cellCursorStore.get(target)) {
-          cellCursorStore.set(target, true);
-          target.classList.add('cell-resize');
-          addPointerClass(target, poinerPlacement);
+        if (!cellCursorStore.get(th)) {
+          cellCursorStore.set(th, true);
+          th.classList.add('cell-resize');
+          addPointerClass(th, poinerPlacement);
           mouseMoveColumn = column;
           document.addEventListener('mousedown', handlemouseDownEvent);
         }
       } else {
         isInDragSection = false;
-        handleMouseoutDragSection(target);
+        handleMouseoutDragSection(th);
       }
     }
   }), EVENTS.MOUSE_OUT, function (e, _column, _index) {
     var target = e.target;
-    handleMouseoutDragSection(target);
+    var th = target === null || target === void 0 ? void 0 : target.closest('th');
+    if (!th) return;
+    var relatedTarget = e.relatedTarget;
+    if (relatedTarget && th.contains(relatedTarget)) {
+      return;
+    }
+    handleMouseoutDragSection(th);
   });
   var getEventName = function getEventName(event) {
     return "".concat(pluginName, "_").concat(event);
@@ -6010,6 +6017,10 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     }
     return 0;
   });
+  var wrapperBorderHeight = (0,external_vue_namespaceObject.computed)(function () {
+    var borders = Array.isArray(props.border) ? props.border : typeof props.border === 'string' ? [props.border] : [];
+    return borders.includes('outer') || borders.includes('horizontal') ? 2 : 0;
+  });
   var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
     resolveClassName = _usePrefix.resolveClassName;
   var _useScrollLoading = use_scroll_loading(props, ctx),
@@ -6018,9 +6029,10 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     return (0,shared_namespaceObject.classes)(defineProperty_defineProperty({}, resolveClassName('table'), true), resolvePropBorderToClassStr(props.border));
   });
   var tableStyle = (0,external_vue_namespaceObject.computed)(function () {
+    var maxH = resolveNumberOrStringToPix(props.maxHeight);
     return {
       height: resolveNumberOrStringToPix(props.height),
-      maxHeight: resolveNumberOrStringToPix(props.maxHeight),
+      maxHeight: maxH === 'auto' ? undefined : maxH,
       minHeight: resolveNumberOrStringToPix(props.minHeight)
     };
   });
@@ -6124,17 +6136,19 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     }
     return null;
   };
-  // 虚拟滚动需要可计算的 viewport 高度（否则 height 会随内容撑开，无法产生滚动条）
-  var bodyHeight = (0,external_vue_namespaceObject.ref)(props.virtualEnabled ? '100%' : 'auto');
+  var hasMaxConstraint = props.maxHeight != null && props.maxHeight !== 'auto';
+  var isMaxHeightNumericPx = /^\d+\.?\d*(px)?$/.test("".concat(props.maxHeight));
+  var needsFixedViewport = props.virtualEnabled || props.height === 'auto' && hasMaxConstraint && isMaxHeightNumericPx;
+  var bodyHeight = (0,external_vue_namespaceObject.ref)(needsFixedViewport ? '100%' : 'auto');
   var bodyMaxHeight = (0,external_vue_namespaceObject.computed)(function () {
-    if (/^\d+\.?\d*(px|%)$/.test("".concat(tableStyle.value.maxHeight))) {
-      var delHeight = footHeight.value + fixedBottomHeight.value;
-      return "calc(".concat(tableStyle.value.maxHeight, " - ").concat(delHeight, "px)");
+    var maxH = tableStyle.value.maxHeight;
+    if (!maxH || maxH === 'auto' || maxH === undefined) {
+      return null;
     }
-    return null;
+    return '100%';
   });
   var getBodyHeight = function getBodyHeight(height) {
-    return height - fixedBottomHeight.value - footHeight.value;
+    return height - fixedBottomHeight.value - footHeight.value - wrapperBorderHeight.value;
   };
   var setBodyHeight = function setBodyHeight(height) {
     var withHeadFoot = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
@@ -6299,6 +6313,7 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     initRootStyleVars: initRootStyleVars,
     // expose for plugins that need scroll offset (e.g. column resize indicator)
     translateX: translateX,
+    headHeight: headHeight,
     refRoot: refRoot,
     refHead: refHead,
     refBody: refBody,
@@ -8733,10 +8748,13 @@ function use_render_isSlot(s) {
   var getRowRender = function getRowRender(row, rowIndex, preRow, rowList, rowSpanMap, needRowSpan) {
     var isChild = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
     var rowLength = rowList.length;
-    var rowStyle = [].concat(_toConsumableArray(_formatPropAsArray(props.rowStyle, [row, rowIndex])), [{
-      '--row-height': "".concat(getRowHeight(row, rowIndex), "px")
+    var rowHeightPx = "".concat(getRowHeight(row, rowIndex), "px");
+    var rowStyle = [].concat(_toConsumableArray(_formatPropAsArray(props.rowStyle, [row, rowIndex])), [props.rowHeight === 'auto' ? {
+      '--row-min-height': rowHeightPx
+    } : {
+      '--row-height': rowHeightPx
     }]);
-    var rowClass = [].concat(_toConsumableArray(_formatPropAsArray(props.rowClass, [row, rowIndex])), ["hover-".concat(props.rowHover), rowIndex % 2 === 1 && props.stripe ? 'stripe-row' : '']);
+    var rowClass = [].concat(_toConsumableArray(_formatPropAsArray(props.rowClass, [row, rowIndex])), ["hover-".concat(props.rowHover), rowIndex % 2 === 1 && props.stripe ? 'stripe-row' : '', props.rowHeight === 'auto' ? 'row-height-auto' : '']);
     var rowId = rows.getRowAttribute(row, const_TABLE_ROW_ATTRIBUTE.ROW_UID);
     return [(0,external_vue_namespaceObject.createVNode)(table_row, {
       "key": rowId
@@ -8978,6 +8996,9 @@ var useRows = function useRows(props) {
     return false;
   };
   var getSelfRowHeight = function getSelfRowHeight(row, rowIndex, type) {
+    if (props.rowHeight === 'auto') {
+      return LINE_HEIGHT;
+    }
     if (typeof props.rowHeight === 'function' || /^\d+/.test("".concat(props.rowHeight))) {
       return _resolvePropVal(props, 'rowHeight', [{
         index: rowIndex,
@@ -9713,6 +9734,7 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
       setHeaderRowCount = _useLayout.setHeaderRowCount,
       setLineHeight = _useLayout.setLineHeight,
       getBodyHeight = _useLayout.getBodyHeight,
+      headHeight = _useLayout.headHeight,
       refBody = _useLayout.refBody,
       refRoot = _useLayout.refRoot,
       translateX = _useLayout.translateX;
@@ -9723,11 +9745,14 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
       }
       return (_refBody$value = refBody.value) === null || _refBody$value === void 0 ? void 0 : _refBody$value.scrollTo.apply(_refBody$value, args);
     };
+    if (props.rowHeight === 'auto' && props.virtualEnabled) {
+      console.warn('[BkTable] rowHeight="auto" 与 virtualEnabled 不兼容：虚拟滚动依赖固定行高计算，auto 模式下行高由内容决定，滚动位置将不准确。请勿同时使用。');
+    }
     if (typeof props.rowHeight === 'function') {
       setLineHeight(function (args) {
         return rows.getRowHeight(args.rows[0], args.index);
       });
-    } else {
+    } else if (props.rowHeight !== 'auto') {
       setLineHeight(props.rowHeight);
     }
     /**
@@ -9741,7 +9766,7 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
       if ((checked === null || checked === void 0 ? void 0 : checked.length) > 0) {
         scrollTo(0, 0);
       }
-      if (typeof props.rowHeight !== 'function') {
+      if (typeof props.rowHeight !== 'function' && props.rowHeight !== 'auto') {
         rows.setRowHeight(height);
         setLineHeight(height);
       }
@@ -9860,18 +9885,105 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
       });
       return renderList;
     });
+    var isNumericPx = function isNumericPx(val) {
+      return /^\d+\.?\d*(px)?$/.test("".concat(val));
+    };
+    var hasMaxHeightConstraint = function hasMaxHeightConstraint() {
+      return props.maxHeight != null && props.maxHeight !== 'auto';
+    };
     var footHeight = (0,external_vue_namespaceObject.computed)(function () {
       return pagination.isShowPagination.value ? props.paginationHeight : 0;
     });
     var hasNonPxHeight = function hasNonPxHeight() {
-      return props.height != null && props.height !== 'auto' && !/^\d+\.?\d*(px)?$/.test("".concat(props.height));
+      return props.height != null && props.height !== 'auto' && !isNumericPx(props.height);
+    };
+    var needsDynamicBodyHeight = function needsDynamicBodyHeight() {
+      return props.virtualEnabled || hasNonPxHeight() || props.height === 'auto' && hasMaxHeightConstraint();
+    };
+    /**
+     * 计算滚动容器内的实际内容总高度
+     * 滚动容器 (.bk-table-body) 内包含：
+     *   1. 表头 — 由 showHead 控制是否展示，高度 = headHeight(受 headHeight/thead props) × headerRowCount（多级表头）
+     *   2. 数据行 — 高度 = 各行行高之和（受 rowHeight prop 和行数据影响）
+     *
+     * rowHeight='auto' 时每行 schema 存储的是估算值(LINE_HEIGHT=42)，
+     * 不反映实际渲染高度，故改为从 DOM 读取 scrollHeight 获得真实内容高度。
+     */
+    var getScrollContentHeight = function getScrollContentHeight() {
+      var _refBody$value3;
+      var scrollEl = (_refBody$value3 = refBody.value) === null || _refBody$value3 === void 0 ? void 0 : _refBody$value3.refRoot;
+      if (props.rowHeight === 'auto') {
+        if (scrollEl && scrollEl.scrollHeight > 0) {
+          return scrollEl.scrollHeight;
+        }
+      }
+      var rowsHeight = rows.getCurrentPageRowsHeight();
+      var scrollHeaderHeight = props.showHead ? headHeight.value : 0;
+      var calculatedHeight = rowsHeight + scrollHeaderHeight;
+      if (rows.pageRowList.length === 0) {
+        if (scrollEl && scrollEl.scrollHeight > calculatedHeight) {
+          return scrollEl.scrollHeight;
+        }
+      }
+      return calculatedHeight;
+    };
+    /**
+     * 获取外层容器的最大可用高度
+     *
+     * 当 height="auto" + 非像素值 maxHeight（如 calc(100vh - 180px)）时，
+     * root 容器的 offsetHeight 会因 height:auto 随内容缩小，
+     * 导致异步加载数据后 offsetHeight 反映的是缩小后的高度而非实际可用空间。
+     *
+     * 此函数通过 getComputedStyle 获取浏览器解析后的 maxHeight 真实像素值，
+     * 作为计算可用空间的天花板，打破循环依赖。
+     *
+     * 对于像素值 maxHeight，直接使用该数值（无循环依赖问题）。
+     * 对于非 auto 的固定 height，使用 offsetHeight（不会缩小）。
+     */
+    var getMaxContainerHeight = function getMaxContainerHeight() {
+      if (!(0,isElement_namespaceObject["default"])(refRoot.value) || refRoot.value.offsetHeight <= 0) return 0;
+      if (isNumericPx(props.maxHeight)) {
+        return Number("".concat(props.maxHeight).replace('px', ''));
+      }
+      if (props.height === 'auto' && hasMaxHeightConstraint()) {
+        var resolved = parseFloat(getComputedStyle(refRoot.value).maxHeight);
+        if (!isNaN(resolved) && resolved > 0) return resolved;
+      }
+      return refRoot.value.offsetHeight;
+    };
+    /**
+     * 计算 height="auto" + maxHeight 模式下滚动容器的高度
+     *
+     * 可用空间 = getMaxContainerHeight() - 分页器(paginationHeight) - fixedBottom - 边框
+     *   由 getBodyHeight 统一计算，内部已根据各 props 动态得出
+     *
+     * 最终高度 = min(内容高度, 可用空间)
+     *   内容 < 可用空间 → 不出现滚动条
+     *   内容 > 可用空间 → 限制在可用空间内，出现滚动条
+     */
+    var resolveContentAwareBodyHeight = function resolveContentAwareBodyHeight() {
+      var containerHeight = getMaxContainerHeight();
+      if (containerHeight <= 0) return false;
+      var contentHeight = getScrollContentHeight();
+      var availableHeight = getBodyHeight(containerHeight);
+      if (availableHeight > 0 && contentHeight > 0) {
+        setBodyHeight(Math.min(contentHeight, availableHeight), false);
+        return true;
+      }
+      return false;
     };
     var setTableFootHeight = function setTableFootHeight() {
       setFootHeight(footHeight.value);
-      if (/^\d+\.?\d*(px)?$/.test("".concat(props.height))) {
+      if (isNumericPx(props.height)) {
         setBodyHeight(Number("".concat(props.height).replace('px', '')));
-      } else if (hasNonPxHeight() && (0,isElement_namespaceObject["default"])(refRoot.value) && refRoot.value.offsetHeight > 0) {
-        setBodyHeight(refRoot.value.offsetHeight);
+      } else if (needsDynamicBodyHeight() && (0,isElement_namespaceObject["default"])(refRoot.value) && refRoot.value.offsetHeight > 0) {
+        if (props.height === 'auto' && hasMaxHeightConstraint()) {
+          if (!resolveContentAwareBodyHeight()) {
+            setBodyHeight(refRoot.value.offsetHeight);
+          }
+        } else {
+          setBodyHeight(refRoot.value.offsetHeight);
+        }
       }
     };
     var scrollTo00 = (0,external_vue_namespaceObject.ref)(false);
@@ -9906,21 +10018,25 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
     use_observer_resize(refRoot, function () {
       if (!observerResizing.value) {
         observerResizing.value = true;
-        if ((props.virtualEnabled || hasNonPxHeight()) && (0,isElement_namespaceObject["default"])(refRoot.value)) {
+        if (needsDynamicBodyHeight() && (0,isElement_namespaceObject["default"])(refRoot.value)) {
           if (isResizeBodyHeight.value) {
             setTimeout(function () {
               isResizeBodyHeight.value = false;
             });
             return;
           }
-          var tableHeight = refRoot.value.offsetHeight;
           isResizeBodyHeight.value = true;
-          setBodyHeight(tableHeight);
+          if (props.height === 'auto' && hasMaxHeightConstraint()) {
+            if (!resolveContentAwareBodyHeight()) {
+              setBodyHeight(refRoot.value.offsetHeight);
+            }
+          } else {
+            setBodyHeight(refRoot.value.offsetHeight);
+          }
           setOffsetRight();
         }
         computedColumnRect();
         setOffsetRight();
-        scrollTo(0, 0);
         return;
       }
       observerResizingTimer && clearTimeout(observerResizingTimer);
@@ -9929,18 +10045,15 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
       });
     });
     var setRowsBodyHeight = function setRowsBodyHeight() {
-      if (props.virtualEnabled) {
-        // 虚拟滚动下，VirtualRender 的 height 应表达“可视窗口高度”，不应被内容总高度覆盖
-        // - 当显式设置了 props.height（px/number）时，bodyHeight 已由 setTableFootHeight / resize 逻辑维护
-        // - 当显式设置了 props.maxHeight（px/number）时，可按内容高度与 maxHeight 取最小值（短列表不出现滚动条）
-        // - 其他情况保持现有 bodyHeight（通常来自 resize observer 或 '100%'）
-        if (/^\d+\.?\d*(px)?$/.test("".concat(props.height))) {
-          return;
-        }
-        if (/^\d+\.?\d*(px)?$/.test("".concat(props.maxHeight))) {
-          var rowsHeight = rows.getCurrentPageRowsHeight();
-          var maxHeight = getBodyHeight(Number("".concat(props.maxHeight).replace('px', '')));
-          setBodyHeight(Math.min(rowsHeight, maxHeight), false);
+      if (isNumericPx(props.height)) {
+        return;
+      }
+      if (hasMaxHeightConstraint()) {
+        if (!resolveContentAwareBodyHeight()) {
+          var contentHeight = getScrollContentHeight();
+          if (contentHeight > 0) {
+            setBodyHeight(contentHeight, false);
+          }
         }
       }
     };
@@ -9983,6 +10096,9 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
       return [pagination.isShowPagination.value];
     }, function () {
       setTableFootHeight();
+      (0,external_vue_namespaceObject.nextTick)(function () {
+        return scrollTo(0, 0);
+      });
     }, {
       immediate: true
     });
@@ -10019,8 +10135,8 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
     });
     (0,external_vue_namespaceObject.watch)(pageListLength, function (val, old) {
       if (val < old) {
-        var _refBody$value3, _refBody$value3$updat;
-        refBody === null || refBody === void 0 || (_refBody$value3 = refBody.value) === null || _refBody$value3 === void 0 || (_refBody$value3$updat = _refBody$value3.updateScroll) === null || _refBody$value3$updat === void 0 || _refBody$value3$updat.call(_refBody$value3);
+        var _refBody$value4, _refBody$value4$updat;
+        refBody === null || refBody === void 0 || (_refBody$value4 = refBody.value) === null || _refBody$value4 === void 0 || (_refBody$value4$updat = _refBody$value4.updateScroll) === null || _refBody$value4$updat === void 0 || _refBody$value4$updat.call(_refBody$value4);
         scrollTo(undefined, 0);
       }
     });

package/lib/table/props.d.ts

@@ -144,7 +144,7 @@ export type SpanFunctionString = (({ column, colIndex, row, rowIndex }: {
 export declare const SpanFunctionStringType: import("vue-types").VueTypeDef<SpanFunctionString>;
 export type RowClassFunctionString = ((row: Record<string, object>) => string) | string;
 export declare const RowClassFunctionStringType: import("vue-types").VueTypeDef<RowClassFunctionString>;
-export type RowHeightFunctionNumber = ((type: string, row: Record<string, object>, rowIndex: number, size?: any) => number) | number;
+export type RowHeightFunctionNumber = ((type: string, row: Record<string, object>, rowIndex: number, size?: any) => number) | number | 'auto';
 export declare const RowHeightFunctionNumberType: import("vue-types").VueTypeDef<RowHeightFunctionNumber>;
 type FunctionNumber = ((...args: any[]) => void) | number;
 export declare const FunctionNumberType: import("vue-types").VueTypeDef<FunctionNumber>;

package/lib/table/table.css

@@ -1096,12 +1096,10 @@
 .bk-table {
   position: relative;
   width: 100%;
-  height: 100%;
   overflow: hidden;
   border-spacing: 0;
   display: flex;
   flex-direction: column;
-  max-height: fit-content;
 }
 .bk-table .bk-table-body {
   position: relative;
@@ -1122,8 +1120,10 @@
 .bk-table .bk-table-body-wrapper {
   position: relative;
   width: 100%;
-  height: 100%;
+  flex: 1 1 auto;
+  min-height: 0;
   overflow: hidden;
+  font-size: 0;
 }
 .bk-table .bk-table-body-wrapper .bk-table-head-settings-wrapper {
   position: absolute;
@@ -1392,6 +1392,10 @@
   transform-origin: center;
   content: '';
 }
+.bk-table .bk-table-head table thead th.cell-resize,
+.bk-table .bk-table-body table thead th.cell-resize {
+  cursor: col-resize;
+}
 .bk-table .bk-table-head table thead th .cell,
 .bk-table .bk-table-body table thead th .cell {
   display: flex;
@@ -1399,10 +1403,6 @@
   height: calc(var(--row-height) - 2px);
   color: #313238;
 }
-.bk-table .bk-table-head table thead th .cell.cell-resize,
-.bk-table .bk-table-body table thead th .cell.cell-resize {
-  cursor: col-resize;
-}
 .bk-table .bk-table-head table:not(.col-resize-hover) thead th.active,
 .bk-table .bk-table-body table:not(.col-resize-hover) thead th.active,
 .bk-table .bk-table-head table:not(.col-resize-hover) thead th:hover,
@@ -1418,6 +1418,10 @@
 .bk-table .bk-table-body table tbody tr.stripe-row td {
   background-color: #fafbfd;
 }
+.bk-table .bk-table-head table tbody tr:last-child td,
+.bk-table .bk-table-body table tbody tr:last-child td {
+  border-bottom: none;
+}
 .bk-table .bk-table-head table tbody tr td,
 .bk-table .bk-table-body table tbody tr td {
   background-color: #fff;
@@ -1442,6 +1446,23 @@
   text-align: center;
   cursor: move;
 }
+.bk-table .bk-table-head table tbody tr.row-height-auto td,
+.bk-table .bk-table-body table tbody tr.row-height-auto td {
+  height: auto !important;
+  min-height: var(--row-min-height, 42px);
+}
+.bk-table .bk-table-head table tbody tr.row-height-auto td .cell,
+.bk-table .bk-table-body table tbody tr.row-height-auto td .cell {
+  display: flex;
+  align-items: center;
+  height: auto;
+  min-height: calc(var(--row-min-height, 42px) - 4px);
+  white-space: normal;
+  overflow: visible;
+  text-overflow: unset;
+  word-break: break-word;
+  line-height: normal;
+}
 .bk-table .bk-table-head table tbody tr:hover.hover-highlight td:not(.empty-cell),
 .bk-table .bk-table-body table tbody tr:hover.hover-highlight td:not(.empty-cell) {
   background: #f5f7fa;
@@ -1502,22 +1523,46 @@
 .bk-table .bk-table-footer.is-hidden {
   display: none;
 }
+.bk-table .bk-table-footer:not(.is-hidden) {
+  border-top: 1px solid #dcdee5;
+}
 .bk-table.bordered-row .bk-table-head {
   border-bottom: 1px solid #dcdee5;
 }
 .bk-table.bordered-row .bk-table-body tbody tr td {
   border-bottom-color: #dcdee5;
 }
-.bk-table.bordered-outer {
+.bk-table.bordered-outer .bk-table-body-wrapper {
   border: 1px solid #dcdee5;
+  border-radius: 2px;
+  box-sizing: border-box;
+}
+.bk-table.bordered-outer .bk-table-footer:not(.is-hidden) {
+  border-left: 1px solid #dcdee5;
+  border-right: 1px solid #dcdee5;
+  border-bottom: 1px solid #dcdee5;
+  border-radius: 0 0 2px 2px;
+  box-sizing: border-box;
+}
+.bk-table.bordered-outer .bk-table-body-wrapper:has( ~ .bk-table-footer:not(.is-hidden)) {
+  border-bottom: none;
+  border-radius: 2px 2px 0 0;
 }
-.bk-table.bordered-horizontal {
+.bk-table.bordered-horizontal .bk-table-body-wrapper {
   border-top: 1px solid #dcdee5;
   border-bottom: 1px solid #dcdee5;
+  box-sizing: border-box;
 }
-.bk-table.bordered-outer .__is-empty .bk-table-body-content,
-.bk-table.bordered-horizontal .__is-empty .bk-table-body-content {
+.bk-table.bordered-horizontal .bk-table-footer:not(.is-hidden) {
   border-bottom: 1px solid #dcdee5;
+  box-sizing: border-box;
+}
+.bk-table.bordered-horizontal .bk-table-body-wrapper:has( ~ .bk-table-footer:not(.is-hidden)) {
+  border-bottom: none;
+}
+.bk-table.bordered-outer .bk-table-body tbody tr:last-child td,
+.bk-table.bordered-horizontal .bk-table-body tbody tr:last-child td {
+  border-bottom-color: white;
 }
 .bk-table.bordered-col .bk-table-head {
   border-right: 1px solid #dcdee5;
@@ -1543,6 +1588,12 @@
 .bk-table.bordered-col .bk-table-body tbody tr:hover.hover-highlight td:not(.empty-cell) {
   border-right-color: #dcdee5;
 }
+.bk-table.bordered-col.bordered-outer .bk-table-head {
+  border-right: none;
+}
+.bk-table.bordered-col.bordered-outer .bk-table-body {
+  border-right: none;
+}
 .bk-table th,
 .bk-table td {
   border-right: 1px solid white;