bkui-vue 2.0.1-beta.15.table.1 → 2.0.1-beta.15.table.11

package/lib/table/index.js

@@ -4,29 +4,28 @@ import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__ from "../sh
 import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "vue";
 import * as __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a__ from "vue-types";
 import * as __WEBPACK_EXTERNAL_MODULE_lodash_isElement_e6b2a6ce__ from "lodash/isElement";
-import * as __WEBPACK_EXTERNAL_MODULE_lodash_throttle_a7b7506a__ from "lodash/throttle";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__ from "../config-provider";
 import * as __WEBPACK_EXTERNAL_MODULE_lodash_debounce_3540babe__ from "lodash/debounce";
 import * as __WEBPACK_EXTERNAL_MODULE_lodash_get_9427f899__ from "lodash/get";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_virtual_render_927587a8__ from "../virtual-render";
 import "../virtual-render/virtual-render.less";
-import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_checkbox_13b1cb4a__ from "../checkbox";
-import "../checkbox/checkbox.less";
-import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__ from "../icon";
+import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_loading_dcf0e69a__ from "../loading";
+import "../loading/loading.less";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_pagination_95c6c47e__ from "../pagination";
 import "../pagination/pagination.less";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_exception_7490d0fd__ from "../exception";
 import "../exception/exception.less";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_directives_45d4776f__ from "../directives";
+import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_checkbox_13b1cb4a__ from "../checkbox";
+import "../checkbox/checkbox.less";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_button_a2ea7c9a__ from "../button";
 import "../button/button.less";
+import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__ from "../icon";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_input_d525237e__ from "../input";
 import "../input/input.less";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_popover_9b03f19d__ from "../popover";
 import "../popover/popover.less";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon__3efece53__ from "../icon/";
