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

package/lib/table/index.js

@@ -9,14 +9,14 @@ 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_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_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_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_input_d525237e__ from "../input";
@@ -20832,7 +20832,7 @@ 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)([]);
@@ -20852,22 +20852,47 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
   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 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);
+  };
+  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"));
+    setFixedColumnShawdow();
+  });
   var setTranslateX = function setTranslateX(val) {
     translateX.value = val;
+    setRootStyleVars();
   };
   var setTranslateY = function setTranslateY(val) {
     translateY.value = val;
+    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 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]
     };
   });
@@ -20892,13 +20917,7 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
   };
   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)")
+      transform: "translate3d(var(--drag-offset-x), var(--translate-y), 0)"
     });
   });
   var renderContainer = function renderContainer(childrend) {
@@ -20911,15 +20930,16 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
       "style": columnGhostStyle
     }, [(_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({
@@ -20938,6 +20958,13 @@ 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;
+      return "calc(".concat(tableStyle.value.maxHeight, " - ").concat(footHeight.value, "px - ").concat(headerHeight, "px)");
+    }
+    return null;
+  });
   var setBodyHeight = function setBodyHeight(height) {
     bodyHeight.value = height;
   };
@@ -20993,26 +21020,16 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     column_drag_line: true,
     'offset-x': 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 () {
-    return {
-      transform: "translate3d(".concat(translateX.value, "px, ").concat(translateY.value, "px, 0)")
-    };
-  });
   var fixedBottomLoadingStyle = (0,external_vue_namespaceObject.computed)(function () {
     return {
-      transform: "translate3d(".concat(translateX.value, "px, ").concat(translateY.value, "px, 0)"),
       minHeight: "".concat(lineHeight.value, "px")
     };
   });
   (0,external_vue_namespaceObject.onMounted)(function () {
     setOffsetRight();
+    initRootStyleVars();
   });
   var renderBody = function renderBody(list, childrend, fixedRows, loadingRow) {
     return (0,external_vue_namespaceObject.createVNode)(virtual_render_namespaceObject["default"], {
@@ -21027,6 +21044,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
     }, {
@@ -21042,8 +21060,7 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
           "style": resizeColumnStyle.value,
           "class": resizeColumnClass
         }, null), (0,external_vue_namespaceObject.createVNode)("div", {
-          "style": fixedWrapperStyle.value,
-          "class": fixedWrapperClass.value
+          "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", {
@@ -21076,6 +21093,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,
@@ -21210,7 +21228,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];
@@ -21241,18 +21260,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
@@ -21615,6 +21622,262 @@ 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 "../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
+
+
+/*
+ * 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: external "../button"
 var button_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var button_y = x => () => x
@@ -22352,7 +22615,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,
@@ -22403,21 +22666,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
 
 
@@ -22461,8 +22726,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);
 }
@@ -22476,6 +22739,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
@@ -22611,202 +22875,6 @@ function use_render_isSlot(s) {
   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);
-  };
-  /**
-   * 渲染表格Cell内容
-   * @param row 当前行
-   * @param column 当前列
-   * @param index 当前列
-   * @param rows 当前列
-   * @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));
-      }
-      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();
-  };
   var getRowSpanConfig = function getRowSpanConfig(row, rowIndex, preRow, col, store) {
     var _store$get$get, _store$get;
     if (!store.has(row)) {
@@ -22891,6 +22959,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,
@@ -22898,7 +22980,7 @@ function use_render_isSlot(s) {
                 column: column,
                 cell: {
                   getValue: function getValue() {
-                    return renderCell(row, column, rowIndex, rowList, isChild);
+                    return renderCell();
                   }
                 },
                 rowIndex: rowIndex,
@@ -22906,13 +22988,12 @@ 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,
+              "data-id": columnKey,
               "rowspan": rowspan,
               "onClick": function onClick(event) {
                 return handleEmit(event, EMIT_EVENTS.CELL_CLICK);
@@ -22924,10 +23005,11 @@ function use_render_isSlot(s) {
               "key": cellKey,
               "class": tdCtxClass,
               "column": column,
+              "data-id": cellKey,
               "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];
               }
@@ -22941,7 +23023,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
       }]);
@@ -22961,7 +23043,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")])])])];
         }
@@ -23002,6 +23084,9 @@ function use_render_isSlot(s) {
       }), null);
     }
   };
+  (0,external_vue_namespaceObject.onUnmounted)(function () {
+    multiShiftKey.removeMultiCheckedEvents();
+  });
   return {
     renderColumns: renderColumns,
     renderTBody: renderTBody,
@@ -23904,6 +23989,8 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
         setOffsetRight();
       }
       computedColumnRect();
+      refBody.value.scrollTo(0, 0);
+      setOffsetRight();
     });
     (0,external_vue_namespaceObject.watch)(function () {
       return [dragOffsetX.value];
@@ -23957,7 +24044,7 @@ var useSettings = function useSettings(props, ctx, columns, afterSetting) {
       }
     });
     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, renderScrollLoading), renderFooter(renderTFoot())]);
     };
   }
 }));