vxe-table 3.11.4 → 3.11.6-beta.0

package/lib/index.umd.js

@@ -2220,7 +2220,7 @@ function getClass(property, params) {
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
-const version = "3.11.4";
+const version = "3.11.6-beta.0";
 core_.VxeUI.version = version;
 core_.VxeUI.tableVersion = version;
 core_.VxeUI.setConfig({
@@ -2251,7 +2251,7 @@ core_.VxeUI.setConfig({
     //   keyField: '_X_ROW_KEY' // 行数据的唯一主键字段名
     // },
     resizeConfig: {
-      refreshDelay: 250
+      // refreshDelay: 250
     },
     radioConfig: {
       // trigger: 'default'
@@ -2774,7 +2774,7 @@ function isNodeElement(elem) {
 const {
   log: log_log
 } = core_.VxeUI;
-const log_version = `table v${"3.11.4"}`;
+const log_version = `table v${"3.11.6-beta.0"}`;
 const warnLog = log_log.create('warn', log_version);
 const errLog = log_log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/table/src/columnInfo.ts
@@ -4844,8 +4844,8 @@ const {
   interceptor: methods_interceptor,
   createEvent
 } = core_.VxeUI;
-const isWebkit = browse['-webkit'] && !browse.edge;
-const debounceScrollYDuration = browse.msie ? 80 : 20;
+// const isWebkit = browse['-webkit'] && !browse.edge
+// const debounceScrollYDuration = browse.msie ? 80 : 20
 const customStorageKey = 'VXE_CUSTOM_STORE';
 // 获取所有的列，排除分组
 const getColumnList = columns => {
@@ -4952,28 +4952,30 @@ function handleVirtualXVisible(_vm) {
   };
 }
 const computeRowHeight = $xeTable => {
+  const props = $xeTable;
   const {
-    $refs,
-    computeSize
-  } = $xeTable;
-  const tableHeader = $refs.tableHeader;
-  const tableBody = $refs.tableBody;
+    showOverflow
+  } = props;
+  const tableHeader = $xeTable.$refs.tableHeader;
+  const tableBody = $xeTable.$refs.tableBody;
   const tableBodyElem = tableBody ? tableBody.$el : null;
-  const vSize = computeSize;
+  const vSize = $xeTable.computeSize;
   const rowHeightMaps = $xeTable.rowHeightMaps;
   let rowHeight = 0;
-  if (tableBodyElem) {
-    const tableHeaderElem = tableHeader ? tableHeader.$el : null;
-    let firstTrElem;
-    firstTrElem = tableBodyElem.querySelector('tr');
-    if (!firstTrElem && tableHeaderElem) {
-      firstTrElem = tableHeaderElem.querySelector('tr');
-    }
-    if (firstTrElem) {
-      rowHeight = firstTrElem.clientHeight;
-    }
-    if (!rowHeight) {
-      rowHeight = rowHeightMaps[vSize || 'default'];
+  if (showOverflow) {
+    if (tableBodyElem) {
+      const tableHeaderElem = tableHeader ? tableHeader.$el : null;
+      let firstTrElem;
+      firstTrElem = tableBodyElem.querySelector('tr');
+      if (!firstTrElem && tableHeaderElem) {
+        firstTrElem = tableHeaderElem.querySelector('tr');
+      }
+      if (firstTrElem) {
+        rowHeight = firstTrElem.clientHeight;
+      }
+      if (!rowHeight) {
+        rowHeight = rowHeightMaps[vSize || 'default'];
+      }
     }
   }
   return rowHeight;
@@ -5163,24 +5165,50 @@ function calcTableHeight(_vm, key) {
   return num;
 }
 const calcCellHeight = $xeTable => {
+  const props = $xeTable;
+  const reactData = $xeTable;
+  const internalData = $xeTable;
+  const {
+    showOverflow
+  } = props;
   const {
     tableData,
-    scrollYLoad,
+    scrollXLoad,
+    scrollYLoad
+  } = reactData;
+  const {
     fullAllDataRowIdData
-  } = $xeTable;
+  } = internalData;
   const el = $xeTable.$el;
-  if (scrollYLoad && el) {
+  if (!showOverflow && (scrollXLoad || scrollYLoad) && el) {
+    let paddingTop = 0;
+    let paddingBottom = 0;
+    let calcPadding = false;
     tableData.forEach(row => {
       const rowid = getRowid($xeTable, row);
-      const rest = fullAllDataRowIdData[rowid];
+      const rowRest = fullAllDataRowIdData[rowid];
       const trList = el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]`);
-      if (rest && trList.length) {
+      if (rowRest && trList.length) {
         let height = 0;
         for (let i = 0; i < trList.length; i++) {
           const trEl = trList[i];
-          height = Math.max(height, trEl.offsetHeight);
+          const tdList = trEl.children;
+          for (let j = 0; j < tdList.length; j++) {
+            const tdEl = tdList[j];
+            const cellElem = tdEl.querySelector('.vxe-cell');
+            if (!calcPadding) {
+              paddingTop = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(getComputedStyle(tdEl).paddingTop);
+              paddingBottom = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(getComputedStyle(tdEl).paddingBottom);
+              calcPadding = true;
+            }
+            let cellHeight = paddingTop + paddingBottom;
+            if (cellElem) {
+              cellHeight += cellElem.offsetHeight;
+            }
+            height = Math.max(height, cellHeight);
+          }
         }
-        rest.height = height;
+        rowRest.height = height;
       }
     });
   }
@@ -5360,6 +5388,53 @@ const handleScrollToRowColumn = ($xeTable, fieldOrColumn, row) => {
   }
   return $xeTable.$nextTick();
 };
+function handleRecalculateLayout($xeTable, reFull) {
+  const el = $xeTable.$refs.refElem;
+  if (!el || !el.clientWidth) {
+    return $xeTable.$nextTick();
+  }
+  calcCellHeight($xeTable);
+  $xeTable.calcCellWidth();
+  $xeTable.autoCellWidth();
+  if (reFull === true) {
+    // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
+    return $xeTable.computeScrollLoad().then(() => {
+      calcCellHeight($xeTable);
+      $xeTable.calcCellWidth();
+      $xeTable.autoCellWidth();
+      return $xeTable.computeScrollLoad();
+    });
+  }
+  return $xeTable.computeScrollLoad();
+}
+function checkLastSyncScroll($xeTable, isRollX, isRollY) {
+  const reactData = $xeTable;
+  const internalData = $xeTable;
+  const {
+    scrollXLoad,
+    scrollYLoad
+  } = reactData;
+  const {
+    lcsTimeout
+  } = internalData;
+  if (lcsTimeout) {
+    clearTimeout(lcsTimeout);
+  }
+  internalData.lcsTimeout = setTimeout(() => {
+    internalData.lcsTimeout = undefined;
+    internalData.inVirtualScroll = false;
+    internalData.inBodyScroll = false;
+    internalData.bodyScrollType = '';
+    internalData.inFooterScroll = false;
+    if (isRollX && scrollXLoad) {
+      $xeTable.updateScrollXData();
+    }
+    if (isRollY && scrollYLoad) {
+      $xeTable.updateScrollYData();
+    }
+    $xeTable.updateCellAreas();
+  }, 200);
+}
 const Methods = {
   callSlot(slotFunc, params, h, vNodes) {
     if (slotFunc) {
@@ -7709,22 +7784,22 @@ const Methods = {
    * 支持 width=? width=?px width=?% min-width=? min-width=?px min-width=?%
    */
   recalculate(reFull) {
-    const el = this.$el;
-    if (!el || !el.clientWidth) {
-      return this.$nextTick();
-    }
-    calcCellHeight(this);
-    this.calcCellWidth();
-    this.autoCellWidth();
-    if (reFull === true) {
-      // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
-      return this.computeScrollLoad().then(() => {
-        calcCellHeight(this);
-        this.autoCellWidth();
-        return this.computeScrollLoad();
-      });
+    const $xeTable = this;
+    const internalData = $xeTable;
+    const {
+      rceTimeout
+    } = internalData;
+    if (rceTimeout) {
+      clearTimeout(rceTimeout);
+    } else {
+      handleRecalculateLayout($xeTable, !!reFull);
     }
-    return this.computeScrollLoad();
+    return new Promise(resolve => {
+      internalData.rceTimeout = setTimeout(() => {
+        internalData.rceTimeout = undefined;
+        resolve(handleRecalculateLayout($xeTable, !!reFull));
+      }, 20);
+    });
   },
   calcCellWidth() {
     const $xeTable = this;
@@ -7937,17 +8012,25 @@ const Methods = {
   },
   calcCellHeight() {
     const $xeTable = this;
+    const props = $xeTable;
     const reactData = $xeTable;
     const internalData = $xeTable;
+    const {
+      showOverflow
+    } = props;
     const {
       tableData,
+      scrollXLoad,
       scrollYLoad
     } = reactData;
     const {
       fullAllDataRowIdData
     } = internalData;
     const el = $xeTable.$el;
-    if (scrollYLoad && el) {
+    if (!showOverflow && (scrollXLoad || scrollYLoad) && el) {
+      let paddingTop = 0;
+      let paddingBottom = 0;
+      let calcPadding = false;
       tableData.forEach(row => {
         const rowid = getRowid($xeTable, row);
         const rowRest = fullAllDataRowIdData[rowid];
@@ -7956,7 +8039,21 @@ const Methods = {
           let height = 0;
           for (let i = 0; i < trList.length; i++) {
             const trEl = trList[i];
-            height = Math.max(height, trEl.offsetHeight);
+            const tdList = trEl.children;
+            for (let j = 0; j < tdList.length; j++) {
+              const tdEl = tdList[j];
+              const cellElem = tdEl.querySelector('.vxe-cell');
+              if (!calcPadding) {
+                paddingTop = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(getComputedStyle(tdEl).paddingTop);
+                paddingBottom = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(getComputedStyle(tdEl).paddingBottom);
+                calcPadding = true;
+              }
+              let cellHeight = paddingTop + paddingBottom;
+              if (cellElem) {
+                cellHeight += cellElem.offsetHeight;
+              }
+              height = Math.max(height, cellHeight);
+            }
           }
           rowRest.height = height;
         }
@@ -11860,18 +11957,17 @@ const Methods = {
       scrollLeft: bodyElem.scrollLeft
     };
   },
-  /**
-   * 横向 X 可视渲染事件处理
-   */
-  triggerScrollXEvent() {
-    this.loadScrollXData();
-  },
   loadScrollXData() {
+    const $xeTable = this;
+    const reactData = $xeTable;
+    const internalData = $xeTable;
     const {
       mergeList,
-      mergeFooterList,
+      mergeFooterList
+    } = reactData;
+    const {
       scrollXStore
-    } = this;
+    } = internalData;
     const {
       startIndex,
       endIndex,
@@ -11880,7 +11976,7 @@ const Methods = {
     const {
       toVisibleIndex,
       visibleSize
-    } = handleVirtualXVisible(this);
+    } = handleVirtualXVisible($xeTable);
     const offsetItem = {
       startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize),
       endIndex: toVisibleIndex + visibleSize + offsetSize
@@ -11894,10 +11990,10 @@ const Methods = {
       if (startIndex !== offsetStartIndex || endIndex !== offsetEndIndex) {
         scrollXStore.startIndex = offsetStartIndex;
         scrollXStore.endIndex = offsetEndIndex;
-        this.updateScrollXData();
+        $xeTable.updateScrollXData();
       }
     }
-    this.closeTooltip();
+    $xeTable.closeTooltip();
   },
   handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, params) {
     const $xeTable = this;
@@ -11948,7 +12044,6 @@ const Methods = {
       }
       $xeTable.checkScrolling();
       internalData.lastScrollLeft = scrollLeft;
-      reactData.lastScrollTime = Date.now();
     } else {
       const yThreshold = $xeTable.computeScrollYThreshold;
       isTop = scrollTop <= 0;
@@ -11967,8 +12062,8 @@ const Methods = {
         }
       }
       internalData.lastScrollTop = scrollTop;
-      reactData.lastScrollTime = Date.now();
     }
+    reactData.lastScrollTime = Date.now();
     const evntParams = {
       scrollTop,
       scrollLeft,
@@ -11985,6 +12080,7 @@ const Methods = {
       direction,
       ...params
     };
+    checkLastSyncScroll($xeTable, isRollX, isRollY);
     if (rowOpts.isHover || highlightHoverRow) {
       $xeTable.clearHoverRow();
     }
@@ -11999,46 +12095,99 @@ const Methods = {
     }
     $xeTable.dispatchEvent('scroll', evntParams, evnt);
   },
-  /**
-   * 纵向 Y 可视渲染事件处理
-   */
-  triggerScrollYEvent() {
+  lazyScrollXData() {
+    const $xeTable = this;
+    const internalData = $xeTable;
+    const {
+      lxTimeout,
+      lxRunTime,
+      scrollXStore
+    } = internalData;
+    const {
+      visibleSize
+    } = scrollXStore;
+    const fpsTime = Math.min(80, Math.floor(visibleSize * 3));
+    if (lxTimeout) {
+      clearTimeout(lxTimeout);
+    }
+    if (!lxRunTime || lxRunTime + fpsTime < Date.now()) {
+      internalData.lxRunTime = Date.now();
+      $xeTable.loadScrollXData();
+    }
+    internalData.lxTimeout = setTimeout(() => {
+      internalData.lxRunTime = undefined;
+      internalData.lxRunTime = undefined;
+      $xeTable.loadScrollXData();
+    }, fpsTime);
+  },
+  lazyScrollYData() {
+    const $xeTable = this;
+    const internalData = $xeTable;
     const {
+      lyTimeout,
+      lyRunTime,
       scrollYStore
-    } = this;
+    } = internalData;
     const {
-      adaptive,
-      offsetSize,
       visibleSize
     } = scrollYStore;
-    // webkit 浏览器使用最佳的渲染方式，且最高渲染量不能大于 40 条
-    if (isWebkit && adaptive && offsetSize * 2 + visibleSize <= 40) {
-      this.loadScrollYData();
+    const fpsTime = Math.min(80, Math.floor(visibleSize * 2));
+    if (lyTimeout) {
+      clearTimeout(lyTimeout);
+    }
+    if (!lyRunTime || lyRunTime + fpsTime < Date.now()) {
+      internalData.lyRunTime = Date.now();
+      $xeTable.loadScrollYData();
+    }
+    internalData.lyTimeout = setTimeout(() => {
+      internalData.lyTimeout = undefined;
+      internalData.lyRunTime = undefined;
+      $xeTable.loadScrollYData();
+    }, fpsTime);
+  },
+  /**
+   * 横向 X 可视渲染事件处理
+   */
+  triggerScrollXEvent() {
+    const $xeTable = this;
+    const sXOpts = $xeTable.computeSXOpts;
+    if (sXOpts.immediate) {
+      $xeTable.loadScrollXData();
+    } else {
+      $xeTable.lazyScrollXData();
+    }
+  },
+  /**
+   * 纵向 Y 可视渲染事件处理
+   */
+  triggerScrollYEvent() {
+    const $xeTable = this;
+    const sYOpts = $xeTable.computeSYOpts;
+    if (sYOpts.immediate) {
+      $xeTable.loadScrollYData();
     } else {
-      this.debounceScrollYData();
+      $xeTable.lazyScrollYData();
     }
-    this.debounceScrollYCalculate();
   },
-  debounceScrollYData: external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().debounce(function () {
-    this.loadScrollYData();
-  }, debounceScrollYDuration, {
-    leading: false,
-    trailing: true
-  }),
-  handleSyncScrollX(scrollLeft) {
+  scrollXEvent(evnt) {
     const $xeTable = this;
+    const internalData = $xeTable;
+    const {
+      inFooterScroll,
+      inBodyScroll
+    } = internalData;
+    if (inFooterScroll) {
+      return;
+    }
+    if (inBodyScroll) {
+      return;
+    }
     const tableHeader = $xeTable.$refs.tableHeader;
     const tableBody = $xeTable.$refs.tableBody;
     const tableFooter = $xeTable.$refs.tableFooter;
     const bodyElem = tableBody.$el;
     const headerElem = tableHeader ? tableHeader.$el : null;
     const footerElem = tableFooter ? tableFooter.$el : null;
-    setScrollLeft(bodyElem, scrollLeft);
-    setScrollLeft(headerElem, scrollLeft);
-    setScrollLeft(footerElem, scrollLeft);
-  },
-  scrollXEvent(evnt) {
-    const $xeTable = this;
     const wrapperEl = evnt.currentTarget;
     const {
       scrollTop,
@@ -12046,33 +12195,35 @@ const Methods = {
     } = wrapperEl;
     const isRollX = true;
     const isRollY = false;
-    $xeTable.handleSyncScrollX(scrollLeft);
+    internalData.inVirtualScroll = true;
+    setScrollLeft(bodyElem, scrollLeft);
+    setScrollLeft(headerElem, scrollLeft);
+    setScrollLeft(footerElem, scrollLeft);
     $xeTable.triggerScrollXEvent(evnt);
     $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
       type: 'table',
       fixed: ''
     });
   },
-  debounceScrollYCalculate: external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().debounce(function () {
-    this.updateScrollYSpace();
-  }, 1000, {
-    leading: false,
-    trailing: true
-  }),
-  handleSyncScrollY(scrollTop) {
+  scrollYEvent(evnt) {
     const $xeTable = this;
+    const internalData = $xeTable;
+    const {
+      inFooterScroll,
+      inBodyScroll
+    } = internalData;
+    if (inFooterScroll) {
+      return;
+    }
+    if (inBodyScroll) {
+      return;
+    }
     const tableBody = $xeTable.$refs.tableBody;
     const leftBody = $xeTable.$refs.leftBody;
     const rightBody = $xeTable.$refs.rightBody;
     const bodyElem = tableBody.$el;
     const leftElem = leftBody ? leftBody.$el : null;
     const rightElem = rightBody ? rightBody.$el : null;
-    setScrollTop(bodyElem, scrollTop);
-    setScrollTop(leftElem, scrollTop);
-    setScrollTop(rightElem, scrollTop);
-  },
-  scrollYEvent(evnt) {
-    const $xeTable = this;
     const wrapperEl = evnt.currentTarget;
     const {
       scrollTop,
@@ -12080,7 +12231,10 @@ const Methods = {
     } = wrapperEl;
     const isRollX = false;
     const isRollY = true;
-    $xeTable.handleSyncScrollY(scrollTop);
+    internalData.inVirtualScroll = true;
+    setScrollTop(bodyElem, scrollTop);
+    setScrollTop(leftElem, scrollTop);
+    setScrollTop(rightElem, scrollTop);
     $xeTable.triggerScrollYEvent(evnt);
     $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
       type: 'table',
@@ -12091,22 +12245,33 @@ const Methods = {
    * 纵向 Y 可视渲染处理
    */
   loadScrollYData() {
+    const $xeTable = this;
+    const props = $xeTable;
+    const reactData = $xeTable;
+    const internalData = $xeTable;
     const {
-      mergeList,
+      showOverflow
+    } = props;
+    const {
+      mergeList
+    } = reactData;
+    const {
+      tableHeight,
       scrollYStore
-    } = this;
+    } = internalData;
     const {
       startIndex,
       endIndex,
       offsetSize
     } = scrollYStore;
+    const offsetYSize = showOverflow ? offsetSize : offsetSize + Math.min(8, Math.ceil(tableHeight / 200));
     const {
       toVisibleIndex,
       visibleSize
-    } = handleVirtualYVisible(this);
+    } = handleVirtualYVisible($xeTable);
     const offsetItem = {
-      startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize),
-      endIndex: toVisibleIndex + visibleSize + offsetSize
+      startIndex: Math.max(0, toVisibleIndex - 1 - offsetYSize),
+      endIndex: toVisibleIndex + visibleSize + offsetYSize
     };
     calculateMergerOffsetIndex(mergeList, offsetItem, 'row');
     const {
@@ -12117,18 +12282,14 @@ const Methods = {
       if (startIndex !== offsetStartIndex || endIndex !== offsetEndIndex) {
         scrollYStore.startIndex = offsetStartIndex;
         scrollYStore.endIndex = offsetEndIndex;
-        this.updateScrollYData();
+        $xeTable.updateScrollYData();
       }
     }
   },
   // 计算可视渲染相关数据
   computeScrollLoad() {
     const $xeTable = this;
-    const props = $xeTable;
     return this.$nextTick().then(() => {
-      const {
-        showOverflow
-      } = props;
       const {
         sYOpts,
         sXOpts,
@@ -12141,16 +12302,14 @@ const Methods = {
       if (scrollXLoad) {
         const {
           visibleSize: visibleXSize
-        } = handleVirtualXVisible(this);
-        // 动态列缓冲量
-        const bufferSize = showOverflow ? 0 : 2;
-        const offsetXSize = Math.max(bufferSize, sXOpts.oSize ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(sXOpts.oSize) : browse.msie ? 10 : browse.edge ? 5 : 0);
+        } = handleVirtualXVisible($xeTable);
+        const offsetXSize = Math.max(0, sXOpts.oSize ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(sXOpts.oSize) : browse.edge ? 5 : 0);
         scrollXStore.offsetSize = offsetXSize;
         scrollXStore.visibleSize = visibleXSize;
         scrollXStore.endIndex = Math.max(scrollXStore.startIndex + scrollXStore.visibleSize + offsetXSize, scrollXStore.endIndex);
-        this.updateScrollXData();
+        $xeTable.updateScrollXData();
       } else {
-        this.updateScrollXSpace();
+        $xeTable.updateScrollXSpace();
       }
       calcCellHeight(this);
       // 计算 Y 逻辑
@@ -12159,19 +12318,17 @@ const Methods = {
       this.rowHeight = rowHeight;
       const {
         visibleSize: visibleYSize
-      } = handleVirtualYVisible(this);
+      } = handleVirtualYVisible($xeTable);
       if (scrollYLoad) {
-        // 动态高缓冲量
-        const bufferSize = showOverflow ? 0 : 2;
-        const offsetYSize = Math.max(bufferSize, sYOpts.oSize ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(sYOpts.oSize) : browse.edge ? 10 : 0);
+        const offsetYSize = Math.max(0, sYOpts.oSize ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(sYOpts.oSize) : browse.edge ? 10 : 0);
         scrollYStore.offsetSize = offsetYSize;
         scrollYStore.visibleSize = visibleYSize;
         scrollYStore.endIndex = Math.max(scrollYStore.startIndex + visibleYSize + offsetYSize, scrollYStore.endIndex);
-        this.updateScrollYData();
+        $xeTable.updateScrollYData();
       } else {
-        this.updateScrollYSpace();
+        $xeTable.updateScrollYSpace();
       }
-      this.$nextTick(this.updateStyle);
+      $xeTable.$nextTick(this.updateStyle);
     });
   },
   handleTableColumn() {
@@ -12192,10 +12349,19 @@ const Methods = {
     this.tableColumn = tableColumn;
   },
   updateScrollXData() {
+    const $xeTable = this;
+    const props = $xeTable;
+    const {
+      showOverflow
+    } = props;
     // this.tableColumn = []
-    return this.$nextTick().then(() => {
-      this.handleTableColumn();
-      this.updateScrollXSpace();
+    return $xeTable.$nextTick().then(() => {
+      $xeTable.handleTableColumn();
+      calcCellHeight($xeTable);
+      $xeTable.updateScrollXSpace();
+      if (!showOverflow) {
+        $xeTable.updateScrollYSpace();
+      }
     });
   },
   // 更新横向 X 可视渲染上下剩余空间大小
@@ -12255,10 +12421,10 @@ const Methods = {
   updateScrollYData() {
     const $xeTable = this;
     // this.tableData = []
-    return this.$nextTick().then(() => {
-      this.handleTableData();
+    return $xeTable.$nextTick().then(() => {
+      $xeTable.handleTableData();
       calcCellHeight($xeTable);
-      this.updateScrollYSpace();
+      $xeTable.updateScrollYSpace();
     });
   },
   // 更新纵向 Y 可视渲染上下剩余空间大小
@@ -12716,7 +12882,7 @@ const Methods = {
   }
 };
 // Module methods
-const funcs = 'setFilter,openFilter,clearFilter,getCheckedFilters,updateFilterOptionStatus,closeMenu,setActiveCellArea,getActiveCellArea,getCellAreas,clearCellAreas,copyCellArea,cutCellArea,pasteCellArea,getCopyCellArea,getCopyCellAreas,clearCopyCellArea,setCellAreas,openFNR,openFind,openReplace,closeFNR,getSelectedCell,clearSelected,insert,insertAt,insertNextAt,remove,removeCheckboxRow,removeRadioRow,removeCurrentRow,getRecordset,getInsertRecords,getRemoveRecords,getUpdateRecords,clearEdit,clearActived,getEditRecord,getActiveRecord,isEditByRow,isActiveByRow,setEditRow,setActiveRow,setEditCell,setActiveCell,setSelectCell,clearValidate,fullValidate,validate,fullValidateField,validateField,openExport,closeExport,openPrint,closePrint,getPrintHtml,exportData,openImport,closeImport,importData,saveFile,readFile,importByFile,print,openCustom,closeCustom,saveCustom,cancelCustom,resetCustom,toggleCustomAllCheckbox,setCustomAllCheckbox'.split(',');
+const funcs = 'setFilter,openFilter,clearFilter,saveFilterPanel,resetFilterPanel,getCheckedFilters,updateFilterOptionStatus,closeMenu,setActiveCellArea,getActiveCellArea,getCellAreas,clearCellAreas,copyCellArea,cutCellArea,pasteCellArea,getCopyCellArea,getCopyCellAreas,clearCopyCellArea,setCellAreas,openFNR,openFind,openReplace,closeFNR,getSelectedCell,clearSelected,insert,insertAt,insertNextAt,remove,removeCheckboxRow,removeRadioRow,removeCurrentRow,getRecordset,getInsertRecords,getRemoveRecords,getUpdateRecords,clearEdit,clearActived,getEditRecord,getActiveRecord,isEditByRow,isActiveByRow,setEditRow,setActiveRow,setEditCell,setActiveCell,setSelectCell,clearValidate,fullValidate,validate,fullValidateField,validateField,openExport,closeExport,openPrint,closePrint,getPrintHtml,exportData,openImport,closeImport,importData,saveFile,readFile,importByFile,print,openCustom,closeCustom,saveCustom,cancelCustom,resetCustom,toggleCustomAllCheckbox,setCustomAllCheckbox'.split(',');
 funcs.forEach(name => {
   Methods[name] = function (...args) {
     if (true) {
@@ -12748,7 +12914,8 @@ funcs.forEach(name => {
 
 const {
   getI18n: body_getI18n,
-  renderer: body_renderer
+  renderer: body_renderer,
+  renderEmptyElement: body_renderEmptyElement
 } = core_.VxeUI;
 const renderType = 'body';
 // 滚动、拖动过程中不需要触发
@@ -12810,6 +12977,7 @@ function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, ro
     columnKey,
     overflowX,
     sYOpts,
+    scrollXLoad,
     scrollYLoad,
     highlightCurrentRow,
     showOverflow: allColumnOverflow,
@@ -12834,8 +13002,13 @@ function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, ro
     tooltipConfig,
     rowOpts,
     columnOpts,
+    mouseOpts,
+    areaOpts,
     validErrorMaps
   } = $xetable;
+  const {
+    selectCellToRow
+  } = areaOpts;
   const cellOpts = $xetable.computeCellOpts;
   const {
     type,
@@ -13036,7 +13209,8 @@ function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, ro
       const validSlot = slots ? slots.valid : null;
       const validParams = {
         ...params,
-        ...errorValidItem
+        ...errorValidItem,
+        rule: errorValidItem
       };
       tdVNs.push(h('div', {
         class: ['vxe-cell--valid-error-tip', getClass(validOpts.className, errorValidItem)],
@@ -13053,11 +13227,18 @@ function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, ro
   let cellHeight = '';
   if (hasEllipsis && (scrollYRHeight || rowHeight)) {
     cellHeight = `${scrollYRHeight || rowHeight}px`;
-  } else if (scrollYLoad) {
+  } else if (scrollXLoad || scrollYLoad) {
     if (!hasEllipsis) {
       cellHeight = `${rest.height || 24}px`;
     }
   }
+  if (mouseConfig && mouseOpts.area && selectCellToRow) {
+    if (!$columnIndex && selectCellToRow === true || selectCellToRow === column.field) {
+      tdVNs.push(h('div', {
+        class: 'vxe-cell--area-status'
+      }));
+    }
+  }
   return h('td', {
     class: ['vxe-body--column', column.id, {
       [`col--${cellAlign}`]: cellAlign,
@@ -13325,6 +13506,7 @@ function renderRows(h, _vm, $xeTable, fixedType, tableData, tableColumn) {
     elemStore[`${prefix}emptyBlock`] = null;
   },
   render(h) {
+    const $xeTable = this.$parent;
     const {
       _e,
       $parent: $xetable,
@@ -13390,16 +13572,19 @@ function renderRows(h, _vm, $xeTable, fixedType, tableData, tableColumn) {
         emptyContent = $xetable.emptyText || body_getI18n('vxe.table.emptyText');
       }
     }
+    const ons = {
+      scroll: this.scrollEvent
+    };
+    if (sYOpts.mode === 'wheel') {
+      ons.wheel = this.wheelEvent;
+    }
     return h('div', {
+      ref: 'refElem',
       class: ['vxe-table--body-wrapper', fixedType ? `fixed-${fixedType}--wrapper` : 'body--wrapper'],
       attrs: {
         xid: tId
       },
-      on: Object.assign({
-        scroll: this.scrollEvent
-      }, scrollYLoad && sYOpts.mode === 'wheel' ? {
-        wheel: this.wheelEvent
-      } : null)
+      on: ons
     }, [fixedType ? _e() : h('div', {
       class: 'vxe-body--x-space',
       ref: 'xSpace'
@@ -13464,12 +13649,12 @@ function renderRows(h, _vm, $xeTable, fixedType, tableData, tableColumn) {
       class: 'vxe-table--cell-multi-area'
     }), h('span', {
       class: 'vxe-table--cell-active-area'
-    })]) : null, !fixedType ? h('div', {
+    })]) : body_renderEmptyElement($xeTable), !fixedType ? h('div', {
       class: 'vxe-table--empty-block',
       ref: 'emptyBlock'
     }, [h('div', {
       class: 'vxe-table--empty-content'
-    }, emptyContent)]) : null]);
+    }, emptyContent)]) : body_renderEmptyElement($xeTable)]);
   },
   methods: {
     /**
@@ -13478,37 +13663,52 @@ function renderRows(h, _vm, $xeTable, fixedType, tableData, tableColumn) {
      * 如果存在列固定右侧，同步更新滚动状态
      */
     scrollEvent(evnt) {
+      const $xeTable = this.$parent;
+      const tableInternalData = $xeTable;
       const {
-        $el: scrollBodyElem,
-        $parent: $xeTable,
         fixedType
       } = this;
       const {
-        $refs,
         lastScrollTop,
-        lastScrollLeft
-      } = $xeTable;
+        lastScrollLeft,
+        inVirtualScroll,
+        inBodyScroll,
+        bodyScrollType,
+        inFooterScroll
+      } = tableInternalData;
+      if (inVirtualScroll) {
+        return;
+      }
+      if (inFooterScroll) {
+        return;
+      }
+      if (inBodyScroll) {
+        if (bodyScrollType !== fixedType) {
+          return;
+        }
+      }
       const {
         tableHeader,
         tableBody,
         leftBody,
         rightBody,
         tableFooter
-      } = $refs;
+      } = $xeTable.$refs;
+      const scrollBodyElem = this.$el;
       const headerElem = tableHeader ? tableHeader.$el : null;
       const footerElem = tableFooter ? tableFooter.$el : null;
       const bodyElem = tableBody.$el;
       const leftElem = leftBody ? leftBody.$el : null;
       const rightElem = rightBody ? rightBody.$el : null;
+      const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
+      const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
       const scrollTop = scrollBodyElem.scrollTop;
       const scrollLeft = bodyElem.scrollLeft;
       const isRollX = scrollLeft !== lastScrollLeft;
       const isRollY = scrollTop !== lastScrollTop;
-      const xHandleEl = $refs.refScrollXHandleElem;
-      const yHandleEl = $refs.refScrollYHandleElem;
-      if (yHandleEl) {
-        yHandleEl.scrollTop = scrollTop;
-      } else if (isRollY) {
+      tableInternalData.inBodyScroll = true;
+      tableInternalData.bodyScrollType = fixedType;
+      if (isRollY) {
         if (leftElem && fixedType === 'left') {
           setScrollTop(bodyElem, scrollTop);
           setScrollTop(rightElem, scrollTop);
@@ -13519,21 +13719,19 @@ function renderRows(h, _vm, $xeTable, fixedType, tableData, tableColumn) {
           setScrollTop(leftElem, scrollTop);
           setScrollTop(rightElem, scrollTop);
         }
-        $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
-          type: renderType,
-          fixed: fixedType
-        });
+        setScrollTop(yHandleEl, scrollTop);
+        $xeTable.triggerScrollYEvent(evnt);
       }
-      if (xHandleEl) {
-        xHandleEl.scrollLeft = scrollLeft;
-      } else if (isRollX) {
+      if (isRollX) {
+        setScrollLeft(xHandleEl, scrollLeft);
         setScrollLeft(headerElem, scrollLeft);
         setScrollLeft(footerElem, scrollLeft);
-        $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
-          type: renderType,
-          fixed: fixedType
-        });
+        $xeTable.triggerScrollXEvent(evnt);
       }
+      $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
+        type: renderType,
+        fixed: fixedType
+      });
     },
     handleWheel(evnt, isTopWheel, deltaTop, isRollX, isRollY) {
       const {
@@ -14384,14 +14582,16 @@ function footer_renderHeads(h, _vm, footerTableData) {
         tableColumn = visibleColumn;
       }
     }
+    const ons = {};
+    if (!fixedType) {
+      ons.scroll = this.scrollEvent;
+    }
     return h('div', {
       class: ['vxe-table--footer-wrapper', fixedType ? `fixed-${fixedType}--wrapper` : 'body--wrapper'],
       attrs: {
         xid: tId
       },
-      on: {
-        scroll: this.scrollEvent
-      }
+      on: ons
     }, [fixedType ? _e() : h('div', {
       class: 'vxe-body--x-space',
       ref: 'xSpace'
@@ -14436,36 +14636,43 @@ function footer_renderHeads(h, _vm, footerTableData) {
      * 如果存在列固定右侧，同步更新滚动状态
      */
     scrollEvent(evnt) {
+      const $xeTable = this.$parent;
+      const tableInternalData = $xeTable;
+      const {
+        inVirtualScroll,
+        inBodyScroll
+      } = tableInternalData;
+      if (inVirtualScroll) {
+        return;
+      }
+      if (inBodyScroll) {
+        return;
+      }
       const {
-        $parent: $xeTable,
         fixedType
       } = this;
-      const {
-        $refs
-      } = $xeTable;
       const {
         tableHeader,
         tableBody,
         tableFooter
-      } = $refs;
+      } = $xeTable.$refs;
       const headerElem = tableHeader ? tableHeader.$el : null;
       const footerElem = tableFooter ? tableFooter.$el : null;
       const bodyElem = tableBody.$el;
-      const scrollLeft = footerElem ? footerElem.scrollLeft : 0;
-      const xHandleEl = $refs.refScrollXHandleElem;
-      if (xHandleEl) {
-        xHandleEl.scrollLeft = scrollLeft;
-      } else {
-        const isRollX = true;
-        const isRollY = false;
-        const scrollTop = bodyElem.scrollTop;
-        setScrollLeft(headerElem, scrollLeft);
-        setScrollLeft(bodyElem, scrollLeft);
-        $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
-          type: footer_renderType,
-          fixed: fixedType
-        });
-      }
+      const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
+      const scrollLeft = footerElem.scrollLeft;
+      const isRollX = true;
+      const isRollY = false;
+      const scrollTop = bodyElem.scrollTop;
+      tableInternalData.inFooterScroll = true;
+      setScrollLeft(xHandleEl, scrollLeft);
+      setScrollLeft(headerElem, scrollLeft);
+      setScrollLeft(bodyElem, scrollLeft);
+      $xeTable.triggerScrollXEvent(evnt);
+      $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
+        type: footer_renderType,
+        fixed: fixedType
+      });
     }
   }
 });
@@ -15878,20 +16085,16 @@ const {
     // 确认筛选
     confirmFilter(evnt) {
       const {
-        $parent: $xetable,
-        filterStore
+        $parent: $xetable
       } = this;
-      filterStore.options.forEach(option => {
-        option.checked = option._checked;
-      });
-      $xetable.confirmFilterEvent(evnt);
+      $xetable.handleFilterConfirmFilter(evnt);
     },
     // 重置筛选
     resetFilter(evnt) {
       const {
         $parent: $xetable
       } = this;
-      $xetable.resetFilterEvent(evnt);
+      $xetable.handleFilterResetFilter(evnt);
     }
     /*************************
      * Publish methods
@@ -16918,6 +17121,27 @@ const {
         visible: filterStore.visible
       }, evnt);
     },
+    handleFilterConfirmFilter(evnt) {
+      const $xeTable = this;
+      const reactData = $xeTable;
+      const {
+        filterStore
+      } = reactData;
+      filterStore.options.forEach(option => {
+        option.checked = option._checked;
+      });
+      $xeTable.confirmFilterEvent(evnt);
+    },
+    _saveFilterPanel() {
+      const $xeTable = this;
+      $xeTable.handleFilterConfirmFilter(null);
+      return $xeTable.$nextTick();
+    },
+    _resetFilterPanel() {
+      const $xeTable = this;
+      $xeTable.handleFilterResetFilter(null);
+      return $xeTable.$nextTick();
+    },
     _getCheckedFilters() {
       const {
         tableFullColumn
@@ -16996,7 +17220,9 @@ const {
       if (this.mouseConfig && this.mouseOpts.area && this.handleFilterEvent) {
         this.handleFilterEvent(evnt, params);
       }
-      this.emitEvent('filter-change', params, evnt);
+      if (evnt) {
+        this.emitEvent('filter-change', params, evnt);
+      }
       this.closeFilter();
       this.updateFooter().then(() => {
         const {
@@ -17051,7 +17277,7 @@ const {
      * 当筛选面板中的重置按钮被按下时触发
      * @param {Event} evnt 事件
      */
-    resetFilterEvent(evnt) {
+    handleFilterResetFilter(evnt) {
       this.handleClearFilter(this.filterStore.column);
       this.confirmFilterEvent(evnt);
     },
@@ -22766,6 +22992,7 @@ function handleUupdateResize(_vm) {
     const VxeUILoadingComponent = core_.VxeUI.getComponent('VxeLoading');
     const VxeUITooltipComponent = core_.VxeUI.getComponent('VxeTooltip');
     const $xeTable = this;
+    const $xeGrid = $xeTable.$xeGrid;
     const {
       _e,
       $scopedSlots,
@@ -22815,6 +23042,7 @@ function handleUupdateResize(_vm) {
       leftList,
       rightList
     } = columnStore;
+    const loadingSlot = $scopedSlots.loading;
     const currLoading = this._isLoading || loading;
     const vSize = computeSize;
     const virtualScrollBars = $xeTable.computeVirtualScrollBars;
@@ -22971,7 +23199,19 @@ function handleUupdateResize(_vm) {
         icon: loadingOpts.icon,
         text: loadingOpts.text
       }
-    }, this.callSlot($scopedSlots.loading, {}, h)) : _e(),
+    }, $xeTable.callSlot(loadingSlot, {
+      $table: $xeTable,
+      $grid: $xeGrid,
+      loading: currLoading
+    }, h)) : loadingSlot ? h('div', {
+      class: ['vxe-loading--custom-wrapper', {
+        'is--visible': currLoading
+      }]
+    }, $xeTable.callSlot(loadingSlot, {
+      $table: $xeTable,
+      $grid: $xeGrid,
+      loading: currLoading
+    }, h)) : table_renderEmptyElement($xeTable),
     /**
      * 自定义列
      */
@@ -22981,7 +23221,7 @@ function handleUupdateResize(_vm) {
       props: {
         customStore
       }
-    }) : _e(),
+    }) : table_renderEmptyElement($xeTable),
     /**
      * 筛选
      */