shineout 3.7.0-beta.2 → 3.7.0-beta.4

package/dist/shineout.js

@@ -12142,7 +12142,7 @@ var handleStyle = function handleStyle(style) {
 };
 /* harmony default export */ var jss_style_handleStyle = (handleStyle);
 ;// CONCATENATED MODULE: ../shineout-style/src/version.ts
-/* harmony default export */ var version = ('3.7.0-beta.2');
+/* harmony default export */ var version = ('3.7.0-beta.4');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -25527,19 +25527,9 @@ var switchStyle = objectSpread2_default()(objectSpread2_default()({
 var useSwitchStyle = styled(src_switch_switch, 'switch');
 
 /* harmony default export */ var shineout_style_src_switch = ((/* unused pure expression or super */ null && (useSwitchStyle)));
-;// CONCATENATED MODULE: ../shineout-style/src/mixin/custom-scrollbar.ts
-function customScrollBar(info) {
-  return {
-    'scrollbar-color': info.background,
-    '&::-webkit-scrollbar': {
-      background: info.background
-    }
-  };
-}
 ;// CONCATENATED MODULE: ../shineout-style/src/table/table.ts
 
 
-
 var cellBaseIndex = 4;
 var fixedIndex = 6;
 var resizeIndex = 8;
@@ -25578,6 +25568,7 @@ var tableStyle = objectSpread2_default()(objectSpread2_default()({
         borderBottom: "1px solid ".concat(src.tableCellBorderColor),
         boxSizing: 'border-box',
         lineHeight: src.lineHeightDynamic,
+        zIndex: fixedIndex - 1,
         '&$cellFixedLeft, &$cellFixedRight': {
           zIndex: fixedIndex
         },
@@ -25704,7 +25695,7 @@ var tableStyle = objectSpread2_default()(objectSpread2_default()({
   },
   headWrapper: {
     flex: '0 0 auto',
-    overflow: 'hidden',
+    // overflow: 'hidden',
     boxSizing: 'border-box',
     background: src.tableTheadBackgroundColor,
     '$sticky > &': {
@@ -25733,13 +25724,22 @@ var tableStyle = objectSpread2_default()(objectSpread2_default()({
           zIndex: fixedIndex + 1
         }
       }
+    },
+    '$wrapper & table > tfoot': {
+      position: 'sticky',
+      bottom: 0,
+      zIndex: fixedIndex
     }
   },
   footWrapper: {
     flex: '0 0 auto',
-    overflow: 'hidden',
     boxSizing: 'border-box',
-    background: src.tableTfootBackgroundColor
+    background: src.tableTfootBackgroundColor,
+    "[data-soui-role='scroll'] &": {
+      position: 'sticky',
+      bottom: 0,
+      zIndex: fixedIndex + 1
+    }
   },
   emptyWrapper: {
     minHeight: '170px',
@@ -25748,18 +25748,13 @@ var tableStyle = objectSpread2_default()(objectSpread2_default()({
     position: 'sticky',
     left: 0,
     top: 0,
-    right: 0,
     justifyContent: 'center',
     display: 'flex',
     alignItems: 'center',
     borderBottom: "1px solid ".concat(src.tableCellBorderColor)
   },
-  scrollY: {
-    '&$headWrapper, &$footWrapper': objectSpread2_default()({
-      overflowY: 'scroll'
-    }, customScrollBar({
-      background: 'transparent'
-    }))
+  emptyNoBorder: {
+    borderBottom: 'none'
   },
   cellFixedLeft: {
     position: 'sticky'
@@ -38724,7 +38719,6 @@ var useResize = function useResize(props) {
 
 
 
-
 var Scroll = function Scroll(props) {
   var containerRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var scrollRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
@@ -38756,13 +38750,13 @@ var Scroll = function Scroll(props) {
     width: '100%',
     overflow: 'auto'
   };
-  var containerStyle = defineProperty_default()(defineProperty_default()({
+  var containerStyle = {
     height: '100%',
     width: '100%',
     display: 'inline-flex',
-    overflow: 'hidden',
-    position: 'sticky'
-  }, isRtl ? 'right' : 'left', 0), "top", 0);
+    position: 'sticky',
+    top: 0
+  };
 
   // 当滚动容器的高度为 0 时，paddingTop 为 0，避免滚动条抖动现象
   var paddingTop = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function () {
@@ -49694,12 +49688,10 @@ var useForm = function useForm(props) {
       context.removeArr.delete(n);
       if (df !== undefined && deepGet(context.value, n) === undefined) {
         if (!context.mounted) context.defaultValues[n] = df;
-        setTimeout(function () {
-          onChange(function (v) {
-            deepSet(v, n, df, deepSetOptions);
-          });
-          update(n);
+        onChange(function (v) {
+          deepSet(v, n, df, deepSetOptions);
         });
+        update(n);
       }
     },
     unbind: function unbind(n, reserveAble, validateField, update) {
@@ -59964,6 +59956,12 @@ var Sticky = function Sticky(props) {
     }
     return cancelParentObserver;
   }, [props.parent, css, context.target, top, bottom]);
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    if (props.onChange) {
+      props.onChange(show);
+    }
+    ;
+  }, [show]);
 
   // 纯css方法 直接使用css
   // js方法
@@ -60134,6 +60132,147 @@ var BaseSwitch = function BaseSwitch(props) {
 var SwitchComp = src_switch_switch_0;
 SwitchComp.displayName = 'ShineoutSwitch';
 /* harmony default export */ var src_switch_0 = (SwitchComp);
+;// CONCATENATED MODULE: ../base/src/virtual-scroll/scroll-table.tsx
+
+
+
+
+
+
+var extractHeightValue = function extractHeightValue(num) {
+  if (isNumber(num)) return num;
+  var match = num.match(/(\d+)/);
+  if (match) {
+    return parseInt(match[0], 10);
+  }
+  return undefined;
+};
+var scroll_table_Scroll = function Scroll(props) {
+  var containerRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var scrollRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var wrapperRef = useForkRef(scrollRef, props.wrapperRef);
+  var _useRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({
+      timer: null,
+      isMouseDown: false
+    }),
+    context = _useRef.current;
+  // TODO: keepScrollTop考虑做成Table的新feat?
+  var _props$scrollHeight = props.scrollHeight,
+    scrollHeight = _props$scrollHeight === void 0 ? 0 : _props$scrollHeight,
+    _props$scrollWidth = props.scrollWidth,
+    scrollWidth = _props$scrollWidth === void 0 ? 0 : _props$scrollWidth,
+    _props$defaultHeight = props.defaultHeight,
+    defaultHeight = _props$defaultHeight === void 0 ? 0 : _props$defaultHeight,
+    _props$keepScrollTop = props.keepScrollTop,
+    keepScrollTop = _props$keepScrollTop === void 0 ? false : _props$keepScrollTop;
+  var _useResize = useResize({
+      targetRef: containerRef,
+      timer: 100
+    }),
+    width = _useResize.width,
+    h = _useResize.height;
+  var height = h || defaultHeight;
+  var config = useConfig();
+  var isRtl = config.direction === 'rtl';
+  var scrollerStyle = {
+    flex: 1,
+    minWidth: 0,
+    minHeight: 0,
+    overflow: props.isEmptyContent ? 'hidden' : 'auto',
+    width: '100%'
+  };
+  var containerStyle = {
+    height: '100%',
+    width: '100%',
+    display: 'flex',
+    position: 'sticky',
+    flexDirection: 'column',
+    top: 0,
+    overflow: props.isEmptyContent ? 'auto' : undefined
+  };
+
+  // 当滚动容器的高度为 0 时，paddingTop 为 0，避免滚动条抖动现象
+  var paddingTop = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function () {
+    if (keepScrollTop) return Math.max(0, Math.floor(scrollHeight - height));
+    return height === 0 ? 0 : Math.max(0, Math.floor(scrollHeight - height));
+  }, [scrollHeight, height]);
+  var placeStyle = {
+    paddingTop: paddingTop,
+    width: scrollWidth,
+    overflow: props.isScrollY ? 'hidden' : 'auto hidden',
+    height: props.isScrollY ? 0 : 1,
+    marginTop: props.isScrollY ? 0 : -1,
+    lineHeight: 0
+  };
+  var handleScroll = usePersistFn(function (e) {
+    var onScrollToBottom = props.onScrollToBottom;
+    var target = e.currentTarget;
+    var scrollLeft = target.scrollLeft,
+      scrollTop = target.scrollTop;
+    if (props.height && onScrollToBottom) {
+      var realHeight = extractHeightValue(props.height);
+      if (realHeight !== undefined) {
+        var touchBottom = target.scrollHeight === scrollTop + realHeight;
+        if (touchBottom) onScrollToBottom();
+      }
+    }
+    var maxY = target.scrollHeight - target.clientHeight;
+    var maxX = target.scrollWidth - target.clientWidth;
+    if (!isRtl) {
+      // 解决浏览器缩放以后导致滚动条长度出现小数
+      if (maxX - scrollLeft < 0 || maxX - scrollLeft < 1) scrollLeft = maxX;
+      if (scrollLeft < 0) scrollLeft = 0;
+    } else {
+      if (maxX + scrollLeft < 0 || maxX + scrollLeft < 1) scrollLeft = 0 - maxX;
+      if (scrollLeft > 0) scrollLeft = 0;
+    }
+    if (scrollTop > maxY || maxY - scrollTop < 1) scrollTop = maxY;
+    if (scrollTop < 0) scrollTop = 0;
+    var x = maxX === 0 ? 0 : Math.min(Math.abs(scrollLeft) / maxX, 1);
+    var y = maxY === 0 ? 0 : Math.min(scrollTop / maxY, 1);
+    if (props.onScroll) props.onScroll({
+      scrollLeft: scrollLeft,
+      scrollTop: scrollTop,
+      x: x,
+      y: y,
+      height: height,
+      width: width,
+      fromDrag: context.isMouseDown
+    });
+  });
+  var handleInnerScroll = usePersistFn(function (e) {
+    var scrollTop = e.currentTarget.scrollTop;
+    if (scrollRef.current) {
+      e.currentTarget.scrollTop = 0;
+      scrollRef.current.scrollTop += scrollTop;
+    }
+  });
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()({}, getDataAttribute({
+    role: 'scroll'
+  })), {}, {
+    style: scrollerStyle,
+    onScroll: handleScroll,
+    ref: wrapperRef,
+    onMouseDown: function onMouseDown() {
+      context.isMouseDown = true;
+    },
+    onMouseUp: function onMouseUp() {
+      context.isMouseDown = false;
+    },
+    children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", objectSpread2_default()(objectSpread2_default()({}, getDataAttribute({
+      role: 'scroll-container'
+    })), {}, {
+      style: containerStyle,
+      ref: containerRef,
+      onScroll: handleInnerScroll,
+      children: props.children
+    })), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+      style: placeStyle,
+      children: "\xA0"
+    })]
+  }));
+};
+/* harmony default export */ var scroll_table = (scroll_table_Scroll);
 ;// CONCATENATED MODULE: ../hooks/src/common/use-scrollbar-width/index.ts
 
 
@@ -60264,6 +60403,34 @@ var useColumns = function useColumns(props) {
 
 
 
+function getDecimalAndIntegerPart(num) {
+  if (!num) return [0, 0];
+  var str = num.toString();
+  var dotIndex = str.indexOf('.');
+  if (dotIndex === -1) return [parseInt(str), 0];
+  var integerPart = parseInt(str.slice(0, dotIndex));
+  var decimalPart = parseFloat("0.".concat(str.slice(dotIndex + 1)));
+  return [integerPart, decimalPart];
+}
+
+// 将所有的小数部分转移到最后一列
+function shiftDecimalToLastColumn(cols) {
+  var decimalSum = 0;
+  cols.forEach(function (v, i) {
+    var _getDecimalAndInteger = getDecimalAndIntegerPart(v),
+      _getDecimalAndInteger2 = slicedToArray_default()(_getDecimalAndInteger, 2),
+      inter = _getDecimalAndInteger2[0],
+      decimal = _getDecimalAndInteger2[1];
+    if (decimal > 0) {
+      decimalSum += decimal;
+      cols[i] = inter;
+    }
+  });
+  if (decimalSum > 0) {
+    cols[cols.length - 1] = Number(cols[cols.length - 1]) + decimalSum;
+  }
+  return cols;
+}
 var MIN_RESIZABLE_WIDTH = 20;
 function compareColumnWidth(curCols, preCols) {
   if (curCols.length !== preCols.length) return false;
@@ -60385,7 +60552,7 @@ var useTableLayout = function useTableLayout(props) {
     if (cols && cols.every(function (v) {
       return v === 0;
     })) return;
-    setColgroup(cols);
+    setColgroup(shiftDecimalToLastColumn(cols));
     setAdjust(adjust);
     if (!adjust) {
       updateResizeFlag();
@@ -60602,7 +60769,7 @@ var useTableLayout = function useTableLayout(props) {
     width: tableWidth,
     shouldLastColAuto: props.columnResizable && !adjust,
     scrollWidth: scrollWidth,
-    maxScrollLeft: scrollWidth - context.clientWidth,
+    // maxScrollLeft: scrollWidth - context.clientWidth,
     resizeFlag: resizeFlag
   };
 };
@@ -60871,26 +61038,21 @@ function getMaxRowSpanLength(input) {
 var useTableVirtual = function useTableVirtual(props) {
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(0),
     _useState2 = slicedToArray_default()(_useState, 2),
-    innerLeft = _useState2[0],
-    setLeft = _useState2[1];
-  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(0),
+    innerTop = _useState2[0],
+    setTop = _useState2[1];
+  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(props.data.length * props.rowHeight),
     _useState4 = slicedToArray_default()(_useState3, 2),
-    innerTop = _useState4[0],
-    setTop = _useState4[1];
-  var _useState5 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(props.data.length * props.rowHeight),
+    scrollHeight = _useState4[0],
+    setHeight = _useState4[1];
+  var _useState5 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(0),
     _useState6 = slicedToArray_default()(_useState5, 2),
-    scrollHeight = _useState6[0],
-    setHeight = _useState6[1];
+    startIndex = _useState6[0],
+    setStartIndex = _useState6[1];
   var _useState7 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(0),
     _useState8 = slicedToArray_default()(_useState7, 2),
-    startIndex = _useState8[0],
-    setStartIndex = _useState8[1];
-  var _useState9 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(0),
-    _useState10 = slicedToArray_default()(_useState9, 2),
-    offsetY = _useState10[0],
-    setOffsetY = _useState10[1];
+    offsetY = _useState8[0],
+    setOffsetY = _useState8[1];
   var rowsInView = props.rowsInView === 0 ? props.data.length : props.rowsInView;
-  var sleft = props.scrollLeft !== undefined ? props.scrollLeft : innerLeft;
   var rowSpanInfo = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function () {
     var rowSpanColumns = props.columns.filter(function (col) {
       return typeof col.rowSpan === 'function';
@@ -60963,18 +61125,11 @@ var useTableVirtual = function useTableVirtual(props) {
     }),
     context = _useRef.current;
   var getTranslate = usePersistFn(function (left, top) {
-    var l = left === undefined ? sleft : left;
     var t = top === undefined ? innerTop + offsetY : top;
     if (t < 0) {
       t = 0;
     }
-    if (!props.isRtl && l < 0) {
-      l = 0;
-    }
-    if (props.isRtl && l > 0) {
-      l = 0;
-    }
-    return "translate3d(".concat(0 - l, "px, ").concat(0 - t, "px, 0)");
+    return "translate3d(0, ".concat(0 - t, "px, 0)");
   });
   var getContentHeight = function getContentHeight(index) {
     if (props.disabled) return 0;
@@ -60982,7 +61137,7 @@ var useTableVirtual = function useTableVirtual(props) {
     for (var i = 0; i <= index; i++) {
       sum += context.cachedHeight[i] || props.rowHeight;
     }
-    return sum;
+    return sum + props.theadAndTfootHeight;
   };
   var setRowHeight = usePersistFn(function (index, height) {
     if (props.disabled) return;
@@ -61076,12 +61231,10 @@ var useTableVirtual = function useTableVirtual(props) {
     setHeight(sumHeight);
   });
   var handleScroll = function handleScroll(info) {
-    var scrollLeft = info.scrollLeft,
-      height = info.height,
+    var height = info.height,
       y = info.y,
       fromDrag = info.fromDrag;
     var scrollTop = info.scrollTop;
-    setLeft(scrollLeft);
     if (props.disabled) {
       setTop(scrollTop);
       return;
@@ -61138,7 +61291,6 @@ var useTableVirtual = function useTableVirtual(props) {
     var max = scrollEl.scrollWidth - scrollEl.clientWidth;
     var left = Math.min(targetLeft, max);
     if (left === scrollEl.scrollLeft) return;
-    setLeft(left);
     scrollEl.scrollLeft = left;
   });
   var scrollColumnIntoView = usePersistFn(function (colKey) {
@@ -61157,6 +61309,11 @@ var useTableVirtual = function useTableVirtual(props) {
     }
     scrollColumnByLeft(left);
   });
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    if (props.scrollLeft) {
+      scrollColumnByLeft(props.scrollLeft);
+    }
+  }, [props.scrollLeft]);
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     var scrollRefHeight = props.scrollRef.current ? props.scrollRef.current.clientHeight : 0;
     var tableRefHeight = props.innerRef.current ? props.innerRef.current.clientHeight : 0;
@@ -61200,7 +61357,7 @@ var useTableVirtual = function useTableVirtual(props) {
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     if (props.disabled) return;
     setHeight(getContentHeight(props.data.length - 1));
-  }, [props.data.length]);
+  }, [props.data.length, props.theadAndTfootHeight]);
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     if (props.disabled) return;
     if (context.heightCallback) {
@@ -61216,7 +61373,6 @@ var useTableVirtual = function useTableVirtual(props) {
   return {
     scrollHeight: scrollHeight,
     startIndex: startIndex,
-    innerLeft: sleft,
     innerTop: innerTop + offsetY,
     data: renderData,
     handleScroll: handleScroll,
@@ -61975,44 +62131,32 @@ var thead_toNum = toNum;
     });
   };
   var getFixedStyle = function getFixedStyle(fixed, index, colSpan, level) {
+    // 累加level 至 0 的所有高度
+    var top = context.trHeights.slice(0, level).reduce(function (a, b) {
+      return thead_toNum(a) + thead_toNum(b);
+    }, 0);
     if (fixed === 'left') {
-      if (props.virtual) {
-        // 这是virtual table场景下的th样式
-        return {
-          transform: "translate3d(var(--virtual-fixed-left, 0), 0, 0)"
-        };
-      }
       var left = colgroup.slice(0, index).reduce(function (a, b) {
         return thead_toNum(a) + thead_toNum(b);
       }, 0);
-      // 这是base table场景下的th样式
       return {
         left: left,
-        top: context.trHeights[level - 1] || 0,
+        top: top,
         position: 'sticky'
       };
     }
     if (fixed === 'right') {
-      if (props.virtual) {
-        // 这是virtual table场景下的th样式
-        return {
-          transform: "translate3d(var(--virtual-fixed-right, 0), 0, 0)"
-        };
-      }
       var right = colgroup.slice(index + colSpan).reduce(function (a, b) {
         return thead_toNum(a) + thead_toNum(b);
       }, 0);
-      // 这是base table场景下的th样式
       return {
         right: right,
-        top: context.trHeights[level - 1] || 0,
+        top: top,
         position: 'sticky'
       };
     }
-
-    // 这是base table场景下的非fixed th样式
     return {
-      top: context.trHeights[level - 1] || 0,
+      top: top,
       position: 'sticky'
     };
   };
@@ -62229,16 +62373,6 @@ var useTableRow = function useTableRow(props) {
     }
     setHoverIndex(hoverIndex);
   });
-  var isCellHover = usePersistFn(function (rowIndex) {
-    var colSpan = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-    if (!props.hover) return false;
-    var isHover = false;
-    for (var i = 0; i < colSpan; i++) {
-      isHover = hoverIndex.has(rowIndex + i);
-      if (isHover) break;
-    }
-    return isHover;
-  });
   var rowData = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function () {
     var rows = [];
     context.rowSelectMergeStartData = [];
@@ -62272,7 +62406,6 @@ var useTableRow = function useTableRow(props) {
   return {
     rowData: rowData,
     handleCellHover: handleCellHover,
-    isCellHover: isCellHover,
     hoverIndex: hoverIndex,
     rowSelectMergeStartData: context.rowSelectMergeStartData
   };
@@ -62369,11 +62502,6 @@ var Tr = function Tr(props) {
   var getFixedStyle = function getFixedStyle(fixed, index, colSpan) {
     if (!props.isScrollX) return;
     if (fixed === 'left') {
-      if (props.virtual) {
-        return {
-          transform: "translate3d(var(--virtual-fixed-left, 0), 0, 0)"
-        };
-      }
       var left = props.colgroup.slice(0, index).reduce(function (a, b) {
         return tr_toNum(a) + tr_toNum(b);
       }, 0);
@@ -62383,11 +62511,6 @@ var Tr = function Tr(props) {
       };
     }
     if (fixed === 'right') {
-      if (props.virtual) {
-        return {
-          transform: "translate3d(var(--virtual-fixed-right, 0), 0, 0)"
-        };
-      }
       var right = props.colgroup.slice(index + colSpan).reduce(function (a, b) {
         return tr_toNum(a) + tr_toNum(b);
       }, 0);
@@ -62602,18 +62725,28 @@ var Tr = function Tr(props) {
       if (data[i]) {
         var last = cols[i + (data[i].colSpan || 1) - 1] || {};
         var isRowSpanTd = data[i].rowSpan > 1;
+        var shouldBindMouseEvent = props.hover && hasSiblingRowSpan || isRowSpanTd;
+        var showCellHover = props.hoverIndex.has(props.rowIndex);
+        if (!showCellHover && data[i].rowSpan > 1) {
+          for (var j = 0; j < data[i].rowSpan; j++) {
+            if (props.hoverIndex.has(props.rowIndex + j)) {
+              showCellHover = true;
+              break;
+            }
+          }
+        }
         var td = /*#__PURE__*/(0,jsx_runtime.jsx)(Td, {
           col: col,
           data: data[i].data,
           colSpan: data[i].colSpan,
           rowSpan: data[i].rowSpan,
-          onMouseEnter: props.hover && hasSiblingRowSpan || isRowSpanTd ? function () {
-            props.handleCellHover(props.rowIndex, data[i].rowSpan);
+          onMouseEnter: shouldBindMouseEvent ? function () {
+            return props.handleCellHover(props.rowIndex, data[i].rowSpan);
           } : undefined,
-          onMouseLeave: props.hover && hasSiblingRowSpan || isRowSpanTd ? function () {
-            props.handleCellHover(-1, 0);
+          onMouseLeave: shouldBindMouseEvent ? function () {
+            return props.handleCellHover(-1, 0);
           } : undefined,
-          className: classnames_default()(col.className, col.type === 'checkbox' && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.cellCheckbox), col.fixed === 'left' && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.cellFixedLeft), col.fixed === 'right' && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.cellFixedRight), col.align === 'center' && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.cellAlignCenter), col.align === 'right' && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.cellAlignRight), (col.lastFixed || col.firstFixed || last.lastFixed) && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.cellFixedLast), lastRowIndex === i && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.cellIgnoreBorder), props.hoverIndex.has(props.rowIndex) && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.cellHover), isRowSpanTd && props.isCellHover(props.rowIndex, data[i].rowSpan) && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.cellHover)),
+          className: classnames_default()(col.className, col.type === 'checkbox' && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.cellCheckbox), col.fixed === 'left' && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.cellFixedLeft), col.fixed === 'right' && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.cellFixedRight), col.align === 'center' && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.cellAlignCenter), col.align === 'right' && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.cellAlignRight), (col.lastFixed || col.firstFixed || last.lastFixed) && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.cellFixedLast), lastRowIndex === i && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.cellIgnoreBorder), showCellHover && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.cellHover)),
           style: getTdStyle(col, data[i].colSpan),
           direction: config.direction,
           "data-role": col.type === 'checkbox' ? 'checkbox' : undefined,
@@ -62740,7 +62873,6 @@ var Tr = function Tr(props) {
       hover: hover
     }),
     rowData = _useTableRow.rowData,
-    isCellHover = _useTableRow.isCellHover,
     handleCellHover = _useTableRow.handleCellHover,
     hoverIndex = _useTableRow.hoverIndex,
     rowSelectMergeStartData = _useTableRow.rowSelectMergeStartData;
@@ -62775,10 +62907,8 @@ var Tr = function Tr(props) {
       isEmptyTree: props.isEmptyTree,
       treeColumnsName: props.treeColumnsName,
       setRowHeight: props.setRowHeight,
-      virtual: props.virtual,
       striped: props.striped,
       radio: props.radio,
-      isCellHover: isCellHover,
       hover: hover,
       isSelect: props.datum.check(rowSelectMergeStartData[index]),
       handleCellHover: handleCellHover
@@ -62816,11 +62946,6 @@ var tfoot_isArray = isArray,
   var getFixedStyle = function getFixedStyle(fixed, index, colSpan) {
     var colgroup = props.colgroup;
     if (fixed === 'left') {
-      if (props.virtual) {
-        return {
-          transform: "translate3d(var(--virtual-fixed-left, 0), 0, 0)"
-        };
-      }
       var left = colgroup.slice(0, index).reduce(function (a, b) {
         return tfoot_toNum(a) + tfoot_toNum(b);
       }, 0);
@@ -62830,11 +62955,6 @@ var tfoot_isArray = isArray,
       };
     }
     if (fixed === 'right') {
-      if (props.virtual) {
-        return {
-          transform: "translate3d(var(--virtual-fixed-right, 0), 0, 0)"
-        };
-      }
       var right = colgroup.slice(index + colSpan).reduce(function (a, b) {
         return tfoot_toNum(a) + tfoot_toNum(b);
       }, 0);
@@ -62945,19 +63065,6 @@ var table_excluded = ["data"];
 
 var table_devUseWarning = devUseWarning;
 var table_emptyArr = [];
-var virtualScrollerStyle = {
-  flex: 1,
-  minWidth: 0,
-  minHeight: 0,
-  overflow: 'auto',
-  width: '100%'
-};
-var scrollWrapperStyle = {
-  flex: 1,
-  minHeight: 0,
-  minWidth: 0,
-  display: 'flex'
-};
 var emptyRef = {
   current: null
 };
@@ -62979,15 +63086,6 @@ var emptyRef = {
   var mirrorScrollRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var tableRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var browserScrollbarWidth = useScrollbarWidth();
-  var emptyStyle = objectSpread2_default()(objectSpread2_default()({}, virtualScrollerStyle), {}, {
-    overflow: 'auto hidden',
-    position: 'absolute',
-    zIndex: 1,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    height: browserScrollbarWidth
-  });
   if (props.fixed) {
     table_devUseWarning.deprecated('fixed', 'virtual', 'Table');
   }
@@ -63008,7 +63106,8 @@ var emptyRef = {
     };
   };
   var _useRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({
-      emptyHeight: 0
+      emptyHeight: 0,
+      theadAndTfootHeight: 0
     }),
     context = _useRef.current;
   var virtual = ((_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.length) && props.rowsInView !== 0 && (!!props.virtual || props.fixed === 'both' || props.fixed === 'y' || props.fixed === 'auto');
@@ -63057,7 +63156,6 @@ var emptyRef = {
     floatRight = _useTableLayout.floatRight,
     width = _useTableLayout.width,
     shouldLastColAuto = _useTableLayout.shouldLastColAuto,
-    maxScrollLeft = _useTableLayout.maxScrollLeft,
     scrollBarWidth = _useTableLayout.scrollBarWidth,
     scrollWidth = _useTableLayout.scrollWidth,
     resizeFlag = _useTableLayout.resizeFlag;
@@ -63141,6 +63239,10 @@ var emptyRef = {
     onChange: inputableData.onChange,
     disabled: props.disabled
   });
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    var _theadRef$current, _tfootRef$current;
+    context.theadAndTfootHeight = ((theadRef === null || theadRef === void 0 || (_theadRef$current = theadRef.current) === null || _theadRef$current === void 0 ? void 0 : _theadRef$current.clientHeight) || 0) + (((_tfootRef$current = tfootRef.current) === null || _tfootRef$current === void 0 ? void 0 : _tfootRef$current.clientHeight) || 0);
+  }, [theadRef.current, tfootRef.current]);
   var virtualInfo = use_table_virtual({
     disabled: !virtual,
     data: treeData,
@@ -63151,21 +63253,11 @@ var emptyRef = {
     scrollRef: scrollRef,
     innerRef: tbodyRef,
     scrollLeft: props.scrollLeft,
-    isRtl: isRtl
+    isRtl: isRtl,
+    theadAndTfootHeight: context.theadAndTfootHeight
   });
 
-  // handle head and  foot scroll
-  var handleHeaderWheel = usePersistFn(function (e) {
-    var scrollEl = scrollRef.current;
-    if (!scrollEl) return;
-    var max = scrollEl.scrollWidth - scrollEl.clientWidth;
-    var scrollLeft = scrollEl.scrollLeft + e.deltaX;
-    if (scrollLeft === scrollEl.scrollLeft) {
-      return;
-    }
-    e.preventDefault();
-    scrollEl.scrollLeft = Math.min(Math.max(scrollLeft, 0), max);
-  });
+  // 简单表格的滚动事件
   var handleBodyScroll = usePersistFn(function (e) {
     var target = e.currentTarget;
     if (!target) return;
@@ -63181,6 +63273,8 @@ var emptyRef = {
       props.onScroll(x, y, target.scrollLeft, target.scrollTop);
     }
   });
+
+  // 虚拟表格的滚动事件
   var handleVirtualScroll = usePersistFn(function (info) {
     virtualInfo.handleScroll(info);
     layoutFunc.checkFloat();
@@ -63195,7 +63289,7 @@ var emptyRef = {
     var _props$data2;
     if (!((_props$data2 = props.data) !== null && _props$data2 !== void 0 && _props$data2.length) || filteredData !== undefined && filteredData.length === 0) {
       return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-        className: tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.emptyWrapper,
+        className: classnames_default()(tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.emptyWrapper, isScrollX && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.emptyNoBorder)),
         ref: function ref(el) {
           context.emptyHeight = (el === null || el === void 0 ? void 0 : el.clientHeight) || 0;
         },
@@ -63273,7 +63367,6 @@ var emptyRef = {
       jssStyle: props.jssStyle,
       colgroup: colgroup
     };
-    var fixRightNum = (isRtl ? -1 * maxScrollLeft : maxScrollLeft) - virtualInfo.innerLeft;
     var StickyWrapper = props.sticky ? src_sticky_sticky : (external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment;
     var sticky = typeof_default()(props.sticky) === 'object' ? props.sticky : {
       top: 0
@@ -63286,8 +63379,8 @@ var emptyRef = {
       parent: tableRef === null || tableRef === void 0 ? void 0 : tableRef.current
     };
     var isRenderVirtualTable = virtual || props.sticky || !((_props$data3 = props.data) !== null && _props$data3 !== void 0 && _props$data3.length);
-    var headWrapperClass = classnames_default()(tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.headWrapper, isScrollY && scrollBarWidth && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.scrollY));
-    var footWrapperClass = classnames_default()(tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.footWrapper, isScrollY && scrollBarWidth && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.scrollY));
+    var headWrapperClass = classnames_default()(tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.headWrapper);
+    var footWrapperClass = classnames_default()(tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.footWrapper);
     var renderHeadMirrorScroller = function renderHeadMirrorScroller() {
       var _scrollRef$current, _scrollRef$current2, _scrollRef$current3;
       if (!props.showTopScrollbar) return null;
@@ -63325,61 +63418,49 @@ var emptyRef = {
       }));
     };
     if (isRenderVirtualTable) {
-      var _props$data4;
-      var virtualCssVar = {
-        '--virtual-fixed-left': "".concat(virtualInfo.innerLeft, "px"),
-        '--virtual-fixed-right': fixRightNum > 0 ? "-".concat(fixRightNum, "px") : "".concat(fixRightNum, "px")
-      };
+      var _props$data4, _props$data5;
       return /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
-        children: [renderHeadMirrorScroller(), !props.hideHeader && /*#__PURE__*/(0,jsx_runtime.jsx)(StickyWrapper, objectSpread2_default()(objectSpread2_default()({}, props.sticky ? stickyProps : {}), {}, {
-          children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-            className: headWrapperClass,
-            children: /*#__PURE__*/(0,jsx_runtime.jsxs)("table", {
-              style: objectSpread2_default()({
-                width: width,
-                transform: "translate3d(-".concat(virtualInfo.innerLeft, "px, 0, 0)")
-              }, virtualCssVar),
-              ref: theadRef,
-              children: [Group, /*#__PURE__*/(0,jsx_runtime.jsx)(thead, objectSpread2_default()(objectSpread2_default()({}, headCommonProps), {}, {
-                virtual: true
-              }))]
-            })
-          })
-        })), /*#__PURE__*/(0,jsx_runtime.jsx)(virtual_scroll_scroll, {
-          style: scrollWrapperStyle,
-          scrollerStyle: (_props$data4 = props.data) !== null && _props$data4 !== void 0 && _props$data4.length ? virtualScrollerStyle : emptyStyle,
+        children: [renderHeadMirrorScroller(), /*#__PURE__*/(0,jsx_runtime.jsxs)(scroll_table, {
           wrapperRef: scrollRef,
           scrollWidth: width || 1,
           scrollHeight: virtual ? virtualInfo.scrollHeight : tbodyHeight,
           onScroll: handleVirtualScroll,
           defaultHeight: context.emptyHeight,
           isScrollY: isScrollY,
-          children: /*#__PURE__*/(0,jsx_runtime.jsxs)("table", {
-            style: objectSpread2_default()({
+          isEmptyContent: !((_props$data4 = props.data) !== null && _props$data4 !== void 0 && _props$data4.length),
+          children: [!props.hideHeader && /*#__PURE__*/(0,jsx_runtime.jsx)(StickyWrapper, objectSpread2_default()(objectSpread2_default()({}, props.sticky ? stickyProps : {}), {}, {
+            children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+              className: headWrapperClass,
+              children: /*#__PURE__*/(0,jsx_runtime.jsxs)("table", {
+                style: {
+                  width: width
+                },
+                ref: theadRef,
+                children: [Group, /*#__PURE__*/(0,jsx_runtime.jsx)(thead, objectSpread2_default()({}, headCommonProps))]
+              })
+            })
+          })), !!((_props$data5 = props.data) !== null && _props$data5 !== void 0 && _props$data5.length) && /*#__PURE__*/(0,jsx_runtime.jsxs)("table", {
+            style: {
               width: width,
               transform: virtualInfo.getTranslate()
-            }, virtualCssVar),
+            },
             ref: tbodyRef,
             children: [Group, /*#__PURE__*/(0,jsx_runtime.jsx)(tbody, objectSpread2_default()(objectSpread2_default()({}, bodyCommonProps), {}, {
               currentIndex: virtualInfo.startIndex,
               data: virtualInfo.data,
-              setRowHeight: virtualInfo.setRowHeight,
-              virtual: true
+              setRowHeight: virtualInfo.setRowHeight
             }))]
-          })
-        }), renderEmpty(), showFoot ? /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-          className: footWrapperClass,
-          children: /*#__PURE__*/(0,jsx_runtime.jsxs)("table", {
-            style: objectSpread2_default()({
-              width: width,
-              transform: "translate3d(-".concat(virtualInfo.innerLeft, "px, 0, 0)")
-            }, virtualCssVar),
-            ref: tfootRef,
-            children: [Group, /*#__PURE__*/(0,jsx_runtime.jsx)(tfoot, objectSpread2_default()(objectSpread2_default()({}, footCommonProps), {}, {
-              virtual: true
-            }))]
-          })
-        }) : null]
+          }), showFoot ? /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+            className: footWrapperClass,
+            children: /*#__PURE__*/(0,jsx_runtime.jsxs)("table", {
+              style: {
+                width: width
+              },
+              ref: tfootRef,
+              children: [Group, /*#__PURE__*/(0,jsx_runtime.jsx)(tfoot, objectSpread2_default()({}, footCommonProps))]
+            })
+          }) : null, renderEmpty()]
+        })]
       });
     }
     return /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
