bkui-vue 2.0.1-beta.15.table.7 → 2.0.1-beta.15.table.9

package/lib/table/index.js

@@ -9,6 +9,8 @@ import * as __WEBPACK_EXTERNAL_MODULE_lodash_debounce_3540babe__ from "lodash/de
 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_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";
@@ -16,16 +18,14 @@ 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_icon_a97c79c3__ from "../icon";
 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:
@@ -17902,7 +17902,16 @@ 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)
 };
 ;// CONCATENATED MODULE: ../../packages/table/src/components/table-column.tsx
 
@@ -18457,12 +18466,9 @@ function v4(options, buf, offset) {
       });
     }
   };
-  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);
     columns.sort(function (col1, col2) {
       return col1.index - col2.index;
@@ -20783,6 +20789,90 @@ 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/hooks/use-layout.tsx
 
 
@@ -20823,6 +20913,7 @@ 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);
@@ -20837,8 +20928,14 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
   var layout = (0,external_vue_namespaceObject.reactive)({});
   var fixedColumns = (0,external_vue_namespaceObject.reactive)([]);
   var lineHeight = (0,external_vue_namespaceObject.ref)((_props$rowHeight = props.rowHeight) !== null && _props$rowHeight !== void 0 ? _props$rowHeight : LINE_HEIGHT);
+  var 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));
   });