-import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_loading_dcf0e69a__ from "../loading";
-import "../loading/loading.less";
 /******/ var __webpack_modules__ = ({
 
 /***/ 6635:
@@ -17321,11 +17320,11 @@ __webpack_require__.d(__webpack_exports__, {
 ;// CONCATENATED MODULE: external "../shared"
 var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var y = x => () => x
-const shared_namespaceObject = x({ ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.PropTypes, ["RenderType"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.RenderType, ["classes"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.classes, ["hasOverflowEllipsis"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.hasOverflowEllipsis, ["isElement"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.isElement, ["withInstallProps"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.withInstallProps });
+const shared_namespaceObject = x({ ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.PropTypes, ["RenderType"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.RenderType, ["classes"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.classes, ["hasOverflowEllipsis"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.hasOverflowEllipsis, ["isElement"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.isElement, ["throttle"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.throttle, ["withInstallProps"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.withInstallProps });
 ;// CONCATENATED MODULE: external "vue"
 var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var external_vue_y = x => () => x
-const external_vue_namespaceObject = external_vue_x({ ["Fragment"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Fragment, ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createTextVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createTextVNode, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["getCurrentInstance"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.getCurrentInstance, ["inject"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.inject, ["isProxy"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.isProxy, ["isRef"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.isRef, ["isVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.isVNode, ["mergeProps"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.mergeProps, ["nextTick"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.nextTick, ["onBeforeUnmount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["onUnmounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onUnmounted, ["onUpdated"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onUpdated, ["provide"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.provide, ["reactive"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.reactive, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["toRaw"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.toRaw, ["toRef"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.toRef, ["unref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.unref, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch });
+const external_vue_namespaceObject = external_vue_x({ ["Fragment"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Fragment, ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createTextVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createTextVNode, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["getCurrentInstance"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.getCurrentInstance, ["inject"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.inject, ["isProxy"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.isProxy, ["isRef"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.isRef, ["isVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.isVNode, ["mergeProps"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.mergeProps, ["nextTick"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.nextTick, ["onBeforeUnmount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["onUnmounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onUnmounted, ["provide"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.provide, ["reactive"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.reactive, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["toRaw"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.toRaw, ["toRef"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.toRef, ["unref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.unref, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch });
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/typeof.js
 function typeof_typeof(o) {
   "@babel/helpers - typeof";
@@ -17686,16 +17685,16 @@ var tableProps = {
    * 默认：auto 根据行数自动填充高度
    * 100%，依赖初始化时父级容器高度
    */
-  height: StringNumberType('100%'),
+  height: StringNumberType('auto'),
   /**
    * 是否为斑马纹 Table
    */
   stripe: shared_namespaceObject.PropTypes.bool.def(false),
   /**
    * 设置表格最小高度
-   * 默认：300
+   * 默认：LINE_HEIGHT * 4
    */
-  minHeight: StringNumberType(LINE_HEIGHT * 2),
+  minHeight: StringNumberType(LINE_HEIGHT * 4),
   /**
    * 设置表格最d大高度
    * 默认：auto，依赖外层高度
@@ -17903,10 +17902,20 @@ var tableProps = {
   /**
    * 启用Scrollbar
    */
-  scrollbar: shared_namespaceObject.PropTypes.bool.def(true)
+  scrollbar: shared_namespaceObject.PropTypes.bool.def(true),
+  /**
+   * 固定在底部的配置项
+   */
+  fixedBottom: (0,external_vue_types_namespaceObject.toType)('FixedBottomOption', {
+    "default": {
+      position: 'relative',
+      height: LINE_HEIGHT
+    }
+  }).def(null)
 };
+// EXTERNAL MODULE: ../../node_modules/lodash/lodash.js
+var lodash = __webpack_require__(6635);
 ;// CONCATENATED MODULE: ../../packages/table/src/components/table-column.tsx
-
 /*
  * Tencent is pleased to support the open source community by making
  * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
@@ -17936,6 +17945,7 @@ var tableProps = {
 
 
 
+
 var TableColumnProp = {
   label: LabelFunctionStringType,
   field: LabelFunctionStringType,
@@ -17959,33 +17969,31 @@ var TableColumnProp = {
 /* harmony default export */ const table_column = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'TableColumn',
   props: TableColumnProp,
-  setup: function setup(props) {
+  setup: function setup(props, _ref) {
+    var slots = _ref.slots;
     var initTableColumns = (0,external_vue_namespaceObject.inject)(PROVIDE_KEY_INIT_COL, function () {});
-    var column = (0,external_vue_namespaceObject.reactive)(Object.assign({}, props, {
-      field: props.prop || props.field
-    }));
-    (0,external_vue_namespaceObject.onMounted)(function () {
-      initTableColumns();
-    });
-    (0,external_vue_namespaceObject.onUpdated)(function () {
-      initTableColumns();
+    (0,external_vue_namespaceObject.watch)(function () {
+      return [props];
+    }, function (oldVal, newVal) {
+      var _newVal$;
+      if (!(0,lodash.isEqual)((0,external_vue_namespaceObject.toRaw)(oldVal === null || oldVal === void 0 ? void 0 : oldVal[0]), (0,external_vue_namespaceObject.toRaw)((_newVal$ = newVal === null || newVal === void 0 ? void 0 : newVal[0]) !== null && _newVal$ !== void 0 ? _newVal$ : {}))) {
+        initTableColumns();
+      }
+    }, {
+      immediate: true,
+      deep: true
     });
     (0,external_vue_namespaceObject.onUnmounted)(function () {
       initTableColumns();
     });
-    return {
-      column: column
+    return function () {
+      var _slots$default;
+      return (_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots, {
+        row: {}
+      });
     };
-  },
-  render: function render() {
-    var _this$$slots$default, _this$$slots;
-    return (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [(_this$$slots$default = (_this$$slots = this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots, {
-      row: {}
-    })]);
   }
 }));
-// EXTERNAL MODULE: ../../node_modules/lodash/lodash.js
-var lodash = __webpack_require__(6635);
 ;// CONCATENATED MODULE: ../../packages/table/src/events.ts
 
 var _EMIT_EVENT_TYPES;
@@ -18086,10 +18094,6 @@ var CELL_EVENT_TYPES = defineProperty_defineProperty(defineProperty_defineProper
 var isElement_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var isElement_y = x => () => x
 const isElement_namespaceObject = isElement_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_lodash_isElement_e6b2a6ce__["default"] });
-;// CONCATENATED MODULE: external "lodash/throttle"
-var throttle_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var throttle_y = x => () => x
-const throttle_namespaceObject = throttle_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_lodash_throttle_a7b7506a__["default"] });
 ;// CONCATENATED MODULE: ../../packages/table/src/hooks/use-column-resize.tsx
 
 /*
@@ -18121,7 +18125,8 @@ const throttle_namespaceObject = throttle_x({ ["default"]: () => __WEBPACK_EXTER
 
 
 
-/* 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;
@@ -18157,22 +18162,25 @@ const throttle_namespaceObject = throttle_x({ ["default"]: () => __WEBPACK_EXTER
     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,throttle_namespaceObject["default"])(function () {
+    return (0,shared_namespaceObject.throttle)(function () {
       var diff = e.clientX - startX;
       var resolveWidth = getColumnOrderWidth(dragColumn, ORDER_LIST) + diff;
       var minWidth = getColumnOrderWidth(dragColumn, [COLUMN_ATTRIBUTE.COL_MIN_WIDTH]);
       if (minWidth < resolveWidth) {
         dragOffsetX.value = e.clientX - startX + dragStartOffsetX;
       }
-    }, 60);
+    });
   };
   var handleMouseMove = function handleMouseMove(e) {
     stopDefaultEvent(e);
@@ -18182,13 +18190,8 @@ const throttle_namespaceObject = throttle_x({ ["default"]: () => __WEBPACK_EXTER
   };
   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) {
@@ -18404,12 +18407,18 @@ function v4(options, buf, offset) {
   var columns = [];
   var columnIndex = 0;
   var columnCache = new WeakMap();
+  var getPropRawData = function getPropRawData(prop) {
+    if ((0,external_vue_namespaceObject.isRef)(prop)) {
+      return (0,external_vue_namespaceObject.unref)(prop);
+    }
+    return (0,external_vue_namespaceObject.toRaw)(prop);
+  };
   var copyProps = function copyProps(props) {
     return Object.keys(props !== null && props !== void 0 ? props : {}).reduce(function (result, key) {
       var target = key.replace(/-(\w)/g, function (_, letter) {
         return letter.toUpperCase();
       });
-      return Object.assign(result, defineProperty_defineProperty({}, target, props[key]));
+      return Object.assign(result, defineProperty_defineProperty({}, target, getPropRawData(props[key])));
     }, {});
   };
   var getNodeCtxUid = function getNodeCtxUid(ctx) {
@@ -18440,6 +18449,9 @@ function v4(options, buf, offset) {
       }
       return;
     }
+    if (Array.isArray(node)) {
+      node.forEach(resolveChildNode);
+    }
     if (Array.isArray(node === null || node === void 0 ? void 0 : node.children)) {
       node.children.forEach(resolveChildNode);
     }
@@ -18453,29 +18465,24 @@ function v4(options, buf, offset) {
     }
     return;
   };
-  var setNodeInstanceId = function setNodeInstanceId(column, uniqueId) {
-    if (!columnCache.has(column)) {
-      columnCache.set(columnCache, {
-        uniqueId: uniqueId,
-        column: column
-      });
-    }
-  };
-  var resolveColumns = function resolveColumns(target) {
-    var _instance$slots$defau, _instance$slots, _instance$slots$defau2;
-    var instance = target !== null && target !== void 0 ? target : (0,external_vue_namespaceObject.getCurrentInstance)();
+  var resolveColumns = function resolveColumns(children) {
     columns.length = 0;
     columnIndex = 0;
-    var children = (_instance$slots$defau = (_instance$slots = instance.slots) === null || _instance$slots === void 0 || (_instance$slots$defau2 = _instance$slots["default"]) === null || _instance$slots$defau2 === void 0 ? void 0 : _instance$slots$defau2.call(_instance$slots)) !== null && _instance$slots$defau !== void 0 ? _instance$slots$defau : [];
-    children.forEach(resolveChildNode);
+    var GhostBody = children.find(function (node) {
+      var _node$type3;
+      return ((_node$type3 = node.type) === null || _node$type3 === void 0 ? void 0 : _node$type3.name) === 'GhostBody';
+    });
+    if (GhostBody) {
+      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);
+    }
     columns.sort(function (col1, col2) {
       return col1.index - col2.index;
     });
     return columns;
   };
   return {
-    resolveColumns: resolveColumns,
-    setNodeInstanceId: setNodeInstanceId
+    resolveColumns: resolveColumns
   };
 });
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js
@@ -19631,7 +19638,7 @@ var observerResize = function observerResize(root, callbackFn) {
       callbackFn();
     }
   };
-  var execFn = resizerWay === 'debounce' ? (0,debounce_namespaceObject["default"])(resolveCallbackFn, delay) : (0,throttle_namespaceObject["default"])(resolveCallbackFn, delay);
+  var execFn = resizerWay === 'debounce' ? (0,debounce_namespaceObject["default"])(resolveCallbackFn, delay) : (0,shared_namespaceObject.throttle)(resolveCallbackFn);
   var callFn = function callFn() {
     return Reflect.apply(execFn, _this, []);
   };
@@ -19967,6 +19974,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
 
 
@@ -20038,6 +20060,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
@@ -20064,12 +20143,6 @@ var useColumns = function useColumns(props) {
       return !isHiddenColumn(col);
     })));
   };
-  var headHeight = (0,external_vue_namespaceObject.computed)(function () {
-    if (props.showHead) {
-      return props.headHeight;
-    }
-    return 0;
-  });
   var resolveDraggableColumn = function resolveDraggableColumn() {
     if (props.rowDraggable) {
       var _props$rowDraggable$w, _props$rowDraggable, _props$rowDraggable$l, _props$rowDraggable2;
@@ -20175,6 +20248,7 @@ var useColumns = function useColumns(props) {
    * @param columns
    */
   var formatColumns = function formatColumns() {
+    sortColumns.length = 0;
     resolveDraggableColumn();
     var skipColNum = 0;
     (tableColumnList || []).forEach(function (col, index) {
@@ -20233,6 +20307,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,
@@ -20415,7 +20492,6 @@ var useColumns = function useColumns(props) {
   return {
     needColSpan: needColSpan,
     needRowSpan: needRowSpan,
-    headHeight: headHeight,
     tableColumnSchema: tableColumnSchema,
     tableColumnList: tableColumnList,
     visibleColumns: visibleColumns,
@@ -20434,6 +20510,7 @@ var useColumns = function useColumns(props) {
     getColumnRect: getColumnRect,
     getColumnCustomClass: getColumnCustomClass,
     getColumnRefAttribute: getColumnRefAttribute,
+    getColumnCalcWidth: getColumnCalcWidth,
     resolveEventListener: resolveEventListener,
     setColumnIsHidden: setColumnIsHidden,
     setColumnResizeWidth: setColumnResizeWidth,
@@ -20444,7 +20521,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);
@@ -20652,10 +20730,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")
@@ -20664,10 +20742,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")
@@ -20710,6 +20788,135 @@ const virtual_render_namespaceObject = virtual_render_x({ ["default"]: () => __W
 var virtual_render_less_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var virtual_render_less_y = x => () => x
 const virtual_render_less_namespaceObject = virtual_render_less_x({  });
+;// CONCATENATED MODULE: external "../loading"
+var loading_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var loading_y = x => () => x
+const loading_namespaceObject = loading_x({ ["BkLoadingMode"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_loading_dcf0e69a__.BkLoadingMode, ["BkLoadingSize"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_loading_dcf0e69a__.BkLoadingSize, ["default"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_loading_dcf0e69a__["default"] });
+;// CONCATENATED MODULE: external "../loading/loading.less"
+var loading_less_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var loading_less_y = x => () => x
+const loading_less_namespaceObject = loading_less_x({  });
+;// CONCATENATED MODULE: ../../packages/table/src/hooks/use-scroll-loading.tsx
+
+
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+
+
+
+/* harmony default export */ const use_scroll_loading = (function (props, ctx) {
+  var refScrollLoading = (0,external_vue_namespaceObject.toRef)(props, 'scrollLoading');
+  var getLoadingOption = function getLoadingOption() {
+    if (typeof refScrollLoading.value === 'boolean') {
+      return {
+        loading: !!refScrollLoading.value,
+        inline: true,
+        title: '',
+        size: loading_namespaceObject.BkLoadingSize.Normal,
+        mode: loading_namespaceObject.BkLoadingMode.Default,
+        indicator: null
+      };
+    }
+    return refScrollLoading.value;
+  };
+  var isRender = (0,external_vue_namespaceObject.computed)(function () {
+    return refScrollLoading.value !== null && (typeof refScrollLoading.value === 'boolean' && refScrollLoading.value || typeof_typeof(refScrollLoading.value) === 'object');
+  });
+  var renderScrollLoading = function renderScrollLoading() {
+    var _ctx$slots$fixedBotto3, _ctx$slots$fixedBotto4, _ctx$slots2;
+    if (isRender.value) {
+      var _ctx$slots$fixedBotto, _ctx$slots$fixedBotto2, _ctx$slots;
+      var _getLoadingOption = getLoadingOption(),
+        loading = _getLoadingOption.loading,
+        size = _getLoadingOption.size,
+        mode = _getLoadingOption.mode,
+        title = _getLoadingOption.title,
+        inline = _getLoadingOption.inline,
+        indicator = _getLoadingOption.indicator;
+      return (_ctx$slots$fixedBotto = (_ctx$slots$fixedBotto2 = (_ctx$slots = ctx.slots).fixedBottom) === null || _ctx$slots$fixedBotto2 === void 0 ? void 0 : _ctx$slots$fixedBotto2.call(_ctx$slots)) !== null && _ctx$slots$fixedBotto !== void 0 ? _ctx$slots$fixedBotto : (0,external_vue_namespaceObject.createVNode)(loading_namespaceObject["default"], {
+        loading: loading,
+        size: size,
+        mode: mode,
+        title: title,
+        inline: inline,
+        indicator: indicator
+      }, null);
+    }
+    return (_ctx$slots$fixedBotto3 = (_ctx$slots$fixedBotto4 = (_ctx$slots2 = ctx.slots).fixedBottom) === null || _ctx$slots$fixedBotto4 === void 0 ? void 0 : _ctx$slots$fixedBotto4.call(_ctx$slots2)) !== null && _ctx$slots$fixedBotto3 !== void 0 ? _ctx$slots$fixedBotto3 : null;
+  };
+  return {
+    renderScrollLoading: renderScrollLoading
+  };
+});
+;// CONCATENATED MODULE: ../../packages/table/src/components/ghost-body.tsx
+
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+/* harmony default export */ const ghost_body = ((0,external_vue_namespaceObject.defineComponent)({
+  name: 'GhostBody',
+  setup: function setup(_, ctx) {
+    var columnGhostStyle = {
+      zIndex: -1,
+      width: 0,
+      height: 0,
+      display: 'none'
+    };
+    return function () {
+      var _ctx$slots$default, _ctx$slots;
+      return (0,external_vue_namespaceObject.createVNode)("div", {
+        "style": columnGhostStyle
+      }, [(_ctx$slots$default = (_ctx$slots = ctx.slots)["default"]) === null || _ctx$slots$default === void 0 ? void 0 : _ctx$slots$default.call(_ctx$slots)]);
+    };
+  }
+}));
 ;// CONCATENATED MODULE: ../../packages/table/src/hooks/use-layout.tsx
 
 
@@ -20750,6 +20957,8 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
 
 
 
+
+
 /* harmony default export */ const use_layout = (function (props, ctx) {
   var _props$rowHeight;
   var refRoot = (0,external_vue_namespaceObject.ref)(null);
@@ -20759,72 +20968,82 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
   var translateX = (0,external_vue_namespaceObject.ref)(0);
   var translateY = (0,external_vue_namespaceObject.ref)(0);
   var preBottom = (0,external_vue_namespaceObject.ref)(0);
-  var dragOffsetX = (0,external_vue_namespaceObject.ref)(-1000);
+  var dragOffsetX = (0,external_vue_namespaceObject.ref)(-10000);
   var offsetRight = (0,external_vue_namespaceObject.ref)(0);
   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 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;
+  });
   var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
     resolveClassName = _usePrefix.resolveClassName;
+  var _useScrollLoading = use_scroll_loading(props, ctx),
+    renderScrollLoading = _useScrollLoading.renderScrollLoading;
   var tableClass = (0,external_vue_namespaceObject.computed)(function () {
     return (0,shared_namespaceObject.classes)(defineProperty_defineProperty({}, resolveClassName('table'), true), resolvePropBorderToClassStr(props.border));
   });
   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 () {
     return (0,shared_namespaceObject.classes)(defineProperty_defineProperty(defineProperty_defineProperty({}, resolveClassName('table-head'), true), 'has-settings', !!props.settings));
   });
+  var setFixedColumnShawdow = function setFixedColumnShawdow() {
+    var _refRoot$value, _refRoot$value2;
+    var rightShawdow = offsetRight.value > 0 ? '0 0 10px rgb(0 0 0 / 12%)' : null;
+    var leftShawdow = translateX.value > 0 ? '0 0 10px rgb(0 0 0 / 12%)' : null;
+    (_refRoot$value = refRoot.value) === null || _refRoot$value === void 0 || (_refRoot$value = _refRoot$value.style) === null || _refRoot$value === void 0 || _refRoot$value.setProperty('--shadow-right', rightShawdow);
+    (_refRoot$value2 = refRoot.value) === null || _refRoot$value2 === void 0 || (_refRoot$value2 = _refRoot$value2.style) === null || _refRoot$value2 === void 0 || _refRoot$value2.setProperty('--shadow-left', leftShawdow);
+  };
+  var setRootStyleVars = (0,shared_namespaceObject.throttle)(function () {
+    var _refRoot$value3, _refRoot$value4, _refRoot$value5, _refRoot$value6, _refRoot$value7;
+    (_refRoot$value3 = refRoot.value) === null || _refRoot$value3 === void 0 || (_refRoot$value3 = _refRoot$value3.style) === null || _refRoot$value3 === void 0 || _refRoot$value3.setProperty('--drag-offset-x', "".concat(dragOffsetX.value, "px"));
+    (_refRoot$value4 = refRoot.value) === null || _refRoot$value4 === void 0 || (_refRoot$value4 = _refRoot$value4.style) === null || _refRoot$value4 === void 0 || _refRoot$value4.setProperty('--drag-offset-h-x', "".concat(dragOffsetX.value - 2, "px"));
+    (_refRoot$value5 = refRoot.value) === null || _refRoot$value5 === void 0 || (_refRoot$value5 = _refRoot$value5.style) === null || _refRoot$value5 === void 0 || _refRoot$value5.setProperty('--translate-y', "".concat(translateY.value, "px"));
+    (_refRoot$value6 = refRoot.value) === null || _refRoot$value6 === void 0 || (_refRoot$value6 = _refRoot$value6.style) === null || _refRoot$value6 === void 0 || _refRoot$value6.setProperty('--translate-x', "".concat(translateX.value, "px"));
+    (_refRoot$value7 = refRoot.value) === null || _refRoot$value7 === void 0 || (_refRoot$value7 = _refRoot$value7.style) === null || _refRoot$value7 === void 0 || _refRoot$value7.setProperty('--translate-x-1', "-".concat(translateX.value, "px"));
+    setFixedColumnShawdow();
+  });
   var setTranslateX = function setTranslateX(val) {
     translateX.value = val;
+    setRootStyleVars();
   };
   var setTranslateY = function setTranslateY(val) {
     translateY.value = val;
+    setRootStyleVars();
+  };
+  var initRootStyleVars = function initRootStyleVars() {
+    var _refRoot$value8, _refRoot$value9, _refRoot$value10, _refRoot$value11, _refRoot$value12;
+    (_refRoot$value8 = refRoot.value) === null || _refRoot$value8 === void 0 || (_refRoot$value8 = _refRoot$value8.style) === null || _refRoot$value8 === void 0 || _refRoot$value8.setProperty('--drag-offset-x', '-1000px');
+    (_refRoot$value9 = refRoot.value) === null || _refRoot$value9 === void 0 || (_refRoot$value9 = _refRoot$value9.style) === null || _refRoot$value9 === void 0 || _refRoot$value9.setProperty('--drag-offset-h-x', '-1000px');
+    (_refRoot$value10 = refRoot.value) === null || _refRoot$value10 === void 0 || (_refRoot$value10 = _refRoot$value10.style) === null || _refRoot$value10 === void 0 || _refRoot$value10.setProperty('--translate-y', '0px');
+    (_refRoot$value11 = refRoot.value) === null || _refRoot$value11 === void 0 || (_refRoot$value11 = _refRoot$value11.style) === null || _refRoot$value11 === void 0 || _refRoot$value11.setProperty('--translate-x', '0px');
+    (_refRoot$value12 = refRoot.value) === null || _refRoot$value12 === void 0 || (_refRoot$value12 = _refRoot$value12.style) === null || _refRoot$value12 === void 0 || _refRoot$value12.setProperty('--translate-x-1', '0px');
   };
   var setDragOffsetX = function setDragOffsetX(val) {
     dragOffsetX.value = val;
+    setRootStyleVars();
   };
   var config = resolveHeadConfig(props);
+  var headHeight = (0,external_vue_namespaceObject.computed)(function () {
+    return resolvePropVal(config, 'height', ['thead']);
+  });
   var headStyle = (0,external_vue_namespaceObject.computed)(function () {
     var _props$thead$color, _props$thead;
     return {
-      '--row-height': "".concat(resolvePropVal(config, 'height', ['thead']), "px"),
-      '--scroll-head-left': "-".concat(translateX.value, "px"),
-      '--scroll-left': "".concat(translateX.value, "px"),
+      '--row-height': "".concat(headHeight.value, "px"),
       '--background-color': DEF_COLOR[(_props$thead$color = (_props$thead = props.thead) === null || _props$thead === void 0 ? void 0 : _props$thead.color) !== null && _props$thead$color !== void 0 ? _props$thead$color : IHeadColor.DEF1]
     };
   });
   var bodyClass = defineProperty_defineProperty({}, resolveClassName('table-body'), true);
   var footerClass = (0,external_vue_namespaceObject.computed)(function () {
-    return (0,shared_namespaceObject.classes)(defineProperty_defineProperty(defineProperty_defineProperty({}, resolveClassName('table-footer'), true), 'is-hidden', !props.pagination || !props.data.length));
-  });
-  var columnGhostStyle = {
-    zIndex: -1,
-    width: 0,
-    height: 0,
-    display: 'none'
-  };
-  var dragOffsetXStyle = {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    width: '1px',
-    backgroundColor: '#3785FF',
-    transform: 'translateX(-50%)'
-  };
-  var resizeColumnStyle = (0,external_vue_namespaceObject.computed)(function () {
-    return use_layout_objectSpread(use_layout_objectSpread({}, dragOffsetXStyle), {}, {
-      transform: "translate3d(".concat(dragOffsetX.value + 3, "px, ").concat(translateY.value, "px, 0)")
-    });
-  });
-  var resizeHeadColStyle = (0,external_vue_namespaceObject.computed)(function () {
-    return use_layout_objectSpread(use_layout_objectSpread({}, dragOffsetXStyle), {}, {
-      width: '6px',
-      transform: "translateX(".concat(dragOffsetX.value, "px)")
-    });
+    return (0,shared_namespaceObject.classes)(defineProperty_defineProperty(defineProperty_defineProperty({}, resolveClassName('table-footer'), true), 'is-hidden', footHeight.value === 0));
   });
   var renderContainer = function renderContainer(childrend) {
     var _ctx$slots$default, _ctx$slots;
@@ -20832,19 +21051,22 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
       "ref": refRoot,
       "style": tableStyle.value,
       "class": tableClass.value
-    }, [childrend, (0,external_vue_namespaceObject.createVNode)("div", {
-      "style": columnGhostStyle
-    }, [(_ctx$slots$default = (_ctx$slots = ctx.slots)["default"]) === null || _ctx$slots$default === void 0 ? void 0 : _ctx$slots$default.call(_ctx$slots)])]);
+    }, [childrend, (0,external_vue_namespaceObject.createVNode)(ghost_body, null, {
+      "default": function _default() {
+        return [(_ctx$slots$default = (_ctx$slots = ctx.slots)["default"]) === null || _ctx$slots$default === void 0 ? void 0 : _ctx$slots$default.call(_ctx$slots)];
+      }
+    })]);
   };
-  var renderHeader = function renderHeader(childrend, settings) {
+  var renderHeader = function renderHeader(childrend, settings, fixedRows) {
     return (0,external_vue_namespaceObject.createVNode)("div", {
       "ref": refHead,
       "style": headStyle.value,
       "class": headClass.value
     }, [childrend === null || childrend === void 0 ? void 0 : childrend(), (0,external_vue_namespaceObject.createVNode)("div", {
-      "style": resizeHeadColStyle.value,
       "class": "col-resize-drag"
-    }, null), settings === null || settings === void 0 ? void 0 : settings()]);
+    }, null), (0,external_vue_namespaceObject.createVNode)("div", {
+      "class": fixedWrapperClass
+    }, [fixedRows === null || fixedRows === void 0 ? void 0 : fixedRows()]), settings === null || settings === void 0 ? void 0 : settings()]);
   };
   var prependStyle = (0,external_vue_namespaceObject.computed)(function () {
     return use_layout_objectSpread({
@@ -20863,8 +21085,16 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     return null;
   };
   var bodyHeight = (0,external_vue_namespaceObject.ref)('auto');
+  var bodyMaxHeight = (0,external_vue_namespaceObject.computed)(function () {
+    if (/^\d+\.?\d*(px|%)$/.test("".concat(tableStyle.value.maxHeight))) {
+      var headerHeight = props.showHead ? headHeight.value : 0;
+      var delHeight = footHeight.value + headerHeight + fixedBottomHeight.value;
+      return "calc(".concat(tableStyle.value.maxHeight, " - ").concat(delHeight, "px)");
+    }
+    return null;
+  });
   var setBodyHeight = function setBodyHeight(height) {
-    bodyHeight.value = height;
+    bodyHeight.value = height - headHeight.value - fixedBottomHeight.value - footHeight.value;
   };
   var footHeight = (0,external_vue_namespaceObject.ref)(0);
   var footerStyle = (0,external_vue_namespaceObject.computed)(function () {
@@ -20881,6 +21111,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;
@@ -20912,24 +21146,34 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
   };
   var resizeColumnClass = {
     column_drag_line: true,
-    'offset-x': true
+    'offset-x': true,
+    'resize-column': true
   };
-  var fixedWrapperClass = (0,external_vue_namespaceObject.computed)(function () {
-    return [resolveClassName('table-fixed'), {
-      'shadow-right': offsetRight.value > 0,
-      'shadow-left': translateX.value > 0
-    }];
-  });
+  var fixedWrapperClass = resolveClassName('table-fixed');
   var fixedBottomRow = resolveClassName('table-fixed-bottom');
-  var fixedWrapperStyle = (0,external_vue_namespaceObject.computed)(function () {
+  var fixedBottomLoadingStyle = (0,external_vue_namespaceObject.computed)(function () {
+    var _props$fixedBottom$po, _props$fixedBottom4, _props$fixedBottom$he3, _props$fixedBottom5;
     return {
-      transform: "translate3d(".concat(translateX.value, "px, ").concat(translateY.value, "px, 0)")
+      minHeight: "".concat(lineHeight.value, "px"),
+      position: (_props$fixedBottom$po = (_props$fixedBottom4 = props.fixedBottom) === null || _props$fixedBottom4 === void 0 ? void 0 : _props$fixedBottom4.position) !== null && _props$fixedBottom$po !== void 0 ? _props$fixedBottom$po : 'absolute',
+      height: (_props$fixedBottom$he3 = (_props$fixedBottom5 = props.fixedBottom) === null || _props$fixedBottom5 === void 0 ? void 0 : _props$fixedBottom5.height) !== null && _props$fixedBottom$he3 !== void 0 ? _props$fixedBottom$he3 : null
     };
   });
   (0,external_vue_namespaceObject.onMounted)(function () {
     setOffsetRight();
+    initRootStyleVars();
   });
-  var renderBody = function renderBody(list, childrend, fixedRows, loadingRow) {
+  var getFixedBottomRender = function getFixedBottomRender() {
+    var result = renderScrollLoading === null || renderScrollLoading === void 0 ? void 0 : renderScrollLoading();
+    if (result) {
+      return (0,external_vue_namespaceObject.createVNode)("div", {
+        "style": fixedBottomLoadingStyle.value,
+        "class": fixedBottomRow
+      }, [result]);
+    }
+    return null;
+  };
+  var renderBody = function renderBody(list, childrend, fixedRows) {
     return (0,external_vue_namespaceObject.createVNode)(virtual_render_namespaceObject["default"], {
       "ref": refBody,
       "height": bodyHeight.value,
@@ -20942,6 +21186,7 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
       "scrollbar": {
         enabled: props.scrollbar
       },
+      "maxHeight": bodyMaxHeight.value,
       "throttleDelay": 120,
       "onContentScroll": handleScrollChanged
     }, {
@@ -20949,20 +21194,15 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
         return renderPrepend();
       },
       "default": function _default(scope) {
-        return childrend === null || childrend === void 0 ? void 0 : childrend(scope.data);
+        var _scope$data;
+        return childrend === null || childrend === void 0 ? void 0 : childrend((_scope$data = scope === null || scope === void 0 ? void 0 : scope.data) !== null && _scope$data !== void 0 ? _scope$data : []);
       },
       afterSection: function afterSection() {
-        var _ctx$slots$appendBott, _ctx$slots2;
         return [(0,external_vue_namespaceObject.createVNode)("div", {
-          "style": resizeColumnStyle.value,
           "class": resizeColumnClass
         }, null), (0,external_vue_namespaceObject.createVNode)("div", {
-          "style": fixedWrapperStyle.value,
-          "class": fixedWrapperClass.value
-        }, [fixedRows === null || fixedRows === void 0 ? void 0 : fixedRows()]), (0,external_vue_namespaceObject.createVNode)("div", null, [(_ctx$slots$appendBott = (_ctx$slots2 = ctx.slots).appendBottom) === null || _ctx$slots$appendBott === void 0 ? void 0 : _ctx$slots$appendBott.call(_ctx$slots2)]), (0,external_vue_namespaceObject.createVNode)("div", {
-          "style": fixedWrapperStyle.value,
-          "class": fixedBottomRow
-        }, [loadingRow === null || loadingRow === void 0 ? void 0 : loadingRow()])];
+          "class": fixedWrapperClass
+        }, [fixedRows === null || fixedRows === void 0 ? void 0 : fixedRows()])];
       }
     });
   };
@@ -20977,11 +21217,15 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     fixedColumns.length = 0;
     fixedColumns.push.apply(fixedColumns, _toConsumableArray(values));
   };
+  var renderFixedBottom = function renderFixedBottom() {
+    return getFixedBottomRender();
+  };
   return {
     renderContainer: renderContainer,
     renderHeader: renderHeader,
     renderBody: renderBody,
     renderFooter: renderFooter,
+    renderFixedBottom: renderFixedBottom,
     setBodyHeight: setBodyHeight,
     setFootHeight: setFootHeight,
     setTranslateX: setTranslateX,
@@ -20989,6 +21233,7 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     setFixedColumns: setFixedColumns,
     setOffsetRight: setOffsetRight,
     setLineHeight: setLineHeight,
+    initRootStyleVars: initRootStyleVars,
     refRoot: refRoot,
     refHead: refHead,
     refBody: refBody,
@@ -21096,6 +21341,9 @@ var usePagination = function usePagination(props) {
    * 如果手动禁用分页，则禁用前端分页，否则启用前端分页
    */
   var isEnabled = (0,external_vue_namespaceObject.ref)(true);
+  var totalPage = (0,external_vue_namespaceObject.computed)(function () {
+    return Math.ceil(pagination.count / pagination.limit);
+  });
   var setPagination = function setPagination(option) {
     Object.assign(pagination, {
       enabled: !!props.pagination
@@ -21103,7 +21351,7 @@ var usePagination = function usePagination(props) {
     /**
      * 如果分页组件启用了前端分页，则重置分页组件数据
      */
-    if (pagination.current * pagination.limit >= pagination.count) {
+    if (pagination.current > totalPage.value) {
       pagination.current = 1;
     }
   };
@@ -21115,7 +21363,7 @@ var usePagination = function usePagination(props) {
     return [props.pagination];
   }, function () {
     if (typeof_typeof(props.pagination) === 'object') {
-      setPagination(props.pagination);
+      setPagination((0,external_vue_namespaceObject.toRaw)(props.pagination));
     }
     /**
      * 分页组件是否启用
@@ -21123,7 +21371,8 @@ var usePagination = function usePagination(props) {
      */
     pagination.enabled = isEnabled.value && !!props.pagination;
   }, {
-    immediate: true
+    immediate: true,
+    deep: true
   });
   (0,external_vue_namespaceObject.watch)(function () {
     return [props.data];
@@ -21154,18 +21403,6 @@ var usePagination = function usePagination(props) {
   };
 };
 /* harmony default export */ const use_pagination = (usePagination);
-;// CONCATENATED MODULE: external "../checkbox"
-var checkbox_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var checkbox_y = x => () => x
-const checkbox_namespaceObject = checkbox_x({ ["BkCheckboxGroup"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_checkbox_13b1cb4a__.BkCheckboxGroup, ["default"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_checkbox_13b1cb4a__["default"] });
-;// CONCATENATED MODULE: external "../checkbox/checkbox.less"
-var checkbox_less_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var checkbox_less_y = x => () => x
-const checkbox_less_namespaceObject = checkbox_less_x({  });
-;// CONCATENATED MODULE: external "../icon"
-var icon_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var icon_y = x => () => x
-const icon_namespaceObject = icon_x({ ["DownShape"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.DownShape, ["Funnel"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Funnel, ["GragFill"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.GragFill, ["RightShape"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.RightShape });
 ;// CONCATENATED MODULE: external "../pagination"
 var pagination_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var pagination_y = x => () => x
@@ -21302,7 +21539,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() {
@@ -21321,12 +21559,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') {
@@ -21340,14 +21578,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;
       };
@@ -21392,8 +21639,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';
@@ -21518,6 +21765,14 @@ const directives_namespaceObject = directives_x({ ["bkEllipsisInstance"]: () =>
     return (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [(_this$$slots$default = (_this$$slots = this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots)]);
   }
 }));
+;// CONCATENATED MODULE: external "../checkbox"
+var checkbox_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var checkbox_y = x => () => x
+const checkbox_namespaceObject = checkbox_x({ ["BkCheckboxGroup"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_checkbox_13b1cb4a__.BkCheckboxGroup, ["default"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_checkbox_13b1cb4a__["default"] });
+;// CONCATENATED MODULE: external "../checkbox/checkbox.less"
+var checkbox_less_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var checkbox_less_y = x => () => x
+const checkbox_less_namespaceObject = checkbox_less_x({  });
 ;// CONCATENATED MODULE: external "../button"
 var button_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var button_y = x => () => x
@@ -21526,7 +21781,11 @@ const button_namespaceObject = button_x({ ["default"]: () => __WEBPACK_EXTERNAL_
 var button_less_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var button_less_y = x => () => x
 const button_less_namespaceObject = button_less_x({  });
-;// CONCATENATED MODULE: external "../input"
+;// CONCATENATED MODULE: external "../icon"
+var icon_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var icon_y = x => () => x
+const icon_namespaceObject = icon_x({ ["DownShape"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.DownShape, ["Funnel"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Funnel, ["GragFill"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.GragFill, ["RightShape"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.RightShape });
+;// CONCATENATED MODULE: external "../input"
 var input_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var input_y = x => () => x
 const input_namespaceObject = input_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_input_d525237e__["default"] });
@@ -21616,14 +21875,6 @@ var ROW_HEIGHT = 32;
       isOpen: false,
       checked: checked.value
     });
-    (0,external_vue_namespaceObject.watch)(function () {
-      return filter.value;
-    }, function () {
-      state.checked = checked.value;
-    }, {
-      immediate: true,
-      deep: true
-    });
     var headClass = (0,external_vue_namespaceObject.computed)(function () {
       return (0,shared_namespaceObject.classes)(defineProperty_defineProperty(defineProperty_defineProperty(defineProperty_defineProperty(defineProperty_defineProperty(defineProperty_defineProperty({}, resolveClassName('table-head-action'), true), 'column-filter', true), '--row-height', "".concat(props.height, "px")), "active", state.checked.length), "opened", state.isOpen));
     });
@@ -21643,7 +21894,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;
     });
@@ -22227,6 +22479,250 @@ function use_head_isSlot(s) {
     getTH: getTH
   };
 });
+;// CONCATENATED MODULE: ../../packages/table/src/hooks/use-cell.tsx
+
+
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+
+
+
+
+
+
+/* harmony default export */ const use_cell = (function (_ref) {
+  var props = _ref.props,
+    rows = _ref.rows,
+    ctx = _ref.ctx,
+    columns = _ref.columns,
+    row = _ref.row,
+    index = _ref.index,
+    column = _ref.column,
+    _ref$isChild = _ref.isChild,
+    isChild = _ref$isChild === void 0 ? false : _ref$isChild,
+    multiShiftKey = _ref.multiShiftKey;
+  var isShiftKeyDown = multiShiftKey.isShiftKeyDown,
+    getStore = multiShiftKey.getStore,
+    setStore = multiShiftKey.setStore,
+    setStoreStart = multiShiftKey.setStoreStart,
+    clearStoreStart = multiShiftKey.clearStoreStart;
+  var renderCheckboxColumn = function renderCheckboxColumn() {
+    var handleChecked = function handleChecked(value, event) {
+      event.stopImmediatePropagation();
+      event.preventDefault();
+      event.stopPropagation();
+      if (!isShiftKeyDown.value) {
+        if (value) {
+          setStoreStart(row, index);
+        } else {
+          clearStoreStart();
+        }
+      }
+      rows.setRowSelection(row, value);
+      columns.setColumnAttribute(column, COLUMN_ATTRIBUTE.SELECTION_INDETERMINATE, rows.getRowIndeterminate());
+      columns.setColumnAttribute(column, COLUMN_ATTRIBUTE.SELECTION_VAL, rows.getRowCheckedAllValue());
+      ctx.emit(EMIT_EVENTS.ROW_SELECT, {
+        row: row,
+        index: index,
+        checked: value,
+        data: props.data
+      });
+      ctx.emit(EMIT_EVENTS.ROW_SELECT_CHANGE, {
+        row: row,
+        index: index,
+        checked: value,
+        data: props.data
+      });
+    };
+    var beforeRowChange = function beforeRowChange() {
+      if (isShiftKeyDown.value) {
+        var result = setStore(row, index);
+        if (result) {
+          var _rows$pageRowList$sli;
+          var _getStore = getStore(),
+            start = _getStore.start,
+            end = _getStore.end;
+          var startIndex = start.index < end.index ? start.index : end.index;
+          var endIndex = start.index < end.index ? end.index : start.index;
+          ((_rows$pageRowList$sli = rows.pageRowList.slice(startIndex, endIndex + 1)) !== null && _rows$pageRowList$sli !== void 0 ? _rows$pageRowList$sli : []).forEach(function (item) {
+            var isRowEnabled = isRowSelectEnable(props, {
+              row: row,
+              index: index,
+              isCheckAll: false
+            });
+            isRowEnabled && rows.setRowSelection(item, true);
+          });
+        }
+        ctx.emit(EMIT_EVENTS.ROW_SELECT, {
+          row: row,
+          index: index,
+          checked: true,
+          data: props.data,
+          isShiftKeyDown: true
+        });
+        ctx.emit(EMIT_EVENTS.ROW_SELECT_CHANGE, {
+          row: row,
+          index: index,
+          checked: true,
+          data: props.data,
+          isShiftKeyDown: true
+        });
+        return Promise.resolve(!result);
+      }
+      return Promise.resolve(true);
+    };
+    var indeterminate = rows.getRowAttribute(row, TABLE_ROW_ATTRIBUTE.ROW_SELECTION_INDETERMINATE);
+    var isChecked = rows.getRowAttribute(row, TABLE_ROW_ATTRIBUTE.ROW_SELECTION);
+    var isEnable = isRowSelectEnable(props, {
+      row: row,
+      index: index,
+      isCheckAll: false
+    });
+    return (0,external_vue_namespaceObject.createVNode)(checkbox_namespaceObject["default"], {
+      "beforeChange": beforeRowChange,
+      "disabled": !isEnable,
+      "indeterminate": indeterminate,
+      "modelValue": isChecked,
+      "onChange": handleChecked
+    }, null);
+  };
+  /**
+   * 渲染表格Cell内容
+   * @param row 当前行
+   * @param column 当前列
+   * @param index 当前列
+   * @param rows 当前列
+   * @returns
+   */
+  var renderCell = function renderCell() {
+    var _renderFn$column$type, _renderFn$column$type2;
+    var defaultFn = function defaultFn() {
+      var type = resolvePropVal(column, 'type', [column, row]);
+      if (type === 'index') {
+        return rows.getRowAttribute(row, TABLE_ROW_ATTRIBUTE.ROW_INDEX);
+      }
+      var key = resolvePropVal(column, 'field', [column, row]);
+      var cell = getRowText(row, key);
+      if (typeof column.render === 'function') {
+        return renderCellCallbackFn();
+      }
+      if (typeof cell === 'boolean') {
+        return String(cell);
+      }
+      if (!cell && typeof cell !== 'number') {
+        var emptyCellText = props.emptyCellText;
+        if (emptyCellText) {
+          if (typeof emptyCellText === 'function') {
+            return emptyCellText(row, column, index, rows.tableRowList.value);
+          }
+          return emptyCellText;
+        }
+      }
+      if (typeof_typeof(cell) === 'object') {
+        return JSON.stringify((0,external_vue_namespaceObject.unref)(cell));
+      }
+      return cell;
+    };
+    var renderFn = {
+      expand: function expand() {
+        return isChild ? '' : renderExpandColumn();
+      },
+      selection: function selection() {
+        return renderCheckboxColumn();
+      },
+      drag: renderDraggableCell
+    };
+    return (_renderFn$column$type = (_renderFn$column$type2 = renderFn[column.type]) === null || _renderFn$column$type2 === void 0 ? void 0 : _renderFn$column$type2.call(renderFn, row, column, index, rows)) !== null && _renderFn$column$type !== void 0 ? _renderFn$column$type : defaultFn();
+  };
+  var renderCellCallbackFn = function renderCellCallbackFn() {
+    var cell = getRowText(row, resolvePropVal(column, 'field', [column, row]));
+    var data = row;
+    return column.render({
+      cell: cell,
+      data: data,
+      row: row,
+      column: column,
+      index: index,
+      rows: rows.tableRowList.value
+    });
+  };
+  var getExpandCell = function getExpandCell() {
+    var _ctx$slots$expandCont, _ctx$slots$expandCont2, _ctx$slots;
+    var isExpand = rows.getRowAttribute(row, TABLE_ROW_ATTRIBUTE.ROW_EXPAND);
+    var icon = isExpand ? (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.DownShape, null, null) : (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.RightShape, null, null);
+    return (0,external_vue_namespaceObject.createVNode)("span", null, [[icon, (_ctx$slots$expandCont = (_ctx$slots$expandCont2 = (_ctx$slots = ctx.slots).expandContent) === null || _ctx$slots$expandCont2 === void 0 ? void 0 : _ctx$slots$expandCont2.call(_ctx$slots, row)) !== null && _ctx$slots$expandCont !== void 0 ? _ctx$slots$expandCont : '']]);
+  };
+  var handleRowExpandClick = function handleRowExpandClick(e) {
+    rows.setRowExpand(row, !rows.getRowAttribute(row, TABLE_ROW_ATTRIBUTE.ROW_EXPAND));
+    ctx.emit(EMIT_EVENTS.ROW_EXPAND_CLICK, {
+      row: row,
+      column: column,
+      index: index,
+      rows: rows.tableRowList.value,
+      e: e
+    });
+  };
+  var renderExpandColumn = function renderExpandColumn() {
+    var renderExpandSlot = function renderExpandSlot() {
+      var _ctx$slots$expandCell, _ctx$slots$expandCell2, _ctx$slots2;
+      if (typeof column.render === 'function') {
+        return renderCellCallbackFn();
+      }
+      return (_ctx$slots$expandCell = (_ctx$slots$expandCell2 = (_ctx$slots2 = ctx.slots).expandCell) === null || _ctx$slots$expandCell2 === void 0 ? void 0 : _ctx$slots$expandCell2.call(_ctx$slots2, {
+        row: row,
+        column: column,
+        index: index,
+        rows: rows
+      })) !== null && _ctx$slots$expandCell !== void 0 ? _ctx$slots$expandCell : getExpandCell();
+    };
+    return (0,external_vue_namespaceObject.createVNode)("span", {
+      "class": "expand-btn-action",
+      "onClick": function onClick(e) {
+        return handleRowExpandClick(e);
+      }
+    }, [renderExpandSlot()]);
+  };
+  var renderDraggableCell = function renderDraggableCell() {
+    var _props$rowDraggable$r, _props$rowDraggable, _props$rowDraggable$f, _props$rowDraggable2, _props$rowDraggable$i, _props$rowDraggable3;
+    var renderFn = (_props$rowDraggable$r = (_props$rowDraggable = props.rowDraggable) === null || _props$rowDraggable === void 0 ? void 0 : _props$rowDraggable.render) !== null && _props$rowDraggable$r !== void 0 ? _props$rowDraggable$r : props.rowDraggable;
+    if (typeof renderFn === 'function') {
+      return renderFn(row, column, index, rows.tableRowList.value);
+    }
+    var fontSize = (_props$rowDraggable$f = (_props$rowDraggable2 = props.rowDraggable) === null || _props$rowDraggable2 === void 0 ? void 0 : _props$rowDraggable2.fontSize) !== null && _props$rowDraggable$f !== void 0 ? _props$rowDraggable$f : '14px';
+    var fontIcon = (_props$rowDraggable$i = (_props$rowDraggable3 = props.rowDraggable) === null || _props$rowDraggable3 === void 0 ? void 0 : _props$rowDraggable3.icon) !== null && _props$rowDraggable$i !== void 0 ? _props$rowDraggable$i : (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.GragFill, {
+      "style": "'--font-size: ".concat(fontSize, ";'"),
+      "class": "drag-cell"
+    }, null);
+    return fontIcon;
+  };
+  return {
+    renderCell: renderCell
+  };
+});
 ;// CONCATENATED MODULE: ../../packages/table/src/hooks/use-shift-key.tsx
 /*
  * Tencent is pleased to support the open source community by making
@@ -22254,7 +22750,7 @@ function use_head_isSlot(s) {
  * IN THE SOFTWARE.
  */
 
-/* harmony default export */ const use_shift_key = (function (props) {
+var multiShiftKey = function multiShiftKey(props) {
   var isShiftKeyDown = (0,external_vue_namespaceObject.ref)(false);
   var store = {
     start: null,
@@ -22305,21 +22801,23 @@ function use_head_isSlot(s) {
   var getStore = function getStore() {
     return store;
   };
-  (0,external_vue_namespaceObject.onUnmounted)(function () {
+  var removeMultiCheckedEvents = function removeMultiCheckedEvents() {
     if (props.shiftMultiChecked) {
       window.removeEventListener('keydown', handleKeyDown);
       window.removeEventListener('keyup', handleKeyUp);
     }
-  });
+  };
   return {
     isShiftKeyDown: isShiftKeyDown,
     setStore: setStore,
     getStore: getStore,
     clearStore: clearStore,
     setStoreStart: setStoreStart,
-    clearStoreStart: clearStoreStart
+    clearStoreStart: clearStoreStart,
+    removeMultiCheckedEvents: removeMultiCheckedEvents
   };
-});
+};
+/* harmony default export */ const use_shift_key = (multiShiftKey);
 ;// CONCATENATED MODULE: ../../packages/table/src/hooks/use-render.tsx
 
 
@@ -22363,8 +22861,6 @@ function use_head_isSlot(s) {
 
 
 
-
-
 function use_render_isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0,external_vue_namespaceObject.isVNode)(s);
 }
@@ -22378,6 +22874,7 @@ function use_render_isSlot(s) {
   var t = (0,config_provider_namespaceObject.useLocale)('table');
   var uuid = esm_browser_v4();
   var dragEvents = {};
+  var multiShiftKey = use_shift_key(props);
   /**
    * 渲染table colgroup
    * @returns
@@ -22388,9 +22885,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);
     })]);
   };
@@ -22420,294 +22917,98 @@ function use_render_isSlot(s) {
             }),
             getTH = _useHead.getTH;
           return getTH();
-        })])];
-      }
-    })])]);
-  };
-  var renderColumns = function renderColumns() {
-    if (!props.showHead) {
-      return null;
-    }
-    return (0,external_vue_namespaceObject.createVNode)("table", {
-      "cellpadding": 0,
-      "cellspacing": 0
-    }, [renderColgroup(), renderHeader()]);
-  };
-  /** **************************************** Rows Render ******************************* **/
-  /**
-   * 渲染Table Body
-   * @returns
-   */
-  var renderRows = function renderRows(dataList) {
-    var preRow = {};
-    var rowSpanMap = new WeakMap();
-    var needRowSpan = columns.needRowSpan.value;
-    return (0,external_vue_namespaceObject.createVNode)("tbody", null, [dataList.map(function (row, rowIndex) {
-      var result = getRowRender(row, rowIndex, preRow, dataList, rowSpanMap, needRowSpan);
-      preRow = row;
-      return result;
-    })]);
-  };
-  var getRowHeight = function getRowHeight(row, rowIndex) {
-    var _settings$options = settings.options,
-      size = _settings$options.size,
-      height = _settings$options.height;
-    if (height !== null && height !== undefined) {
-      return resolvePropVal(settings.options, 'height', ['tbody', row, rowIndex, size]);
-    }
-    return resolvePropVal(props, 'rowHeight', ['tbody', row, rowIndex]);
-  };
-  var setDragEvents = function setDragEvents(events) {
-    dragEvents = events;
-  };
-  /**
-   * 渲染Table主体
-   * @param rows 表格数据
-   * @returns
-   */
-  var renderTBody = function renderTBody(list) {
-    var dataList = list !== null && list !== void 0 ? list : rows.pageRowList;
-    var localEmptyText = (0,external_vue_namespaceObject.computed)(function () {
-      if (props.emptyText === undefined) {
-        return t.value.emptyText;
-      }
-      return props.emptyText;
-    });
-    if (!dataList.length) {
-      var _ctx$slots$empty, _ctx$slots$empty2, _ctx$slots;
-      return (_ctx$slots$empty = (_ctx$slots$empty2 = (_ctx$slots = ctx.slots).empty) === null || _ctx$slots$empty2 === void 0 ? void 0 : _ctx$slots$empty2.call(_ctx$slots)) !== null && _ctx$slots$empty !== void 0 ? _ctx$slots$empty : (0,external_vue_namespaceObject.createVNode)(body_empty, {
-        "emptyText": localEmptyText.value,
-        "filterList": dataList,
-        "list": props.data
-      }, null);
-    }
-    return (0,external_vue_namespaceObject.createVNode)("table", {
-      "cellpadding": 0,
-      "cellspacing": 0,
-      "data-table-uuid": uuid
-    }, [renderColgroup(), renderRows(dataList)]);
-  };
-  /**
-   * table row click handle
-   * @param e
-   * @param row
-   * @param index
-   * @param rows
-   */
-  var handleRowClick = function handleRowClick(e, row, index, rows) {
-    ctx.emit(EMIT_EVENTS.ROW_CLICK, e, row, index, rows);
-  };
-  /**
-   * table row click handle
-   * @param e
-   * @param row
-   * @param index
-   * @param rows
-   */
-  var handleRowDblClick = function handleRowDblClick(e, row, index, rows) {
-    ctx.emit(EMIT_EVENTS.ROW_DBL_CLICK, e, row, index, rows);
-  };
-  var handleRowEnter = function handleRowEnter(e, row, index, rows) {
-    ctx.emit(EMIT_EVENTS.ROW_MOUSE_ENTER, e, row, index, rows);
-  };
-  var handleRowLeave = function handleRowLeave(e, row, index, rows) {
-    ctx.emit(EMIT_EVENTS.ROW_MOUSE_LEAVE, e, row, index, rows);
-  };
-  var renderCellCallbackFn = function renderCellCallbackFn(row, column, index, rows) {
-    var cell = getRowText(row, resolvePropVal(column, 'field', [column, row]));
-    var data = row;
-    return column.render({
-      cell: cell,
-      data: data,
-      row: row,
-      column: column,
-      index: index,
-      rows: rows
-    });
-  };
-  var getExpandCell = function getExpandCell(row) {
-    var _ctx$slots$expandCont, _ctx$slots$expandCont2, _ctx$slots2;
-    var isExpand = rows.getRowAttribute(row, TABLE_ROW_ATTRIBUTE.ROW_EXPAND);
-    var icon = isExpand ? (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.DownShape, null, null) : (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.RightShape, null, null);
-    return (0,external_vue_namespaceObject.createVNode)("span", null, [[icon, (_ctx$slots$expandCont = (_ctx$slots$expandCont2 = (_ctx$slots2 = ctx.slots).expandContent) === null || _ctx$slots$expandCont2 === void 0 ? void 0 : _ctx$slots$expandCont2.call(_ctx$slots2, row)) !== null && _ctx$slots$expandCont !== void 0 ? _ctx$slots$expandCont : '']]);
-  };
-  var handleRowExpandClick = function handleRowExpandClick(row, column, index, rowList, e) {
-    rows.setRowExpand(row, !rows.getRowAttribute(row, TABLE_ROW_ATTRIBUTE.ROW_EXPAND));
-    ctx.emit(EMIT_EVENTS.ROW_EXPAND_CLICK, {
-      row: row,
-      column: column,
-      index: index,
-      rows: rowList,
-      e: e
-    });
-  };
-  var renderExpandColumn = function renderExpandColumn(row, column, index, rows) {
-    var renderExpandSlot = function renderExpandSlot() {
-      var _ctx$slots$expandCell, _ctx$slots$expandCell2, _ctx$slots3;
-      if (typeof column.render === 'function') {
-        return renderCellCallbackFn(row, column, index, rows);
-      }
-      return (_ctx$slots$expandCell = (_ctx$slots$expandCell2 = (_ctx$slots3 = ctx.slots).expandCell) === null || _ctx$slots$expandCell2 === void 0 ? void 0 : _ctx$slots$expandCell2.call(_ctx$slots3, {
-        row: row,
-        column: column,
-        index: index,
-        rows: rows
-      })) !== null && _ctx$slots$expandCell !== void 0 ? _ctx$slots$expandCell : getExpandCell(row);
-    };
-    return (0,external_vue_namespaceObject.createVNode)("span", {
-      "class": "expand-btn-action",
-      "onClick": function onClick(e) {
-        return handleRowExpandClick(row, column, index, rows, e);
-      }
-    }, [renderExpandSlot()]);
-  };
-  var renderDraggableCell = function renderDraggableCell(row, column, index, rows) {
-    var _props$rowDraggable$r, _props$rowDraggable, _props$rowDraggable$f, _props$rowDraggable2, _props$rowDraggable$i, _props$rowDraggable3;
-    var renderFn = (_props$rowDraggable$r = (_props$rowDraggable = props.rowDraggable) === null || _props$rowDraggable === void 0 ? void 0 : _props$rowDraggable.render) !== null && _props$rowDraggable$r !== void 0 ? _props$rowDraggable$r : props.rowDraggable;
-    if (typeof renderFn === 'function') {
-      return renderFn(row, column, index, rows);
-    }
-    var fontSize = (_props$rowDraggable$f = (_props$rowDraggable2 = props.rowDraggable) === null || _props$rowDraggable2 === void 0 ? void 0 : _props$rowDraggable2.fontSize) !== null && _props$rowDraggable$f !== void 0 ? _props$rowDraggable$f : '14px';
-    var fontIcon = (_props$rowDraggable$i = (_props$rowDraggable3 = props.rowDraggable) === null || _props$rowDraggable3 === void 0 ? void 0 : _props$rowDraggable3.icon) !== null && _props$rowDraggable$i !== void 0 ? _props$rowDraggable$i : (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.GragFill, {
-      "style": "'--font-size: ".concat(fontSize, ";'"),
-      "class": "drag-cell"
-    }, null);
-    return fontIcon;
-  };
-  var _useShiftKey = use_shift_key(props),
-    isShiftKeyDown = _useShiftKey.isShiftKeyDown,
-    getStore = _useShiftKey.getStore,
-    setStore = _useShiftKey.setStore,
-    setStoreStart = _useShiftKey.setStoreStart,
-    clearStoreStart = _useShiftKey.clearStoreStart;
-  var renderCheckboxColumn = function renderCheckboxColumn(row, index, column) {
-    var handleChecked = function handleChecked(value, event) {
-      event.stopImmediatePropagation();
-      event.preventDefault();
-      event.stopPropagation();
-      if (!isShiftKeyDown.value) {
-        if (value) {
-          setStoreStart(row, index);
-        } else {
-          clearStoreStart();
-        }
-      }
-      rows.setRowSelection(row, value);
-      columns.setColumnAttribute(column, COLUMN_ATTRIBUTE.SELECTION_INDETERMINATE, rows.getRowIndeterminate());
-      columns.setColumnAttribute(column, COLUMN_ATTRIBUTE.SELECTION_VAL, rows.getRowCheckedAllValue());
-      ctx.emit(EMIT_EVENTS.ROW_SELECT, {
-        row: row,
-        index: index,
-        checked: value,
-        data: props.data
-      });
-      ctx.emit(EMIT_EVENTS.ROW_SELECT_CHANGE, {
-        row: row,
-        index: index,
-        checked: value,
-        data: props.data
-      });
-    };
-    var beforeRowChange = function beforeRowChange() {
-      if (isShiftKeyDown.value) {
-        var result = setStore(row, index);
-        if (result) {
-          var _rows$pageRowList$sli;
-          var _getStore = getStore(),
-            start = _getStore.start,
-            end = _getStore.end;
-          var startIndex = start.index < end.index ? start.index : end.index;
-          var endIndex = start.index < end.index ? end.index : start.index;
-          ((_rows$pageRowList$sli = rows.pageRowList.slice(startIndex, endIndex + 1)) !== null && _rows$pageRowList$sli !== void 0 ? _rows$pageRowList$sli : []).forEach(function (item) {
-            var isRowEnabled = isRowSelectEnable(props, {
-              row: row,
-              index: index,
-              isCheckAll: false
-            });
-            isRowEnabled && rows.setRowSelection(item, true);
-          });
-        }
-        ctx.emit(EMIT_EVENTS.ROW_SELECT, {
-          row: row,
-          index: index,
-          checked: true,
-          data: props.data,
-          isShiftKeyDown: true
-        });
-        ctx.emit(EMIT_EVENTS.ROW_SELECT_CHANGE, {
-          row: row,
-          index: index,
-          checked: true,
-          data: props.data,
-          isShiftKeyDown: true
-        });
-        return Promise.resolve(!result);
-      }
-      return Promise.resolve(true);
-    };
-    var indeterminate = rows.getRowAttribute(row, TABLE_ROW_ATTRIBUTE.ROW_SELECTION_INDETERMINATE);
-    var isChecked = rows.getRowAttribute(row, TABLE_ROW_ATTRIBUTE.ROW_SELECTION);
-    var isEnable = isRowSelectEnable(props, {
-      row: row,
-      index: index,
-      isCheckAll: false
-    });
-    return (0,external_vue_namespaceObject.createVNode)(checkbox_namespaceObject["default"], {
-      "beforeChange": beforeRowChange,
-      "disabled": !isEnable,
-      "indeterminate": indeterminate,
-      "modelValue": isChecked,
-      "onChange": handleChecked
-    }, null);
+        })])];
+      }
+    })])]);
+  };
+  var renderColumns = function renderColumns() {
+    if (!props.showHead) {
+      return null;
+    }
+    return (0,external_vue_namespaceObject.createVNode)("table", {
+      "cellpadding": 0,
+      "cellspacing": 0
+    }, [renderColgroup(), renderHeader()]);
   };
+  /** **************************************** Rows Render ******************************* **/
   /**
-   * 渲染表格Cell内容
-   * @param row 当前行
-   * @param column 当前列
-   * @param index 当前列
-   * @param rows 当前列
+   * 渲染Table Body
    * @returns
    */
-  var renderCell = function renderCell(row, column, index, rowList) {
-    var _renderFn$column$type, _renderFn$column$type2;
-    var isChild = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-    var defaultFn = function defaultFn() {
-      var type = resolvePropVal(column, 'type', [column, row]);
-      if (type === 'index') {
-        return rows.getRowAttribute(row, TABLE_ROW_ATTRIBUTE.ROW_INDEX);
-      }
-      var key = resolvePropVal(column, 'field', [column, row]);
-      var cell = getRowText(row, key);
-      if (typeof column.render === 'function') {
-        return renderCellCallbackFn(row, column, index, rowList);
-      }
-      if (typeof cell === 'boolean') {
-        return String(cell);
-      }
-      if (!cell && typeof cell !== 'number') {
-        var emptyCellText = props.emptyCellText;
-        if (emptyCellText) {
-          if (typeof emptyCellText === 'function') {
-            return emptyCellText(row, column, index, rowList);
-          }
-          return emptyCellText;
-        }
-      }
-      if (typeof_typeof(cell) === 'object') {
-        return JSON.stringify((0,external_vue_namespaceObject.unref)(cell));
+  var renderRows = function renderRows(dataList) {
+    var preRow = {};
+    var rowSpanMap = new WeakMap();
+    var needRowSpan = columns.needRowSpan.value;
+    return (0,external_vue_namespaceObject.createVNode)("tbody", null, [dataList.map(function (row, rowIndex) {
+      var result = getRowRender(row, rowIndex, preRow, dataList, rowSpanMap, needRowSpan);
+      preRow = row;
+      return result;
+    })]);
+  };
+  var getRowHeight = function getRowHeight(row, rowIndex) {
+    var _settings$options = settings.options,
+      size = _settings$options.size,
+      height = _settings$options.height;
+    if (height !== null && height !== undefined) {
+      return resolvePropVal(settings.options, 'height', ['tbody', row, rowIndex, size]);
+    }
+    return resolvePropVal(props, 'rowHeight', ['tbody', row, rowIndex]);
+  };
+  var setDragEvents = function setDragEvents(events) {
+    dragEvents = events;
+  };
+  /**
+   * 渲染Table主体
+   * @param rows 表格数据
+   * @returns
+   */
+  var renderTBody = function renderTBody(list) {
+    var dataList = list !== null && list !== void 0 ? list : rows.pageRowList;
+    var localEmptyText = (0,external_vue_namespaceObject.computed)(function () {
+      if (props.emptyText === undefined) {
+        return t.value.emptyText;
       }
-      return cell;
-    };
-    var renderFn = {
-      expand: function expand(row, column, index, rowList) {
-        return isChild ? '' : renderExpandColumn(row, column, index, rowList);
-      },
-      selection: function selection(row, column, index, _rows) {
-        return renderCheckboxColumn(row, index, column);
-      },
-      drag: renderDraggableCell
-    };
-    return (_renderFn$column$type = (_renderFn$column$type2 = renderFn[column.type]) === null || _renderFn$column$type2 === void 0 ? void 0 : _renderFn$column$type2.call(renderFn, row, column, index, rows)) !== null && _renderFn$column$type !== void 0 ? _renderFn$column$type : defaultFn();
+      return props.emptyText;
+    });
+    if (!dataList.length) {
+      var _ctx$slots$empty, _ctx$slots$empty2, _ctx$slots;
+      return (_ctx$slots$empty = (_ctx$slots$empty2 = (_ctx$slots = ctx.slots).empty) === null || _ctx$slots$empty2 === void 0 ? void 0 : _ctx$slots$empty2.call(_ctx$slots)) !== null && _ctx$slots$empty !== void 0 ? _ctx$slots$empty : (0,external_vue_namespaceObject.createVNode)(body_empty, {
+        "emptyText": localEmptyText.value,
+        "filterList": dataList,
+        "list": props.data
+      }, null);
+    }
+    return (0,external_vue_namespaceObject.createVNode)("table", {
+      "cellpadding": 0,
+      "cellspacing": 0,
+      "data-table-uuid": uuid
+    }, [renderColgroup(), renderRows(dataList)]);
+  };
+  /**
+   * table row click handle
+   * @param e
+   * @param row
+   * @param index
+   * @param rows
+   */
+  var handleRowClick = function handleRowClick(e, row, index, rows) {
+    ctx.emit(EMIT_EVENTS.ROW_CLICK, e, row, index, rows);
+  };
+  /**
+   * table row click handle
+   * @param e
+   * @param row
+   * @param index
+   * @param rows
+   */
+  var handleRowDblClick = function handleRowDblClick(e, row, index, rows) {
+    ctx.emit(EMIT_EVENTS.ROW_DBL_CLICK, e, row, index, rows);
+  };
+  var handleRowEnter = function handleRowEnter(e, row, index, rows) {
+    ctx.emit(EMIT_EVENTS.ROW_MOUSE_ENTER, e, row, index, rows);
+  };
+  var handleRowLeave = function handleRowLeave(e, row, index, rows) {
+    ctx.emit(EMIT_EVENTS.ROW_MOUSE_LEAVE, e, row, index, rows);
   };
   var getRowSpanConfig = function getRowSpanConfig(row, rowIndex, preRow, col, store) {
     var _store$get$get, _store$get;
@@ -22793,6 +23094,20 @@ function use_render_isSlot(s) {
               'expand-row': rows.getRowAttribute(row, TABLE_ROW_ATTRIBUTE.ROW_EXPAND),
               'is-last': rowIndex + rowspan >= rowLength
             }]);
+            var columnKey = "".concat(rowId, "_").concat(index);
+            var cellKey = "".concat(rowId, "_").concat(index, "_cell");
+            var _useCell = use_cell({
+                props: props,
+                rows: rows,
+                ctx: ctx,
+                columns: columns,
+                row: row,
+                index: index,
+                column: column,
+                isChild: isChild,
+                multiShiftKey: multiShiftKey
+              }),
+              renderCell = _useCell.renderCell;
             var handleEmit = function handleEmit(event, type) {
               var args = {
                 event: event,
@@ -22800,7 +23115,7 @@ function use_render_isSlot(s) {
                 column: column,
                 cell: {
                   getValue: function getValue() {
-                    return renderCell(row, column, rowIndex, rowList, isChild);
+                    return renderCell();
                   }
                 },
                 rowIndex: rowIndex,
@@ -22808,14 +23123,13 @@ function use_render_isSlot(s) {
               };
               ctx.emit(type, args);
             };
-            var columnKey = "".concat(rowId, "_").concat(index);
-            var cellKey = "".concat(rowId, "_").concat(index, "_cell");
             return (0,external_vue_namespaceObject.createVNode)("td", {
               "key": columnKey,
               "style": cellStyle,
               "class": cellClass,
               "colspan": colspan,
               "rowspan": rowspan,
+              "data-id": columnKey,
               "onClick": function onClick(event) {
                 return handleEmit(event, EMIT_EVENTS.CELL_CLICK);
               },
@@ -22824,12 +23138,13 @@ function use_render_isSlot(s) {
               }
             }, [(0,external_vue_namespaceObject.createVNode)(table_cell, {
               "key": cellKey,
+              "data-id": cellKey,
               "class": tdCtxClass,
               "column": column,
               "observerResize": props.observerResize,
               "parentSetting": props.showOverflowTooltip,
               "row": row
-            }, use_render_isSlot(_slot = renderCell(row, column, rowIndex, rowList, isChild)) ? _slot : {
+            }, use_render_isSlot(_slot = renderCell()) ? _slot : {
               "default": function _default() {
                 return [_slot];
               }
@@ -22843,7 +23158,7 @@ function use_render_isSlot(s) {
   var renderExpandRow = function renderExpandRow(row, rowClass, _rowIndex) {
     var isExpand = rows.getRowAttribute(row, TABLE_ROW_ATTRIBUTE.ROW_EXPAND);
     if (isExpand) {
-      var _ctx$slots$expandRow, _ctx$slots$expandRow2, _ctx$slots4;
+      var _ctx$slots$expandRow, _ctx$slots$expandRow2, _ctx$slots2;
       var resovledClass = [].concat(_toConsumableArray(rowClass), [{
         row_expend: true
       }]);
@@ -22863,7 +23178,7 @@ function use_render_isSlot(s) {
           }, [(0,external_vue_namespaceObject.createVNode)("td", {
             "colspan": columns.visibleColumns.length,
             "rowspan": 1
-          }, [(_ctx$slots$expandRow = (_ctx$slots$expandRow2 = (_ctx$slots4 = ctx.slots).expandRow) === null || _ctx$slots$expandRow2 === void 0 ? void 0 : _ctx$slots$expandRow2.call(_ctx$slots4, row)) !== null && _ctx$slots$expandRow !== void 0 ? _ctx$slots$expandRow : (0,external_vue_namespaceObject.createVNode)("div", {
+          }, [(_ctx$slots$expandRow = (_ctx$slots$expandRow2 = (_ctx$slots2 = ctx.slots).expandRow) === null || _ctx$slots$expandRow2 === void 0 ? void 0 : _ctx$slots$expandRow2.call(_ctx$slots2, row)) !== null && _ctx$slots$expandRow !== void 0 ? _ctx$slots$expandRow : (0,external_vue_namespaceObject.createVNode)("div", {
             "class": "expand-cell-ctx"
           }, [(0,external_vue_namespaceObject.createTextVNode)("Expand Row")])])])];
         }
@@ -22877,7 +23192,7 @@ function use_render_isSlot(s) {
     ctx.emit(EMIT_EVENTS.PAGE_LIMIT_CHANGE, limit);
   };
   var handlePageChange = function handlePageChange(current) {
-    if (typeof_typeof(props.pagination) === 'object' && current !== props.pagination.current) {
+    if (typeof_typeof(props.pagination) === 'object' && current !== pagination.options.current) {
       pagination.setPagination({
         current: current,
         value: current
@@ -22904,6 +23219,9 @@ function use_render_isSlot(s) {
       }), null);
     }
   };
+  (0,external_vue_namespaceObject.onUnmounted)(function () {
+    multiShiftKey.removeMultiCheckedEvents();
+  });
   return {
     renderColumns: renderColumns,
     renderTBody: renderTBody,
@@ -23206,90 +23524,6 @@ var useRows = function useRows(props) {
   };
 };
 /* harmony default export */ const use_rows = (useRows);
-;// CONCATENATED MODULE: external "../loading"
-var loading_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var loading_y = x => () => x
-const loading_namespaceObject = loading_x({ ["BkLoadingMode"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_loading_dcf0e69a__.BkLoadingMode, ["BkLoadingSize"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_loading_dcf0e69a__.BkLoadingSize, ["default"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_loading_dcf0e69a__["default"] });
-;// CONCATENATED MODULE: external "../loading/loading.less"
-var loading_less_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var loading_less_y = x => () => x
-const loading_less_namespaceObject = loading_less_x({  });
-;// CONCATENATED MODULE: ../../packages/table/src/hooks/use-scroll-loading.tsx
-
-
-/*
- * Tencent is pleased to support the open source community by making
- * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
- *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
- *
- * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
- *
- * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
- *
- * ---------------------------------------------------
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
- * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
- * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
- * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
- * the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
- * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
- * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
- * IN THE SOFTWARE.
- */
-
-
-
-
-/* harmony default export */ const use_scroll_loading = (function (props, ctx) {
-  var refScrollLoading = (0,external_vue_namespaceObject.toRef)(props, 'scrollLoading');
-  var getLoadingOption = function getLoadingOption() {
-    if (typeof refScrollLoading.value === 'boolean') {
-      return {
-        loading: !!refScrollLoading.value,
-        inline: true,
-        title: '',
-        size: loading_namespaceObject.BkLoadingSize.Normal,
-        mode: loading_namespaceObject.BkLoadingMode.Default,
-        indicator: null
-      };
-    }
-    return refScrollLoading.value;
-  };
-  var isRender = (0,external_vue_namespaceObject.computed)(function () {
-    return refScrollLoading.value !== null && (typeof refScrollLoading.value === 'boolean' && refScrollLoading.value || typeof_typeof(refScrollLoading.value) === 'object');
-  });
-  var renderScrollLoading = function renderScrollLoading() {
-    var _ctx$slots$fixedBotto3, _ctx$slots$fixedBotto4, _ctx$slots2;
-    if (isRender.value) {
-      var _ctx$slots$fixedBotto, _ctx$slots$fixedBotto2, _ctx$slots;
-      var _getLoadingOption = getLoadingOption(),
-        loading = _getLoadingOption.loading,
-        size = _getLoadingOption.size,
-        mode = _getLoadingOption.mode,
-        title = _getLoadingOption.title,
-        inline = _getLoadingOption.inline,
-        indicator = _getLoadingOption.indicator;
-      return (_ctx$slots$fixedBotto = (_ctx$slots$fixedBotto2 = (_ctx$slots = ctx.slots).fixedBottom) === null || _ctx$slots$fixedBotto2 === void 0 ? void 0 : _ctx$slots$fixedBotto2.call(_ctx$slots)) !== null && _ctx$slots$fixedBotto !== void 0 ? _ctx$slots$fixedBotto : (0,external_vue_namespaceObject.createVNode)(loading_namespaceObject["default"], {
-        loading: loading,
-        size: size,
-        mode: mode,
-        title: title,
-        inline: inline,
-        indicator: indicator
-      }, null);
-    }
-    return (_ctx$slots$fixedBotto3 = (_ctx$slots$fixedBotto4 = (_ctx$slots2 = ctx.slots).fixedBottom) === null || _ctx$slots$fixedBotto4 === void 0 ? void 0 : _ctx$slots$fixedBotto4.call(_ctx$slots2)) !== null && _ctx$slots$fixedBotto3 !== void 0 ? _ctx$slots$fixedBotto3 : null;
-  };
-  return {
-    renderScrollLoading: renderScrollLoading
-  };
-});
 ;// CONCATENATED MODULE: ../../packages/table/src/hooks/use-settings.tsx
 
 
@@ -23334,7 +23568,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;
@@ -23410,6 +23644,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);
   };
@@ -23663,7 +23898,6 @@ var useSettings = function useSettings(props, ctx, columns) {
 
 
 
-
 /* harmony default export */ const table = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'Table',
   props: tableProps,
@@ -23672,7 +23906,30 @@ 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,
+      renderFixedBottom = _useLayout.renderFixedBottom,
+      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) {
+        var _refBody$value;
+        (_refBody$value = refBody.value) === null || _refBody$value === void 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,
@@ -23687,52 +23944,33 @@ 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)();
     var initTableColumns = function initTableColumns() {
-      columns.debounceUpdateColumns(resolveColumns(instance));
+      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));
     };
     (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 渲染行
      */
@@ -23774,12 +24012,17 @@ var useSettings = function useSettings(props, ctx, columns) {
     });
     var setTableFootHeight = function setTableFootHeight() {
       setFootHeight(footHeight.value);
+      if (/^\d+\.?\d*(px)?$/.test("".concat(props.height))) {
+        setBodyHeight(Number("".concat(props.height).replace('px', '')));
+      }
     };
     var setTableData = function setTableData() {
       var filterOrderList = getFilterAndSortList();
-      pagination.setPagination({
-        count: filterOrderList.length
-      });
+      if (!props.remotePagination) {
+        pagination.setPagination({
+          count: filterOrderList.length
+        });
+      }
       var renderList = getRenderRowList(filterOrderList);
       rows.setPageRowList(renderList);
       (0,external_vue_namespaceObject.nextTick)(function () {
@@ -23787,6 +24030,7 @@ var useSettings = function useSettings(props, ctx, columns) {
       });
     };
     use_observer_resize(refRoot, function () {
+      var _refBody$value2;
       if ((props.height === '100%' || props.virtualEnabled) && (0,lodash.isElement)(refRoot.value)) {
         if (isResizeBodyHeight.value) {
           setTimeout(function () {
@@ -23795,12 +24039,13 @@ var useSettings = function useSettings(props, ctx, columns) {
           return;
         }
         var tableHeight = refRoot.value.offsetHeight;
-        var bodyHeight = tableHeight - columns.headHeight.value - footHeight.value;
         isResizeBodyHeight.value = true;
-        setBodyHeight(bodyHeight);
+        setBodyHeight(tableHeight);
         setOffsetRight();
       }
       computedColumnRect();
+      (_refBody$value2 = refBody.value) === null || _refBody$value2 === void 0 || _refBody$value2.scrollTo(0, 0);
+      setOffsetRight();
     });
     (0,external_vue_namespaceObject.watch)(function () {
       return [dragOffsetX.value];
@@ -23837,6 +24082,10 @@ var useSettings = function useSettings(props, ctx, columns) {
       return [pagination.options.count, pagination.options.limit, pagination.options.current, props.data];
     }, function () {
       setTableData();
+      (0,external_vue_namespaceObject.nextTick)(function () {
+        var _refBody$value3;
+        (_refBody$value3 = refBody.value) === null || _refBody$value3 === void 0 || _refBody$value3.scrollTo(0, 1);
+      });
     }, {
       immediate: true
     });
@@ -23854,7 +24103,7 @@ var useSettings = function useSettings(props, ctx, columns) {
       }
     });
     return function () {
-      return renderContainer([renderHeader(renderColumns, settings.renderSettings), renderBody(rows.pageRowList, renderTBody, renderFixedRows, renderScrollLoading), renderFooter(renderTFoot())]);
+      return renderContainer([renderHeader(renderColumns, settings.renderSettings, renderFixedRows), renderBody(rows.pageRowList, renderTBody, renderFixedRows), renderFixedBottom(), renderFooter(renderTFoot())]);
     };
   }
 }));