@@ -63416,27 +63497,6 @@ var emptyRef = {
       align: "right"
     }, pagination), paginationInfo));
   };
-  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
-    // 绑定 wheel 事件
-    if (theadRef.current && theadRef.current.parentElement) {
-      theadRef.current.parentElement.addEventListener('wheel', handleHeaderWheel, {
-        passive: false
-      });
-    }
-    if (tfootRef.current && tfootRef.current.parentElement) {
-      tfootRef.current.parentElement.addEventListener('wheel', handleHeaderWheel, {
-        passive: false
-      });
-    }
-    return function () {
-      if (theadRef.current && theadRef.current.parentElement) {
-        theadRef.current.parentElement.removeEventListener('wheel', handleHeaderWheel);
-      }
-      if (tfootRef.current && tfootRef.current.parentElement) {
-        tfootRef.current.parentElement.removeEventListener('wheel', handleHeaderWheel);
-      }
-    };
-  }, [theadRef.current, isScrollY]);
   var getRenderIndexByData = function getRenderIndexByData(data) {
     var originKey = typeof data === 'string' ? data : getKey(props.keygen, data);
     var index = treeData.findIndex(function (item) {
@@ -69812,7 +69872,7 @@ var upload_interface = __webpack_require__(8821);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.7.0-beta.2'
+  version: '3.7.0-beta.4'
 });
 }();
 /******/ 	return __webpack_exports__;