bkui-vue 2.0.1-beta.15.table.3 → 2.0.1-beta.15.table.4

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.15.table.3";
+export const version = "2.0.1-beta.15.table.4";
 window.__bkui_vue_version__ = version;

package/lib/scrollbar/index.js

@@ -929,7 +929,6 @@ var BkScrollbarCore = /*#__PURE__*/function () {
     value: function initListeners() {
       var _this$mouseWheelInsta,
         _this2 = this;
-      console.log('initListeners');
       var elWindow = scrollbar_core_getElementWindow(this.el);
       // Event listeners
       (_this$mouseWheelInsta = this.mouseWheelInstance) === null || _this$mouseWheelInsta === void 0 || _this$mouseWheelInsta.addWheelEvent(this.el);
@@ -995,8 +994,8 @@ var BkScrollbarCore = /*#__PURE__*/function () {
       var wrapperOffsetHeight = this.wrapperEl.offsetHeight;
       var wrapperScrollHeight = this.getWrapperElScrollSize('scrollHeight'); // this.wrapperEl.scrollHeight;
       var wrapperScrollWidth = this.getWrapperElScrollSize('scrollWidth'); // this.wrapperEl.scrollWidth;
-      this.axis.x.isOverflowing = wrapperOffsetWidth !== 0 && wrapperScrollWidth > wrapperOffsetWidth;
-      this.axis.y.isOverflowing = wrapperScrollHeight > wrapperOffsetHeight;
+      this.axis.x.isOverflowing = wrapperOffsetWidth !== 0 && wrapperScrollWidth - wrapperOffsetWidth > 2;
+      this.axis.y.isOverflowing = wrapperScrollHeight - wrapperOffsetHeight > 2;
       this.axis.x.forceVisible = this.options.forceVisible === 'x' || this.options.forceVisible === true;
       this.axis.y.forceVisible = this.options.forceVisible === 'y' || this.options.forceVisible === true;
       // Set isOverflowing to false if scrollbar is not necessary (content is shorter than offset)

package/lib/table/components/table-column.d.ts

@@ -113,6 +113,7 @@ declare const _default: import("vue").DefineComponent<{
         showOverflowTooltip?: boolean | {
             content: string | ((col: import("../props").Column, row: any) => string);
             disabled?: boolean | ((col: import("../props").Column, row: any) => boolean);
+            allowHtml?: boolean;
             watchCellResize?: boolean;
             mode?: "auto" | "static";
             popoverOption?: any;

package/lib/table/hooks/use-column-resize.d.ts

@@ -1,5 +1,7 @@
 import { UseColumns } from './use-columns';
-declare const _default: (columns: UseColumns) => {
+declare const _default: (columns: UseColumns, { afterResize }: {
+    afterResize: any;
+}) => {
     dragOffsetX: import("vue").Ref<number>;
 };
 export default _default;

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

@@ -6,7 +6,7 @@ declare const useColumns: (props: TablePropTypes) => {
     headHeight: import("vue").ComputedRef<number>;
     tableColumnSchema: WeakMap<object, any> & Omit<WeakMap<object, any>, keyof WeakMap<any, any>>;
     tableColumnList: any[];
-    visibleColumns: any[];
+    visibleColumns: Column[];
     debounceUpdateColumns: import("lodash").DebouncedFunc<(columns: any) => void>;
     sortColumns: any[];
     filterColumns: any[];
@@ -32,6 +32,7 @@ declare const useColumns: (props: TablePropTypes) => {
     getColumnRect: (column: Column) => any;
     getColumnCustomClass: (column: any, row?: any) => any;
     getColumnRefAttribute: (col: Column | IEmptyObject, attributeName: string) => any;
+    getColumnCalcWidth: (column: Column) => any;
     resolveEventListener: (col: Column) => any;
     setColumnIsHidden: (column: Column, value?: boolean) => void;
     setColumnResizeWidth: (column: Column, value: number) => void;
@@ -48,6 +49,7 @@ declare const useColumns: (props: TablePropTypes) => {
         height?: number;
     }) => void;
     setVisibleColumns: () => void;
+    resolveColsCalcWidth: (width: number) => void;
 };
 export type UseColumns = ReturnType<typeof useColumns>;
 export default useColumns;

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

@@ -1,7 +1,7 @@
 import { SetupContext } from 'vue';
 import { TablePropTypes } from '../props';
 import { UseColumns } from './use-columns';
-declare const useSettings: (props: TablePropTypes, ctx: SetupContext, columns: UseColumns) => {
+declare const useSettings: (props: TablePropTypes, ctx: SetupContext, columns: UseColumns, afterSetting: any) => {
     options: {
         fields: any[];
         checked: any[];

package/lib/table/index.d.ts

@@ -896,6 +896,7 @@ declare const BkTable: {
             showOverflowTooltip?: boolean | {
                 content: string | ((col: import("./props").Column, row: any) => string);
                 disabled?: boolean | ((col: import("./props").Column, row: any) => boolean);
+                allowHtml?: boolean;
                 watchCellResize?: boolean;
                 mode?: "auto" | "static";
                 popoverOption?: any;

package/lib/table/index.js

@@ -17692,9 +17692,9 @@ var tableProps = {
   stripe: shared_namespaceObject.PropTypes.bool.def(false),
   /**
    * 设置表格最小高度
-   * 默认：300
+   * 默认：LINE_HEIGHT * 4
    */
-  minHeight: StringNumberType(LINE_HEIGHT * 2),
+  minHeight: StringNumberType(LINE_HEIGHT * 4),
   /**
    * 设置表格最d大高度
    * 默认：auto，依赖外层高度
@@ -18116,7 +18116,8 @@ const isElement_namespaceObject = isElement_x({ ["default"]: () => __WEBPACK_EXT
 
 
 
-/* harmony default export */ const use_column_resize = (function (columns) {
+/* harmony default export */ const use_column_resize = (function (columns, _ref) {
+  var afterResize = _ref.afterResize;
   var getColumnAttribute = columns.getColumnAttribute,
     getColumnOrderWidth = columns.getColumnOrderWidth,
     setColumnAttribute = columns.setColumnAttribute;
@@ -18152,12 +18153,15 @@ const isElement_namespaceObject = isElement_x({ ["default"]: () => __WEBPACK_EXT
     var diff = e.clientX - startX;
     var resolveWidth = getColumnOrderWidth(dragColumn, ORDER_LIST) + diff;
     var minWidth = getColumnOrderWidth(dragColumn, [COLUMN_ATTRIBUTE.COL_MIN_WIDTH]);
-    setColumnAttribute(dragColumn, COLUMN_ATTRIBUTE.RESIZE_WIDTH, resolveWidth > minWidth ? resolveWidth : minWidth);
+    var calcWidth = resolveWidth > minWidth ? resolveWidth : minWidth;
+    setColumnAttribute(dragColumn, COLUMN_ATTRIBUTE.RESIZE_WIDTH, calcWidth);
+    setColumnAttribute(dragColumn, COLUMN_ATTRIBUTE.CALC_WIDTH, calcWidth);
     document.removeEventListener('mouseup', handleMouseUp);
     document.removeEventListener('mousemove', handleMouseMove);
     startX = 0;
     dragOffsetX.value = -1000;
     dragColumn = null;
+    afterResize === null || afterResize === void 0 || afterResize();
   };
   var updateOffsetX = function updateOffsetX(e) {
     return (0,shared_namespaceObject.throttle)(function () {
@@ -18177,13 +18181,8 @@ const isElement_namespaceObject = isElement_x({ ["default"]: () => __WEBPACK_EXT
   };
   var setChildrenNodeCursor = function setChildrenNodeCursor(root, cursor) {
     if ((0,isElement_namespaceObject["default"])(root)) {
-      var _root$style, _root$childNodes;
+      var _root$style;
       (_root$style = root.style) === null || _root$style === void 0 || _root$style.setProperty('cursor', cursor);
-      if (((_root$childNodes = root.childNodes) === null || _root$childNodes === void 0 ? void 0 : _root$childNodes.length) > 0) {
-        root.childNodes.forEach(function (node) {
-          return setChildrenNodeCursor(node, cursor);
-        });
-      }
     }
   };
   var handler = defineProperty_defineProperty(defineProperty_defineProperty(defineProperty_defineProperty({}, EVENTS.MOUSE_DOWN, function (e, column) {
@@ -19962,6 +19961,21 @@ var getRawData = function getRawData(data) {
   }
   return data;
 };
+/**
+ * 转换 px | % 为实际数值
+ * @param val
+ * @param parentVal
+ * @returns
+ */
+var getNumberOrPercentValue = function getNumberOrPercentValue(val, parentVal) {
+  if (/^\d+\.?\d+(px)?$/.test("".concat(val))) {
+    return Number("".concat(val).replace(/px/, ''));
+  }
+  if (/^\d+\.?\d+%$/.test("".concat(val))) {
+    return Number("".concat(val).replace(/%/, '')) / 100 * (parentVal !== null && parentVal !== void 0 ? parentVal : 1);
+  }
+  return null;
+};
 ;// CONCATENATED MODULE: ../../packages/table/src/hooks/use-columns.tsx
 
 
@@ -20033,6 +20047,63 @@ var useColumns = function useColumns(props) {
       active: true
     }));
   };
+  var setColumnCalcWidth = function setColumnCalcWidth(col, attrName, width) {
+    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);
+      setColumnRect(col, {
+        width: colWidth,
+        left: null,
+        right: null
+      });
+    }
+    if (/^\d+\.?\d*%$/.test("".concat(col[attrName]))) {
+      colWidth = Number("".concat(col[attrName]).replace(/%/, '')) / 100 * width;
+      setColumnAttribute(col, COLUMN_ATTRIBUTE.CALC_WIDTH, colWidth);
+      setColumnRect(col, {
+        width: colWidth,
+        left: null,
+        right: null
+      });
+    }
+    return colWidth;
+  };
+  /**
+   * 根据表格外层宽度和表格列配置
+   * 计算每一列的宽度
+   * @param width
+   */
+  var resolveColsCalcWidth = function resolveColsCalcWidth(width) {
+    var diffWidth = width;
+    var minColWidth = COL_MIN_WIDTH;
+    var resolveColWidth = function resolveColWidth(colList) {
+      var attrName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'width';
+      var filterList = [];
+      colList.forEach(function (col) {
+        var calcWidth = setColumnCalcWidth(col, attrName, width);
+        diffWidth = diffWidth - calcWidth;
+        if ([undefined, null, 'auto', 'undefined', 'null', ''].includes(col[attrName])) {
+          filterList.push(col);
+        }
+      });
+      if (diffWidth > 0 && filterList.length) {
+        minColWidth = diffWidth / filterList.length;
+      }
+      return filterList;
+    };
+    var minWidthList = resolveColWidth(visibleColumns);
+    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);
+      setColumnRect(col, {
+        width: calcWidth,
+        left: null,
+        right: null
+      });
+    });
+  };
   /**
    * 用来记录列的过滤状态
    * @param col
@@ -20228,6 +20299,9 @@ var useColumns = function useColumns(props) {
   var getColumnRect = function getColumnRect(column) {
     return getColumnAttribute(column, COLUMN_ATTRIBUTE.COL_RECT);
   };
+  var getColumnCalcWidth = function getColumnCalcWidth(column) {
+    return getColumnAttribute(column, COLUMN_ATTRIBUTE.CALC_WIDTH);
+  };
   var setColumnRect = function setColumnRect(col, _ref2) {
     var left = _ref2.left,
       right = _ref2.right,
@@ -20429,6 +20503,7 @@ var useColumns = function useColumns(props) {
     getColumnRect: getColumnRect,
     getColumnCustomClass: getColumnCustomClass,
     getColumnRefAttribute: getColumnRefAttribute,
+    getColumnCalcWidth: getColumnCalcWidth,
     resolveEventListener: resolveEventListener,
     setColumnIsHidden: setColumnIsHidden,
     setColumnResizeWidth: setColumnResizeWidth,
@@ -20439,7 +20514,8 @@ var useColumns = function useColumns(props) {
     setColumnSortActive: setColumnSortActive,
     setFixedStyle: setFixedStyle,
     setColumnRect: setColumnRect,
-    setVisibleColumns: setVisibleColumns
+    setVisibleColumns: setVisibleColumns,
+    resolveColsCalcWidth: resolveColsCalcWidth
   };
 };
 /* harmony default export */ const use_columns = (useColumns);
@@ -20647,10 +20723,10 @@ var useColumns = function useColumns(props) {
     var length = fixedRightColumns.value.length;
     for (var i = length - 1; i >= 0; i--) {
       var col = fixedRightColumns.value[i];
-      var _columns$getColumnRec = columns.getColumnRect(col),
-        width = _columns$getColumnRec.width;
+      var width = columns.getColumnCalcWidth(col);
       columns.setColumnRect(col, {
-        right: right
+        right: right,
+        width: width
       });
       columns.setFixedStyle(col, {
         right: "".concat(right, "px")
@@ -20659,10 +20735,10 @@ var useColumns = function useColumns(props) {
     }
     var left = 0;
     fixedLeftColumns.value.forEach(function (col) {
-      var _columns$getColumnRec2 = columns.getColumnRect(col),
-        width = _columns$getColumnRec2.width;
+      var width = columns.getColumnCalcWidth(col);
       columns.setColumnRect(col, {
-        left: left
+        left: left,
+        width: width
       });
       columns.setFixedStyle(col, {
         left: "".concat(left, "px")
@@ -20766,7 +20842,9 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
   });
   var tableStyle = (0,external_vue_namespaceObject.computed)(function () {
     return {
-      height: resolveNumberOrStringToPix(props.height, '100%')
+      height: resolveNumberOrStringToPix(props.height),
+      maxHeight: resolveNumberOrStringToPix(props.maxHeight),
+      minHeight: resolveNumberOrStringToPix(props.minHeight)
     };
   });
   var headClass = (0,external_vue_namespaceObject.computed)(function () {
@@ -20876,6 +20954,10 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     }
     ctx.emit(EMIT_EVENTS.SCROLL_BOTTOM, use_layout_objectSpread({}, args));
   });
+  /**
+   * 设置横向滚动条距离右侧距离
+   * 用于判定fix column的显示样式
+   */
   var setOffsetRight = function setOffsetRight() {
     var _refBody$value$refRoo, _refBody$value, _refBody$value$refRoo2, _refBody$value2, _ref;
     var scrollWidth = (_refBody$value$refRoo = (_refBody$value = refBody.value) === null || _refBody$value === void 0 || (_refBody$value = _refBody$value.refRoot) === null || _refBody$value === void 0 ? void 0 : _refBody$value.scrollWidth) !== null && _refBody$value$refRoo !== void 0 ? _refBody$value$refRoo : 0;
@@ -21305,7 +21387,8 @@ const directives_namespaceObject = directives_x({ ["bkEllipsisInstance"]: () =>
     var isTipsEnabled = (0,external_vue_namespaceObject.ref)(false);
     var cellStyle = (0,external_vue_namespaceObject.computed)(function () {
       return {
-        textAlign: props.column.textAlign
+        textAlign: props.column.textAlign,
+        minWidth: resolveNumberOrStringToPix(props.column.minWidth, null)
       };
     });
     var resolveSetting = function resolveSetting() {
@@ -21324,12 +21407,12 @@ const directives_namespaceObject = directives_x({ ["bkEllipsisInstance"]: () =>
             mode: mode,
             resizerWay: undefined,
             watchCellResize: undefined,
-            popoverOption: popoverOption
+            popoverOption: popoverOption,
+            allowHtml: false
           }
         };
         if (props.parentSetting !== null && typeof_typeof(props.parentSetting) === 'object') {
-          Object.assign(result.showOverflowTooltip, props.parentSetting);
-          Object.assign(result.showOverflowTooltip, {
+          Object.assign(result.showOverflowTooltip, props.parentSetting, {
             disabled: !props.column.showOverflowTooltip
           });
           if (typeof_typeof(props.column.showOverflowTooltip) === 'object') {
@@ -21343,14 +21426,23 @@ const directives_namespaceObject = directives_x({ ["bkEllipsisInstance"]: () =>
       };
     };
     var bkEllipsisIns = null;
+    var getContentValue = function getContentValue() {
+      var _target$innerText;
+      var allowHtml = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      var target = getEllipsisTarget();
+      if (allowHtml) {
+        var _target$cloneNode, _target$cloneNode2;
+        return (_target$cloneNode = target === null || target === void 0 || (_target$cloneNode2 = target.cloneNode) === null || _target$cloneNode2 === void 0 ? void 0 : _target$cloneNode2.call(target, true)) !== null && _target$cloneNode !== void 0 ? _target$cloneNode : '';
+      }
+      return (_target$innerText = target === null || target === void 0 ? void 0 : target.innerText) !== null && _target$innerText !== void 0 ? _target$innerText : '';
+    };
     var resolveTooltipOption = function resolveTooltipOption() {
-      var _getEllipsisTarget$cl, _getEllipsisTarget, _getEllipsisTarget$cl2;
       var _resolveSetting = resolveSetting(),
         _resolveSetting$showO = _resolveSetting.showOverflowTooltip,
         showOverflowTooltip = _resolveSetting$showO === void 0 ? false : _resolveSetting$showO;
       var disabled = true;
       var resizerWay = props.resizerWay;
-      var defaultContent = (_getEllipsisTarget$cl = (_getEllipsisTarget = getEllipsisTarget()) === null || _getEllipsisTarget === void 0 || (_getEllipsisTarget$cl2 = _getEllipsisTarget.cloneNode) === null || _getEllipsisTarget$cl2 === void 0 ? void 0 : _getEllipsisTarget$cl2.call(_getEllipsisTarget, true)) !== null && _getEllipsisTarget$cl !== void 0 ? _getEllipsisTarget$cl : '';
+      var defaultContent = getContentValue(showOverflowTooltip.allowHtml);
       var content = function content() {
         return defaultContent;
       };
@@ -21395,8 +21487,8 @@ const directives_namespaceObject = directives_x({ ["bkEllipsisInstance"]: () =>
         disabled = !((_props$column$showOve5 = (_props$column = props.column) === null || _props$column === void 0 || (_props$column = _props$column.showOverflowTooltip) === null || _props$column === void 0 ? void 0 : _props$column.showHead) !== null && _props$column$showOve5 !== void 0 ? _props$column$showOve5 : true);
         mode = 'auto';
         content = function content() {
-          var _getEllipsisTarget$cl3, _getEllipsisTarget2, _getEllipsisTarget2$c;
-          return (_getEllipsisTarget$cl3 = (_getEllipsisTarget2 = getEllipsisTarget()) === null || _getEllipsisTarget2 === void 0 || (_getEllipsisTarget2$c = _getEllipsisTarget2.cloneNode) === null || _getEllipsisTarget2$c === void 0 ? void 0 : _getEllipsisTarget2$c.call(_getEllipsisTarget2, true)) !== null && _getEllipsisTarget$cl3 !== void 0 ? _getEllipsisTarget$cl3 : '';
+          var _getEllipsisTarget$cl, _getEllipsisTarget, _getEllipsisTarget$cl2;
+          return (_getEllipsisTarget$cl = (_getEllipsisTarget = getEllipsisTarget()) === null || _getEllipsisTarget === void 0 || (_getEllipsisTarget$cl2 = _getEllipsisTarget.cloneNode) === null || _getEllipsisTarget$cl2 === void 0 ? void 0 : _getEllipsisTarget$cl2.call(_getEllipsisTarget, true)) !== null && _getEllipsisTarget$cl !== void 0 ? _getEllipsisTarget$cl : '';
         };
         if (props.headExplain) {
           mode = 'static';
@@ -21646,7 +21738,8 @@ var ROW_HEIGHT = 32;
       var _filter$value$list = filter.value.list,
         list = _filter$value$list === void 0 ? [] : _filter$value$list;
       var filterList = list.filter(function (l) {
-        return getRegExp(searchValue.value).test(l.value);
+        var reg = getRegExp(searchValue.value);
+        return reg.test(l.label) || reg.test(l.value);
       });
       return filterList;
     });
@@ -22391,9 +22484,9 @@ function use_render_isSlot(s) {
       var minWidth = columns.getColumnAttribute(column, COLUMN_ATTRIBUTE.COL_MIN_WIDTH);
       return (0,external_vue_namespaceObject.createVNode)("col", {
         "style": {
+          width: resolveNumberOrStringToPix(width, 'auto'),
           minWidth: resolveNumberOrStringToPix(minWidth, 'auto')
-        },
-        "width": width
+        }
       }, null);
     })]);
   };
@@ -23337,7 +23430,7 @@ const loading_less_namespaceObject = loading_less_x({  });
 function use_settings_isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0,external_vue_namespaceObject.isVNode)(s);
 }
-var useSettings = function useSettings(props, ctx, columns) {
+var useSettings = function useSettings(props, ctx, columns, afterSetting) {
   var t = (0,config_provider_namespaceObject.useLocale)('table');
   var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
     resolveClassName = _usePrefix.resolveClassName;
@@ -23413,6 +23506,7 @@ var useSettings = function useSettings(props, ctx, columns) {
     Object.assign(options, result);
     columns.setColumnAttributeBySettings(options, result.checked);
     columns.setVisibleColumns();
+    afterSetting === null || afterSetting === void 0 || afterSetting(result.checked);
     (_refSetting$value = refSetting.value) === null || _refSetting$value === void 0 || _refSetting$value.hide();
     ctx.emit(EMIT_EVENTS.SETTING_CHANGE, result);
   };
@@ -23675,7 +23769,28 @@ var useSettings = function useSettings(props, ctx, columns) {
     var columns = use_columns(props);
     var rows = use_rows(props);
     var pagination = use_pagination(props);
-    var settings = use_settings(props, ctx, columns);
+    var _useLayout = use_layout(props, ctx),
+      renderContainer = _useLayout.renderContainer,
+      renderBody = _useLayout.renderBody,
+      renderHeader = _useLayout.renderHeader,
+      renderFooter = _useLayout.renderFooter,
+      setBodyHeight = _useLayout.setBodyHeight,
+      setFootHeight = _useLayout.setFootHeight,
+      setDragOffsetX = _useLayout.setDragOffsetX,
+      setOffsetRight = _useLayout.setOffsetRight,
+      refBody = _useLayout.refBody,
+      refRoot = _useLayout.refRoot;
+    /**
+     * 设置字段结束，展示字段改变，设置表格偏移量为0
+     * 避免太长横向滚动导致数据不可见
+     * @param fields
+     */
+    var afterSetting = function afterSetting(fields) {
+      if ((fields === null || fields === void 0 ? void 0 : fields.length) > 0) {
+        refBody.value.scrollTo(0, 0);
+      }
+    };
+    var settings = use_settings(props, ctx, columns, afterSetting);
     var dragEvents = use_draggable(props, rows, ctx);
     var _useRender = use_render({
         props: props,
@@ -23690,8 +23805,6 @@ var useSettings = function useSettings(props, ctx, columns) {
       renderTFoot = _useRender.renderTFoot,
       setDragEvents = _useRender.setDragEvents;
     setDragEvents(dragEvents);
-    var _useColumnResize = use_column_resize(columns),
-      dragOffsetX = _useColumnResize.dragOffsetX;
     var _useColumnTemplate = use_column_template(),
       resolveColumns = _useColumnTemplate.resolveColumns;
     var instance = (0,external_vue_namespaceObject.getCurrentInstance)();
@@ -23699,43 +23812,26 @@ var useSettings = function useSettings(props, ctx, columns) {
       columns.debounceUpdateColumns(resolveColumns(instance));
     };
     (0,external_vue_namespaceObject.provide)(PROVIDE_KEY_INIT_COL, initTableColumns);
-    var _useLayout = use_layout(props, ctx),
-      renderContainer = _useLayout.renderContainer,
-      renderBody = _useLayout.renderBody,
-      renderHeader = _useLayout.renderHeader,
-      renderFooter = _useLayout.renderFooter,
-      setBodyHeight = _useLayout.setBodyHeight,
-      setFootHeight = _useLayout.setFootHeight,
-      setDragOffsetX = _useLayout.setDragOffsetX,
-      setOffsetRight = _useLayout.setOffsetRight,
-      refRoot = _useLayout.refRoot,
-      refHead = _useLayout.refHead;
     var _useFixedColumn = use_fixed_column(props, columns),
       renderFixedRows = _useFixedColumn.renderFixedRows,
       resolveFixedColumnStyle = _useFixedColumn.resolveFixedColumnStyle;
     var _useScrollLoading = use_scroll_loading(props, ctx),
       renderScrollLoading = _useScrollLoading.renderScrollLoading;
-    var isResizeBodyHeight = (0,external_vue_namespaceObject.ref)(false);
+    /**
+     * Column配置改变或者容器Resize之后，根据Columns配置
+     * 计算每一列的实际宽度
+     */
     var computedColumnRect = function computedColumnRect() {
-      var _refHead$value;
-      if ((0,lodash.isElement)((_refHead$value = refHead === null || refHead === void 0 ? void 0 : refHead.value) !== null && _refHead$value !== void 0 ? _refHead$value : null)) {
-        columns.visibleColumns.forEach(function (col) {
-          var _refHead$value2;
-          var id = columns.getColumnId(col);
-          var query = "[data-id=\"".concat(id, "\"]");
-          var target = refHead === null || refHead === void 0 || (_refHead$value2 = refHead.value) === null || _refHead$value2 === void 0 ? void 0 : _refHead$value2.querySelector(query);
-          if ((0,lodash.isElement)(target)) {
-            columns.setColumnRect(col, {
-              width: target.offsetWidth,
-              height: target.offsetHeight,
-              left: null,
-              right: null
-            });
-          }
-        });
-        resolveFixedColumnStyle();
-      }
+      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;
+      columns.resolveColsCalcWidth(width);
+      resolveFixedColumnStyle();
     };
+    var _useColumnResize = use_column_resize(columns, {
+        afterResize: resolveFixedColumnStyle
+      }),
+      dragOffsetX = _useColumnResize.dragOffsetX;
+    var isResizeBodyHeight = (0,external_vue_namespaceObject.ref)(false);
     /**
      * table 渲染行
      */

package/lib/table/props.d.ts

@@ -46,6 +46,7 @@ export declare const fixedType: import("vue-types").VueTypeValidableDef<"left" |
 export type IOverflowTooltipOption = {
     content: ((col: Column, row: any) => string) | string;
     disabled?: ((col: Column, row: any) => boolean) | boolean;
+    allowHtml?: boolean;
     watchCellResize?: boolean;
     mode?: `${OverflowModeEnum}`;
     popoverOption?: any;
@@ -272,7 +273,7 @@ export declare const tableProps: {
     };
     /**
      * 设置表格最小高度
-     * 默认：300
+     * 默认：LINE_HEIGHT * 4
      */
     minHeight: import("vue-types").VueTypeDef<StringNumber> & {
         default: StringNumber;

package/lib/table/table.css

@@ -1208,7 +1208,6 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
-  border-collapse: separate;
   border-spacing: 0;
 }
 .bk-table-flex {
@@ -1271,7 +1270,7 @@
 .bk-table .bk-table-head table,
 .bk-table .bk-table-body table {
   width: 100%;
-  border-collapse: collapse;
+  border-collapse: separate;
   transform: translateZ(0);
   table-layout: fixed;
   align-self: flex-start;
@@ -1418,16 +1417,6 @@
   content: '';
   transform: translateX(50%);
 }
-.bk-table .bk-table-head table thead th.column_fixed::after,
-.bk-table .bk-table-body table thead th.column_fixed::after {
-  position: absolute;
-  content: '';
-  right: -2px;
-  top: 0;
-  bottom: 0;
-  width: 2px;
-  background-color: var(--table-head-bg-color);
-}
 .bk-table .bk-table-head table thead th .cell,
 .bk-table .bk-table-body table thead th .cell {
   display: flex;
@@ -1442,12 +1431,6 @@
   cursor: pointer;
   background: var(--table-row-active-bg-color);
 }
-.bk-table .bk-table-head table thead th.active.column_fixed::after,
-.bk-table .bk-table-body table thead th.active.column_fixed::after,
-.bk-table .bk-table-head table thead th:hover.column_fixed::after,
-.bk-table .bk-table-body table thead th:hover.column_fixed::after {
-  background-color: var(--table-row-hover-bg-color);
-}
 .bk-table .bk-table-head table thead th.column_fixed,
 .bk-table .bk-table-body table thead th.column_fixed {
   transform: translateX(var(--scroll-left));
@@ -1476,25 +1459,11 @@
   text-align: center;
   cursor: move;
 }
-.bk-table .bk-table-head table tbody tr td.column_fixed::after,
-.bk-table .bk-table-body table tbody tr td.column_fixed::after {
-  position: absolute;
-  content: '';
-  right: -2px;
-  top: 0;
-  bottom: 0;
-  width: 2px;
-  background-color: var(--table-bg-color);
-}
 .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: var(--table-row-hover-bg-color);
   border-right-color: var(--table-row-hover-bg-color);
 }
-.bk-table .bk-table-head table tbody tr:hover.hover-highlight td.column_fixed::after,
-.bk-table .bk-table-body table tbody tr:hover.hover-highlight td.column_fixed::after {
-  background-color: var(--table-row-hover-bg-color);
-}
 .bk-table .bk-table-head table tbody tr.--drag-start td,
 .bk-table .bk-table-body table tbody tr.--drag-start td {
   background: #fff !important;
@@ -1574,10 +1543,7 @@
   border-bottom: 1px solid var(--table-border-color);
 }
 .bk-table.bordered-col th {
-  border-right: 1px solid var(--table-border-color);
-}
-.bk-table.bordered-col th.column_fixed::after {
-  border-left: solid 1px var(--table-border-color);
+  border-right: 1px solid var(--background-color);
 }
 .bk-table.bordered-col th:last-child {
   border-right: none;
@@ -1585,9 +1551,6 @@
 .bk-table.bordered-col .bk-table-body tbody tr td {
   border-right-color: var(--table-border-color);
 }
-.bk-table.bordered-col .bk-table-body tbody tr td.column_fixed::after {
-  border-left: solid 1px var(--table-border-color);
-}
 .bk-table th,
 .bk-table td {
   border-right: 1px solid var(--table-bg-color);