bkui-vue 2.1.0-dev-beta.1 → 2.1.0-dev-beta.3

package/lib/index.js

@@ -3,5 +3,5 @@ export * from './hooks';
 export { default } from './preset';
 export * from './config-provider';
 export * from './directives';
-export const version = "2.1.0-dev-beta.1";
+export const version = "2.1.0-dev-beta.3";
 window.__bkui_vue_version__ = version;

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

@@ -7,7 +7,8 @@ declare const _default: (props: TablePropTypes, ctx: any) => {
     renderFooter: (childrend?: any) => JSX.Element;
     renderFixedBottom: () => JSX.Element;
     getBodyHeight: (height: any) => number;
-    setBodyHeight: (height: number, withHeadFoot?: boolean) => void;
+    setBodyHeight: (height: number | string, withHeadFoot?: boolean) => void;
+    setBodyScrollable: (scrollable: boolean) => void;
     setVirtualBodyHeight: (height: number) => void;
     setFootHeight: (height: number) => void;
     setTranslateX: (val: number) => void;

package/lib/table/index.js

@@ -6140,6 +6140,13 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
   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');
+  // 当 height=auto + 非像素 maxHeight（如 calc(100vh-180px)）时：
+  // Chrome 的 scrollHeight/clientHeight 整数截断会在子像素内容高度下产生虚假滚动条。
+  // 初始设为 false（overflow-y:hidden），JS 检测到内容超出 maxHeight 后再切换为 true（overflow-y:auto）。
+  var bodyScrollable = (0,external_vue_namespaceObject.ref)(!hasMaxConstraint || needsFixedViewport);
+  var setBodyScrollable = function setBodyScrollable(scrollable) {
+    bodyScrollable.value = scrollable;
+  };
   var bodyMaxHeight = (0,external_vue_namespaceObject.computed)(function () {
     var maxH = tableStyle.value.maxHeight;
     if (!maxH || maxH === 'auto' || maxH === undefined) {
@@ -6152,6 +6159,10 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
   };
   var setBodyHeight = function setBodyHeight(height) {
     var withHeadFoot = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    if (typeof height === 'string') {
+      bodyHeight.value = height;
+      return;
+    }
     if (withHeadFoot) {
       bodyHeight.value = getBodyHeight(height);
       return;
@@ -6250,7 +6261,9 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     }, [(0,external_vue_namespaceObject.createVNode)(virtual_render_namespaceObject["default"], {
       "ref": refBody,
       "height": bodyHeight.value,
-      "class": bodyClass,
+      "class": use_layout_objectSpread(use_layout_objectSpread({}, bodyClass), {}, {
+        'is-overflow-hidden': !bodyScrollable.value
+      }),
       "contentClassName": scrollContentClass.value,
       "enabled": props.virtualEnabled,
       "lineHeight": lineHeight.value,
@@ -6302,6 +6315,7 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     renderFixedBottom: renderFixedBottom,
     getBodyHeight: getBodyHeight,
     setBodyHeight: setBodyHeight,
+    setBodyScrollable: setBodyScrollable,
     setVirtualBodyHeight: setVirtualBodyHeight,
     setFootHeight: setFootHeight,
     setTranslateX: setTranslateX,
@@ -8748,8 +8762,11 @@ 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' : '', props.rowHeight === 'auto' ? 'row-height-auto' : '']);
     var rowId = rows.getRowAttribute(row, const_TABLE_ROW_ATTRIBUTE.ROW_UID);
@@ -9725,6 +9742,7 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
       renderBody = _useLayout.renderBody,
       renderFooter = _useLayout.renderFooter,
       setBodyHeight = _useLayout.setBodyHeight,
+      setBodyScrollable = _useLayout.setBodyScrollable,
       setFootHeight = _useLayout.setFootHeight,
       setDragOffsetX = _useLayout.setDragOffsetX,
       setOffsetRight = _useLayout.setOffsetRight,
@@ -9742,6 +9760,9 @@ 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);
@@ -9899,14 +9920,22 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
      * 滚动容器 (.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) {
-        var _refBody$value3;
-        var scrollEl = (_refBody$value3 = refBody.value) === null || _refBody$value3 === void 0 ? void 0 : _refBody$value3.refRoot;
         if (scrollEl && scrollEl.scrollHeight > calculatedHeight) {
           return scrollEl.scrollHeight;
         }
@@ -9943,9 +9972,12 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
      * 可用空间 = getMaxContainerHeight() - 分页器(paginationHeight) - fixedBottom - 边框
      *   由 getBodyHeight 统一计算，内部已根据各 props 动态得出
      *
-     * 最终高度 = min(内容高度, 可用空间)
-     *   内容 < 可用空间 → 不出现滚动条
-     *   内容 > 可用空间 → 限制在可用空间内，出现滚动条
+     * 内容 < 可用空间 → bodyHeight 保持 'auto'，由 CSS 自然撑高，避免整数截断导致的伪滚动条
+     * 内容 ≥ 可用空间 → 设置固定 px 高度，触发真实滚动
+     *
+     * 之所以不用 Math.min(contentHeight, availableHeight)：
+     * 行高为 auto 时内容高度有小数（如 589.33px），JS scrollHeight 向上取整为 590，
+     * 若强制 bodyHeight = 589（整数），则 clientHeight(589) < scrollHeight(590) 产生假滚动条。
      */
     var resolveContentAwareBodyHeight = function resolveContentAwareBodyHeight() {
       var containerHeight = getMaxContainerHeight();
@@ -9953,7 +9985,16 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
       var contentHeight = getScrollContentHeight();
       var availableHeight = getBodyHeight(containerHeight);
       if (availableHeight > 0 && contentHeight > 0) {
-        setBodyHeight(Math.min(contentHeight, availableHeight), false);
+        if (contentHeight >= availableHeight) {
+          // 内容超出最大高度：固定 body 高度 + 开启 overflow-y:auto，触发真实滚动
+          setBodyScrollable(true);
+          setBodyHeight(availableHeight, false);
+        } else {
+          // 内容未超出：重置为 auto + 关闭 overflow-y（hidden），
+          // 阻止 Chrome scrollHeight/clientHeight 整数截断产生的 1px 虚假滚动条
+          setBodyScrollable(false);
+          setBodyHeight('auto', false);
+        }
         return true;
       }
       return false;

package/lib/table/table.css

@@ -1117,6 +1117,9 @@
 .bk-table .bk-table-body.is-bk-scrollbar {
   overflow: hidden;
 }
+.bk-table .bk-table-body.is-overflow-hidden {
+  overflow-y: hidden !important;
+}
 .bk-table .bk-table-body-wrapper {
   position: relative;
   width: 100%;
@@ -1449,14 +1452,18 @@
 .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-height);
+  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-height) - 4px);
+  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),

package/lib/table/table.d.ts

@@ -12,6 +12,19 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     height: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
+    /**
+     * 计算 height="auto" + maxHeight 模式下滚动容器的高度
+     *
+     * 可用空间 = getMaxContainerHeight() - 分页器(paginationHeight) - fixedBottom - 边框
+     *   由 getBodyHeight 统一计算，内部已根据各 props 动态得出
+     *
+     * 内容 < 可用空间 → bodyHeight 保持 'auto'，由 CSS 自然撑高，避免整数截断导致的伪滚动条
+     * 内容 ≥ 可用空间 → 设置固定 px 高度，触发真实滚动
+     *
+     * 之所以不用 Math.min(contentHeight, availableHeight)：
+     * 行高为 auto 时内容高度有小数（如 589.33px），JS scrollHeight 向上取整为 590，
+     * 若强制 bodyHeight = 589（整数），则 clientHeight(589) < scrollHeight(590) 产生假滚动条。
+     */
     stripe: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -190,6 +203,19 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     height: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
+    /**
+     * 计算 height="auto" + maxHeight 模式下滚动容器的高度
+     *
+     * 可用空间 = getMaxContainerHeight() - 分页器(paginationHeight) - fixedBottom - 边框
+     *   由 getBodyHeight 统一计算，内部已根据各 props 动态得出
+     *
+     * 内容 < 可用空间 → bodyHeight 保持 'auto'，由 CSS 自然撑高，避免整数截断导致的伪滚动条
+     * 内容 ≥ 可用空间 → 设置固定 px 高度，触发真实滚动
+     *
+     * 之所以不用 Math.min(contentHeight, availableHeight)：
+     * 行高为 auto 时内容高度有小数（如 589.33px），JS scrollHeight 向上取整为 590，
+     * 若强制 bodyHeight = 589（整数），则 clientHeight(589) < scrollHeight(590) 产生假滚动条。
+     */
     stripe: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {

package/lib/table/table.less

@@ -37,6 +37,12 @@
       overflow: hidden;
     }
 
+    // height=auto + 非像素 maxHeight 时，内容未超出 maxHeight：
+    // 阻止 Chrome scrollHeight/clientHeight 整数截断产生的 1px 虚假垂直滚动条
+    &.is-overflow-hidden {
+      overflow-y: hidden !important;
+    }
+
   }
 
   // body overlay wrapper（让 overlay 不参与原生滚动）
@@ -406,14 +412,20 @@
           &.row-height-auto {
             td {
               // 覆盖全局 th, td { height: var(--row-height) }，让内容撑起行高
+              // auto 模式使用独立的 --row-min-height 变量，语义上明确表示最小高度而非固定高度
               height: auto !important;
-              min-height: var(--row-height);
+              min-height: var(--row-min-height, 42px);
 
               .cell {
                 display: flex;
                 align-items: center;
                 height: auto;
-                min-height: calc(var(--row-height) - 4px);
+                min-height: calc(var(--row-min-height, 42px) - 4px);
+                // 允许文字换行，覆盖全局 white-space: nowrap / overflow: hidden / text-overflow: ellipsis
+                white-space: normal;
+                overflow: visible;
+                text-overflow: unset;
+                word-break: break-word;
                 line-height: normal;
               }
             }

package/lib/table/table.variable.css

@@ -1248,6 +1248,9 @@
 .bk-table .bk-table-body.is-bk-scrollbar {
   overflow: hidden;
 }
+.bk-table .bk-table-body.is-overflow-hidden {
+  overflow-y: hidden !important;
+}
 .bk-table .bk-table-body-wrapper {
   position: relative;
   width: 100%;
@@ -1580,14 +1583,18 @@
 .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-height);
+  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-height) - 4px);
+  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),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bkui-vue",
-  "version": "2.1.0-dev-beta.1",
+  "version": "2.1.0-dev-beta.3",
   "workspaces": [
     "packages/**",
     "scripts/cli",