@@ -20853,17 +20950,19 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     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.style.setProperty('--shadow-right', rightShawdow);
-    refRoot.value.style.setProperty('--shadow-left', leftShawdow);
+    (_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 () {
-    refRoot.value.style.setProperty('--drag-offset-x', "".concat(dragOffsetX.value, "px"));
-    refRoot.value.style.setProperty('--drag-offset-h-x', "".concat(dragOffsetX.value - 3, "px"));
-    refRoot.value.style.setProperty('--translate-y', "".concat(translateY.value, "px"));
-    refRoot.value.style.setProperty('--translate-x', "".concat(translateX.value, "px"));
-    refRoot.value.style.setProperty('--translate-x-1', "-".concat(translateX.value, "px"));
+    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) {
@@ -20875,11 +20974,12 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     setRootStyleVars();
   };
   var initRootStyleVars = function initRootStyleVars() {
-    refRoot.value.style.setProperty('--drag-offset-x', '-1000px');
-    refRoot.value.style.setProperty('--drag-offset-h-x', '-1000px');
-    refRoot.value.style.setProperty('--translate-y', '0px');
-    refRoot.value.style.setProperty('--translate-x', '0px');
-    refRoot.value.style.setProperty('--translate-x-1', '0px');
+    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;
@@ -20906,20 +21006,6 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     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(var(--drag-offset-x), var(--translate-y), 0)"
-    });
-  });
   var renderContainer = function renderContainer(childrend) {
     var _ctx$slots$default, _ctx$slots;
     return (0,external_vue_namespaceObject.createVNode)("div", {
@@ -20961,12 +21047,13 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
   var bodyMaxHeight = (0,external_vue_namespaceObject.computed)(function () {
     if (/^\d+\.?\d*(px|%)$/.test("".concat(tableStyle.value.maxHeight))) {
       var headerHeight = props.showHead ? headHeight.value : 0;
-      return "calc(".concat(tableStyle.value.maxHeight, " - ").concat(footHeight.value, "px - ").concat(headerHeight, "px)");
+      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 - fixedBottomHeight.value;
   };
   var footHeight = (0,external_vue_namespaceObject.ref)(0);
   var footerStyle = (0,external_vue_namespaceObject.computed)(function () {
@@ -21018,20 +21105,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 = resolveClassName('table-fixed');
   var fixedBottomRow = resolveClassName('table-fixed-bottom');
   var fixedBottomLoadingStyle = (0,external_vue_namespaceObject.computed)(function () {
+    var _props$fixedBottom$po, _props$fixedBottom4, _props$fixedBottom$he3, _props$fixedBottom5;
     return {
-      minHeight: "".concat(lineHeight.value, "px")
+      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,
@@ -21052,21 +21153,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", {
           "class": fixedWrapperClass
-        }, [fixedRows === null || fixedRows === void 0 ? void 0 : fixedRows()]), (0,external_vue_namespaceObject.createVNode)("div", {
-          "class": fixedBottomRow
-        }, [(_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": fixedBottomLoadingStyle.value,
-          "class": fixedBottomRow
-        }, [loadingRow === null || loadingRow === void 0 ? void 0 : loadingRow()])];
+        }, [fixedRows === null || fixedRows === void 0 ? void 0 : fixedRows()])];
       }
     });
   };
@@ -21081,11 +21176,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,
@@ -21201,6 +21300,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
@@ -21208,7 +21310,7 @@ var usePagination = function usePagination(props) {
     /**
      * 如果分页组件启用了前端分页，则重置分页组件数据
      */
-    if (pagination.current * pagination.limit >= pagination.count) {
+    if (pagination.current > totalPage.value) {
       pagination.current = 1;
     }
   };
@@ -21220,7 +21322,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));
     }
     /**
      * 分页组件是否启用
@@ -21630,11 +21732,36 @@ const checkbox_namespaceObject = checkbox_x({ ["BkCheckboxGroup"]: () => __WEBPA
 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
+const button_namespaceObject = button_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_button_a2ea7c9a__["default"] });
+;// CONCATENATED MODULE: external "../button/button.less"
+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 "../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: ../../packages/table/src/hooks/use-cell.tsx
+;// 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"] });
+;// CONCATENATED MODULE: external "../input/input.less"
+var input_less_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var input_less_y = x => () => x
+const input_less_namespaceObject = input_less_x({  });
+;// CONCATENATED MODULE: external "../popover"
+var popover_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var popover_y = x => () => x
+const popover_namespaceObject = popover_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_popover_9b03f19d__["default"] });
+;// CONCATENATED MODULE: external "../popover/popover.less"
+var popover_less_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var popover_less_y = x => () => x
+const popover_less_namespaceObject = popover_less_x({  });
+;// CONCATENATED MODULE: ../../packages/table/src/plugins/head-filter.tsx
+
 
 
 /*
@@ -21669,334 +21796,65 @@ const icon_namespaceObject = icon_x({ ["DownShape"]: () => __WEBPACK_EXTERNAL_MO
 
 
 
-/* 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
+
+
+
+
+
+
+
+
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0,external_vue_namespaceObject.isVNode)(s);
+}
+var ROW_HEIGHT = 32;
+/* harmony default export */ const head_filter = ((0,external_vue_namespaceObject.defineComponent)({
+  name: 'HeadFilter',
+  props: {
+    column: IColumnType,
+    height: shared_namespaceObject.PropTypes.number.def(ROW_HEIGHT)
+  },
+  emits: ['change', 'filterSave', 'reset'],
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit;
+    var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
+      resolveClassName = _usePrefix.resolveClassName;
+    var t = (0,config_provider_namespaceObject.useLocale)('table');
+    var filter = (0,external_vue_namespaceObject.computed)(function () {
+      var _props$column;
+      return (_props$column = props.column) === null || _props$column === void 0 ? void 0 : _props$column.filter;
+    });
+    var checked = (0,external_vue_namespaceObject.computed)(function () {
+      var _filter$value$checked, _filter$value;
+      return (_filter$value$checked = (_filter$value = filter.value) === null || _filter$value === void 0 ? void 0 : _filter$value.checked) !== null && _filter$value$checked !== void 0 ? _filter$value$checked : [];
+    });
+    var searchValue = (0,external_vue_namespaceObject.ref)('');
+    var state = (0,external_vue_namespaceObject.reactive)({
+      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));
+    });
+    var headFilterContentClass = (0,shared_namespaceObject.classes)(defineProperty_defineProperty({}, resolveClassName('table-head-filter'), true));
+    var refVirtualRender = (0,external_vue_namespaceObject.ref)(null);
+    var handlePopShow = function handlePopShow(isOpen) {
+      state.isOpen = isOpen;
+      isOpen && setTimeout(function () {
+        refVirtualRender.value.reset();
       });
-    };
-    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: external "../button"
-var button_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var button_y = x => () => x
-const button_namespaceObject = button_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_button_a2ea7c9a__["default"] });
-;// CONCATENATED MODULE: external "../button/button.less"
-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"
-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"] });
-;// CONCATENATED MODULE: external "../input/input.less"
-var input_less_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var input_less_y = x => () => x
-const input_less_namespaceObject = input_less_x({  });
-;// CONCATENATED MODULE: external "../popover"
-var popover_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var popover_y = x => () => x
-const popover_namespaceObject = popover_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_popover_9b03f19d__["default"] });
-;// CONCATENATED MODULE: external "../popover/popover.less"
-var popover_less_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var popover_less_y = x => () => x
-const popover_less_namespaceObject = popover_less_x({  });
-;// CONCATENATED MODULE: ../../packages/table/src/plugins/head-filter.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.
- */
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-function _isSlot(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0,external_vue_namespaceObject.isVNode)(s);
-}
-var ROW_HEIGHT = 32;
-/* harmony default export */ const head_filter = ((0,external_vue_namespaceObject.defineComponent)({
-  name: 'HeadFilter',
-  props: {
-    column: IColumnType,
-    height: shared_namespaceObject.PropTypes.number.def(ROW_HEIGHT)
-  },
-  emits: ['change', 'filterSave', 'reset'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
-      resolveClassName = _usePrefix.resolveClassName;
-    var t = (0,config_provider_namespaceObject.useLocale)('table');
-    var filter = (0,external_vue_namespaceObject.computed)(function () {
-      var _props$column;
-      return (_props$column = props.column) === null || _props$column === void 0 ? void 0 : _props$column.filter;
-    });
-    var checked = (0,external_vue_namespaceObject.computed)(function () {
-      var _filter$value$checked, _filter$value;
-      return (_filter$value$checked = (_filter$value = filter.value) === null || _filter$value === void 0 ? void 0 : _filter$value.checked) !== null && _filter$value$checked !== void 0 ? _filter$value$checked : [];
-    });
-    var searchValue = (0,external_vue_namespaceObject.ref)('');
-    var state = (0,external_vue_namespaceObject.reactive)({
-      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));
-    });
-    var headFilterContentClass = (0,shared_namespaceObject.classes)(defineProperty_defineProperty({}, resolveClassName('table-head-filter'), true));
-    var refVirtualRender = (0,external_vue_namespaceObject.ref)(null);
-    var handlePopShow = function handlePopShow(isOpen) {
-      state.isOpen = isOpen;
-      isOpen && setTimeout(function () {
-        refVirtualRender.value.reset();
-      });
-      if (!isOpen) {
-        searchValue.value = '';
-      }
+      if (!isOpen) {
+        searchValue.value = '';
+      }
     };
     var theme = "light ".concat(resolveClassName('table-head-filter'));
     var localData = (0,external_vue_namespaceObject.computed)(function () {
@@ -22515,77 +22373,321 @@ function use_head_isSlot(s) {
     var isChecked = columns.getColumnAttribute(column, COLUMN_ATTRIBUTE.SELECTION_VAL);
     var indeterminate = columns.getColumnAttribute(column, COLUMN_ATTRIBUTE.SELECTION_INDETERMINATE);
     return (0,external_vue_namespaceObject.createVNode)(checkbox_namespaceObject["default"], {
-      "disabled": isDisabled,
+      "disabled": isDisabled,
+      "indeterminate": indeterminate,
+      "modelValue": isChecked,
+      "onChange": handleChecked
+    }, null);
+  };
+  /**
+   * table head cell render
+   * @param column
+   * @param index
+   * @returns
+   */
+  var renderHeadCell = function renderHeadCell() {
+    if (column.type === 'selection') {
+      return [renderHeadCheckboxColumn()];
+    }
+    var _getHeadCellRender = getHeadCellRender(),
+      headClass = _getHeadCellRender.headClass,
+      showTitle = _getHeadCellRender.showTitle,
+      cells = _getHeadCellRender.cells;
+    return (0,external_vue_namespaceObject.createVNode)(table_cell, {
+      "class": headClass,
+      "column": column,
+      "headExplain": resolvePropVal(column.explain, 'head', [column]),
+      "isHead": true,
+      "observerResize": props.observerResize,
+      "parentSetting": props.showOverflowTooltip,
+      "resizerWay": props.resizerWay,
+      "title": showTitle
+    }, use_head_isSlot(cells) ? cells : {
+      "default": function _default() {
+        return [cells];
+      }
+    });
+  };
+  /**
+   * 点击选中一列事件
+   * @param index 当前选中列Index
+   * @param column 当前选中列
+   */
+  var handleColumnHeadClick = function handleColumnHeadClick() {
+    if (columns.getColumnAttribute(column, COLUMN_ATTRIBUTE.COL_IS_DRAG)) {
+      return;
+    }
+    if (column.sort && !column.filter) {
+      var nextType = getNextSortType(columns.getColumnRefAttribute(column, COLUMN_ATTRIBUTE.COL_SORT_TYPE));
+      var args = {
+        isCancel: false,
+        type: nextType
+      };
+      handleSortClick(args);
+    }
+  };
+  var headStyle = Object.assign(columns.getFixedStlye(column), {
+    '--background-color': DEF_COLOR[(_props$thead$color = (_props$thead = props.thead) === null || _props$thead === void 0 ? void 0 : _props$thead.color) !== null && _props$thead$color !== void 0 ? _props$thead$color : IHeadColor.DEF1]
+  });
+  var classList = [columns.getHeadColumnClass(column, index), columns.getColumnCustomClass(column), column.align || props.headerAlign || props.align];
+  var getTH = function getTH() {
+    return (0,external_vue_namespaceObject.createVNode)("th", (0,external_vue_namespaceObject.mergeProps)({
+      "style": headStyle,
+      "class": classList,
+      "colspan": 1,
+      "data-id": columns.getColumnId(column),
+      "rowspan": 1,
+      "onClick": function onClick() {
+        return handleColumnHeadClick();
+      }
+    }, columns.resolveEventListener(column)), [renderHeadCell()]);
+  };
+  return {
+    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);
   };
   /**
-   * table head cell render
-   * @param column
-   * @param index
+   * 渲染表格Cell内容
+   * @param row 当前行
+   * @param column 当前列
+   * @param index 当前列
+   * @param rows 当前列
    * @returns
    */
-  var renderHeadCell = function renderHeadCell() {
-    if (column.type === 'selection') {
-      return [renderHeadCheckboxColumn()];
-    }
-    var _getHeadCellRender = getHeadCellRender(),
-      headClass = _getHeadCellRender.headClass,
-      showTitle = _getHeadCellRender.showTitle,
-      cells = _getHeadCellRender.cells;
-    return (0,external_vue_namespaceObject.createVNode)(table_cell, {
-      "class": headClass,
-      "column": column,
-      "headExplain": resolvePropVal(column.explain, 'head', [column]),
-      "isHead": true,
-      "observerResize": props.observerResize,
-      "parentSetting": props.showOverflowTooltip,
-      "resizerWay": props.resizerWay,
-      "title": showTitle
-    }, use_head_isSlot(cells) ? cells : {
-      "default": function _default() {
-        return [cells];
+  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
     });
   };
-  /**
-   * 点击选中一列事件
-   * @param index 当前选中列Index
-   * @param column 当前选中列
-   */
-  var handleColumnHeadClick = function handleColumnHeadClick() {
-    if (columns.getColumnAttribute(column, COLUMN_ATTRIBUTE.COL_IS_DRAG)) {
-      return;
-    }
-    if (column.sort && !column.filter) {
-      var nextType = getNextSortType(columns.getColumnRefAttribute(column, COLUMN_ATTRIBUTE.COL_SORT_TYPE));
-      var args = {
-        isCancel: false,
-        type: nextType
-      };
-      handleSortClick(args);
-    }
+  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 headStyle = Object.assign(columns.getFixedStlye(column), {
-    '--background-color': DEF_COLOR[(_props$thead$color = (_props$thead = props.thead) === null || _props$thead === void 0 ? void 0 : _props$thead.color) !== null && _props$thead$color !== void 0 ? _props$thead$color : IHeadColor.DEF1]
-  });
-  var classList = [columns.getHeadColumnClass(column, index), columns.getColumnCustomClass(column), column.align || props.headerAlign || props.align];
-  var getTH = function getTH() {
-    return (0,external_vue_namespaceObject.createVNode)("th", (0,external_vue_namespaceObject.mergeProps)({
-      "style": headStyle,
-      "class": classList,
-      "colspan": 1,
-      "data-id": columns.getColumnId(column),
-      "rowspan": 1,
-      "onClick": function onClick() {
-        return handleColumnHeadClick();
+  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();
       }
-    }, columns.resolveEventListener(column)), [renderHeadCell()]);
+      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 {
-    getTH: getTH
+    renderCell: renderCell
   };
 });
 ;// CONCATENATED MODULE: ../../packages/table/src/hooks/use-shift-key.tsx
@@ -22993,8 +23095,8 @@ function use_render_isSlot(s) {
               "style": cellStyle,
               "class": cellClass,
               "colspan": colspan,
-              "data-id": columnKey,
               "rowspan": rowspan,
+              "data-id": columnKey,
               "onClick": function onClick(event) {
                 return handleEmit(event, EMIT_EVENTS.CELL_CLICK);
               },
@@ -23003,9 +23105,9 @@ function use_render_isSlot(s) {
               }
             }, [(0,external_vue_namespaceObject.createVNode)(table_cell, {
               "key": cellKey,
+              "data-id": cellKey,
               "class": tdCtxClass,
               "column": column,
-              "data-id": cellKey,
               "observerResize": props.observerResize,
               "parentSetting": props.showOverflowTooltip,
               "row": row
@@ -23389,90 +23491,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
 
 
@@ -23847,7 +23865,6 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
 
 
 
-
 /* harmony default export */ const table = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'Table',
   props: tableProps,
@@ -23858,6 +23875,7 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
     var pagination = use_pagination(props);
     var _useLayout = use_layout(props, ctx),
       renderContainer = _useLayout.renderContainer,
+      renderFixedBottom = _useLayout.renderFixedBottom,
       renderBody = _useLayout.renderBody,
       renderHeader = _useLayout.renderHeader,
       renderFooter = _useLayout.renderFooter,
@@ -23874,7 +23892,8 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
      */
     var afterSetting = function afterSetting(fields) {
       if ((fields === null || fields === void 0 ? void 0 : fields.length) > 0) {
-        refBody.value.scrollTo(0, 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);
@@ -23896,14 +23915,14 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
       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 _useFixedColumn = use_fixed_column(props, columns),
       renderFixedRows = _useFixedColumn.renderFixedRows,
       resolveFixedColumnStyle = _useFixedColumn.resolveFixedColumnStyle;
-    var _useScrollLoading = use_scroll_loading(props, ctx),
-      renderScrollLoading = _useScrollLoading.renderScrollLoading;
     /**
      * Column配置改变或者容器Resize之后，根据Columns配置
      * 计算每一列的实际宽度
@@ -23975,6 +23994,7 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
       });
     };
     use_observer_resize(refRoot, function () {
+      var _refBody$value2;
       if ((props.height === '100%' || props.virtualEnabled) && (0,lodash.isElement)(refRoot.value)) {
         if (isResizeBodyHeight.value) {
           setTimeout(function () {
@@ -23989,7 +24009,7 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
         setOffsetRight();
       }
       computedColumnRect();
-      refBody.value.scrollTo(0, 0);
+      (_refBody$value2 = refBody.value) === null || _refBody$value2 === void 0 || _refBody$value2.scrollTo(0, 0);
       setOffsetRight();
     });
     (0,external_vue_namespaceObject.watch)(function () {
@@ -24026,7 +24046,9 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
     (0,external_vue_namespaceObject.watch)(function () {
       return [pagination.options.count, pagination.options.limit, pagination.options.current, props.data];
     }, function () {
+      var _refBody$value3;
       setTableData();
+      (_refBody$value3 = refBody.value) === null || _refBody$value3 === void 0 || _refBody$value3.scrollTo(0, 0);
     }, {
       immediate: true
     });
@@ -24044,7 +24066,7 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
       }
     });
     return function () {
-      return renderContainer([renderHeader(renderColumns, settings.renderSettings, renderFixedRows), renderBody(rows.pageRowList, renderTBody, renderFixedRows, renderScrollLoading), renderFooter(renderTFoot())]);
+      return renderContainer([renderHeader(renderColumns, settings.renderSettings, renderFixedRows), renderBody(rows.pageRowList, renderTBody, renderFixedRows), renderFixedBottom(), renderFooter(renderTFoot())]);
     };
   }
 }));