vxe-table 3.9.21 → 3.10.0-beta.0

package/lib/table/src/methods.js

@@ -18,7 +18,8 @@ const {
   getI18n,
   renderer,
   formats,
-  interceptor
+  interceptor,
+  createEvent
 } = _ui.VxeUI;
 const isWebkit = _dom.browse['-webkit'] && !_dom.browse.edge;
 const debounceScrollYDuration = _dom.browse.msie ? 80 : 20;
@@ -87,7 +88,7 @@ function handleReserveRow(_vm, reserveRowMap) {
   });
   return reserveList;
 }
-function computeVirtualX(_vm) {
+function handleVirtualXVisible(_vm) {
   const {
     $refs,
     visibleColumn
@@ -127,21 +128,19 @@ function computeVirtualX(_vm) {
     visibleSize: 6
   };
 }
-function computeVirtualY(_vm) {
+const computeRowHeight = $xeTable => {
   const {
     $refs,
-    computeSize,
-    rowHeightMaps
-  } = _vm;
-  const {
-    tableHeader,
-    tableBody
-  } = $refs;
+    computeSize
+  } = $xeTable;
+  const tableHeader = $refs.tableHeader;
+  const tableBody = $refs.tableBody;
   const tableBodyElem = tableBody ? tableBody.$el : null;
   const vSize = computeSize;
+  const rowHeightMaps = $xeTable.rowHeightMaps;
+  let rowHeight = 0;
   if (tableBodyElem) {
     const tableHeaderElem = tableHeader ? tableHeader.$el : null;
-    let rowHeight = 0;
     let firstTrElem;
     firstTrElem = tableBodyElem.querySelector('tr');
     if (!firstTrElem && tableHeaderElem) {
@@ -153,14 +152,55 @@ function computeVirtualY(_vm) {
     if (!rowHeight) {
       rowHeight = rowHeightMaps[vSize || 'default'];
     }
-    const visibleSize = Math.max(8, Math.ceil(tableBodyElem.clientHeight / rowHeight) + 2);
+  }
+  return rowHeight;
+};
+function handleVirtualYVisible($xeTable) {
+  const {
+    $refs,
+    scrollYStore,
+    afterFullData,
+    fullAllDataRowIdData
+  } = $xeTable;
+  const tableBody = $refs.tableBody;
+  const tableBodyElem = tableBody ? tableBody.$el : null;
+  const {
+    rowHeight
+  } = scrollYStore;
+  if (tableBodyElem) {
+    const {
+      scrollTop,
+      clientHeight
+    } = tableBodyElem;
+    const endHeight = scrollTop + clientHeight;
+    let toVisibleIndex = -1;
+    let offsetTop = 0;
+    let visibleSize = 0;
+    for (let rIndex = 0, rLen = afterFullData.length; rIndex < rLen; rIndex++) {
+      const row = afterFullData[rIndex];
+      const rowid = (0, _util.getRowid)($xeTable, row);
+      const rest = fullAllDataRowIdData[rowid];
+      if (!rest) {
+        break;
+      }
+      offsetTop += rest.height || rowHeight;
+      if (toVisibleIndex === -1 && scrollTop < offsetTop) {
+        toVisibleIndex = rIndex;
+      }
+      if (toVisibleIndex >= 0) {
+        visibleSize++;
+        if (offsetTop > endHeight) {
+          break;
+        }
+      }
+    }
     return {
-      rowHeight,
-      visibleSize
+      toVisibleIndex: Math.max(0, toVisibleIndex),
+      visibleSize: Math.max(8, visibleSize)
     };
   }
   return {
-    rowHeight: 0,
+    toVisibleIndex: 0,
     visibleSize: 8
   };
 }
@@ -278,7 +318,7 @@ function clearAllSort(_vm) {
     column.order = null;
   });
 }
-function calcHeight(_vm, key) {
+function calcTableHeight(_vm, key) {
   const {
     parentHeight
   } = _vm;
@@ -299,6 +339,29 @@ function calcHeight(_vm, key) {
   }
   return num;
 }
+const calcCellHeight = $xeTable => {
+  const {
+    tableData,
+    scrollYLoad,
+    fullAllDataRowIdData
+  } = $xeTable;
+  const el = $xeTable.$el;
+  if (scrollYLoad && el) {
+    tableData.forEach(row => {
+      const rowid = (0, _util.getRowid)($xeTable, row);
+      const rest = fullAllDataRowIdData[rowid];
+      const trList = el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]`);
+      if (rest && trList.length) {
+        let height = 0;
+        for (let i = 0; i < trList.length; i++) {
+          const trEl = trList[i];
+          height = Math.max(height, trEl.offsetHeight);
+        }
+        rest.height = height;
+      }
+    });
+  }
+};
 function getOrderField(_vm, column) {
   const {
     sortBy,
@@ -543,9 +606,9 @@ const Methods = {
         if (!(this.height || this.maxHeight)) {
           (0, _log.errLog)('vxe.error.reqProp', ['table.height | table.max-height | table.scroll-y={enabled: false}']);
         }
-        if (!this.showOverflow) {
-          (0, _log.warnLog)('vxe.error.reqProp', ['table.show-overflow']);
-        }
+        // if (!this.showOverflow) {
+        //   warnLog('vxe.error.reqProp', ['table.show-overflow'])
+        // }
         if (this.spanMethod) {
           (0, _log.warnLog)('vxe.error.scrollErrProp', ['table.span-method']);
         }
@@ -784,7 +847,8 @@ const Methods = {
           $index: -1,
           items,
           parent,
-          level
+          level,
+          height: 0
         };
       }
       if (isSource) {
@@ -882,7 +946,8 @@ const Methods = {
           $index: -1,
           items,
           parent: parentRow,
-          level: parentLevel + nodes.length
+          level: parentLevel + nodes.length,
+          height: 0
         };
         fullDataRowIdData[rowid] = rest;
         fullAllDataRowIdData[rowid] = rest;
@@ -933,7 +998,8 @@ const Methods = {
         colid,
         index,
         items,
-        parent
+        parent: parent || null,
+        width: 0
       };
       if (field) {
         if (process.env.NODE_ENV === 'development') {
@@ -1044,14 +1110,14 @@ const Methods = {
         fullAllDataRowIdData
       } = this;
       const rowid = tr.getAttribute('rowid');
-      const rest = fullAllDataRowIdData[rowid];
-      if (rest) {
+      const rowRest = fullAllDataRowIdData[rowid];
+      if (rowRest) {
         return {
-          rowid: rest.rowid,
-          item: rest.row,
-          index: rest.index,
-          items: rest.items,
-          parent: rest.parent
+          rowid: rowRest.rowid,
+          item: rowRest.row,
+          index: rowRest.index,
+          items: rowRest.items,
+          parent: rowRest.parent
         };
       }
     }
@@ -1067,15 +1133,17 @@ const Methods = {
         fullColumnIdData
       } = this;
       const colid = cell.getAttribute('colid');
-      const rest = fullColumnIdData[colid];
-      if (rest) {
-        return {
-          colid: rest.colid,
-          item: rest.column,
-          index: rest.index,
-          items: rest.items,
-          parent: rest.parent
-        };
+      if (colid) {
+        const colRest = fullColumnIdData[colid];
+        if (colRest) {
+          return {
+            colid: colRest.colid,
+            item: colRest.column,
+            index: colRest.index,
+            items: colRest.items,
+            parent: colRest.parent
+          };
+        }
       }
     }
     return null;
@@ -1425,13 +1493,13 @@ const Methods = {
       } = $xeTable;
       const rowid = (0, _util.getRowid)($xeTable, row);
       const colid = column.id;
-      const rest = fullAllDataRowIdData[rowid];
-      if (rest) {
-        formatData = rest.formatData;
+      const rowRest = fullAllDataRowIdData[rowid];
+      if (rowRest) {
+        formatData = rowRest.formatData;
         if (!formatData) {
           formatData = fullAllDataRowIdData[rowid].formatData = {};
         }
-        if (rest && formatData[colid]) {
+        if (rowRest && formatData[colid]) {
           if (formatData[colid].value === cellValue) {
             return formatData[colid].label;
           }
@@ -1883,11 +1951,11 @@ const Methods = {
     if (treeConfig) {
       _xeUtils.default.eachTree(afterTreeFullData, (row, index, items, path) => {
         const rowid = (0, _util.getRowid)(this, row);
-        const allrest = fullAllDataRowIdData[rowid];
+        const rowRest = fullAllDataRowIdData[rowid];
         const seq = path.map((num, i) => i % 2 === 0 ? Number(num) + 1 : '.').join('');
-        if (allrest) {
-          allrest.seq = seq;
-          allrest._index = index;
+        if (rowRest) {
+          rowRest.seq = seq;
+          rowRest._index = index;
         } else {
           const rest = {
             row,
@@ -1898,7 +1966,8 @@ const Methods = {
             _index: index,
             items: [],
             parent: null,
-            level: 0
+            level: 0,
+            height: 0
           };
           fullAllDataRowIdData[rowid] = rest;
           fullDataRowIdData[rowid] = rest;
@@ -1910,11 +1979,11 @@ const Methods = {
     } else {
       afterFullData.forEach((row, index) => {
         const rowid = (0, _util.getRowid)(this, row);
-        const allrest = fullAllDataRowIdData[rowid];
+        const rowRest = fullAllDataRowIdData[rowid];
         const seq = index + 1;
-        if (allrest) {
-          allrest.seq = seq;
-          allrest._index = index;
+        if (rowRest) {
+          rowRest.seq = seq;
+          rowRest._index = index;
         } else {
           const rest = {
             row,
@@ -1925,7 +1994,8 @@ const Methods = {
             _index: index,
             items: [],
             parent: null,
-            level: 0
+            level: 0,
+            height: 0
           };
           fullAllDataRowIdData[rowid] = rest;
           fullDataRowIdData[rowid] = rest;
@@ -2500,7 +2570,7 @@ const Methods = {
       }
       const {
         visibleSize
-      } = computeVirtualX(this);
+      } = handleVirtualXVisible(this);
       scrollXStore.startIndex = 0;
       scrollXStore.endIndex = visibleSize;
       scrollXStore.visibleSize = visibleSize;
@@ -2514,9 +2584,9 @@ const Methods = {
     this.scrollXLoad = scrollXLoad;
     visibleColumn.forEach((column, index) => {
       const colid = column.id;
-      const rest = fullColumnIdData[colid];
-      if (rest) {
-        rest._index = index;
+      const colRest = fullColumnIdData[colid];
+      if (colRest) {
+        colRest._index = index;
       }
     });
     this.visibleColumn = visibleColumn;
@@ -2627,36 +2697,26 @@ const Methods = {
    * 计算单元格列宽，动态分配可用剩余空间
    * 支持 width=? width=?px width=?% min-width=? min-width=?px min-width=?%
    */
-  recalculate(refull) {
-    const {
-      $refs
-    } = this;
-    const {
-      tableBody,
-      tableHeader,
-      tableFooter
-    } = $refs;
-    const bodyElem = tableBody ? tableBody.$el : null;
-    const headerElem = tableHeader ? tableHeader.$el : null;
-    const footerElem = tableFooter ? tableFooter.$el : null;
+  recalculate(reFull) {
     const el = this.$el;
     if (!el || !el.clientWidth) {
       return this.$nextTick();
     }
-    if (bodyElem) {
-      this.calcCellWidth();
-      this.autoCellWidth(headerElem, bodyElem, footerElem);
-      if (refull === true) {
-        // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
-        return this.computeScrollLoad().then(() => {
-          this.autoCellWidth(headerElem, bodyElem, footerElem);
-          return this.computeScrollLoad();
-        });
-      }
+    calcCellHeight(this);
+    this.calcCellWidth();
+    this.autoCellWidth();
+    if (reFull === true) {
+      // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
+      return this.computeScrollLoad().then(() => {
+        calcCellHeight(this);
+        this.autoCellWidth();
+        return this.computeScrollLoad();
+      });
     }
     return this.computeScrollLoad();
   },
   calcCellWidth() {
+    const $xeTable = this;
     const {
       autoWidthColumnList,
       tableData
@@ -2667,9 +2727,15 @@ const Methods = {
     }
     this.isCalcColumn = true;
     return this.$nextTick().then(() => {
+      const internalData = $xeTable;
+      const {
+        fullColumnIdData
+      } = internalData;
       const el = this.$el;
       if (el) {
         autoWidthColumnList.forEach(column => {
+          const colid = column.id;
+          const colRest = fullColumnIdData[colid];
           const cellElList = el.querySelectorAll(`.vxe-header--column.${column.id}>.vxe-cell,.vxe-body--column.${column.id}>.vxe-cell,.vxe-footer--column.${column.id}>.vxe-cell`);
           const firstCellEl = cellElList[0];
           let paddingSize = 0;
@@ -2696,6 +2762,9 @@ const Methods = {
               colWidth = Math.max(colWidth, Math.ceil(titleWidth) + 4);
             }
           });
+          if (colRest) {
+            colRest.width = Math.max(colWidth, colRest.width);
+          }
           column.renderAutoWidth = colWidth + paddingSize;
         });
         this.analyColumnWidth();
@@ -2708,12 +2777,19 @@ const Methods = {
    * 支持 px、%、固定 混合分配
    * 支持动态列表调整分配
    * 支持自动分配偏移量
-   * @param {Element} headerElem
-   * @param {Element} bodyElem
-   * @param {Element} footerElem
-   * @param {Number} bodyWidth
    */
-  autoCellWidth(headerElem, bodyElem, footerElem) {
+  autoCellWidth() {
+    const {
+      $refs
+    } = this;
+    const {
+      tableBody,
+      tableHeader,
+      tableFooter
+    } = $refs;
+    const bodyElem = tableBody ? tableBody.$el : null;
+    const headerElem = tableHeader ? tableHeader.$el : null;
+    const footerElem = tableFooter ? tableFooter.$el : null;
     let tableWidth = 0;
     const minCellWidth = 40; // 列宽最少限制 40px
     const bodyWidth = bodyElem.clientWidth - 1;
@@ -2848,12 +2924,41 @@ const Methods = {
       this.checkScrolling();
     }
   },
+  calcCellHeight() {
+    const $xeTable = this;
+    const reactData = $xeTable;
+    const internalData = $xeTable;
+    const {
+      tableData,
+      scrollYLoad
+    } = reactData;
+    const {
+      fullAllDataRowIdData
+    } = internalData;
+    const el = $xeTable.$el;
+    if (scrollYLoad && el) {
+      tableData.forEach(row => {
+        const rowid = (0, _util.getRowid)($xeTable, row);
+        const rowRest = fullAllDataRowIdData[rowid];
+        const trList = el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]`);
+        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);
+          }
+          rowRest.height = height;
+        }
+      });
+    }
+  },
   updateHeight() {
-    this.customHeight = calcHeight(this, 'height');
-    this.customMinHeight = calcHeight(this, 'minHeight');
-    this.customMaxHeight = calcHeight(this, 'maxHeight');
+    this.customHeight = calcTableHeight(this, 'height');
+    this.customMinHeight = calcTableHeight(this, 'minHeight');
+    this.customMaxHeight = calcTableHeight(this, 'maxHeight');
   },
   updateStyle() {
+    const $xeTable = this;
     let {
       $refs,
       isGroup,
@@ -2875,6 +2980,7 @@ const Methods = {
       scrollbarWidth,
       scrollXLoad,
       scrollYLoad,
+      overflowX,
       cellOffsetWidth,
       columnStore,
       elemStore,
@@ -2889,7 +2995,7 @@ const Methods = {
       footerSpanMethod,
       isAllOverflow,
       visibleColumn
-    } = this;
+    } = $xeTable;
     const containerList = ['main', 'left', 'right'];
     const emptyPlaceholderElem = $refs.emptyPlaceholder;
     const bodyWrapperElem = elemStore['main-body-wrapper'];
@@ -2902,6 +3008,30 @@ const Methods = {
         customHeight += scrollbarHeight;
       }
     }
+    const scrollXVirtualEl = $xeTable.$refs.refScrollXVirtualElem;
+    if (scrollXVirtualEl) {
+      scrollXVirtualEl.style.height = `${scrollbarHeight}px`;
+    }
+    const scrollYVirtualEl = $xeTable.$refs.refScrollYVirtualElem;
+    if (scrollYVirtualEl) {
+      let bodyHeight = 0;
+      let bodyMaxHeight = 0;
+      const bodyMinHeight = customMinHeight - headerHeight - footerHeight;
+      if (customMaxHeight) {
+        bodyMaxHeight = customMaxHeight - headerHeight - footerHeight;
+        bodyMaxHeight = Math.max(bodyMinHeight, bodyMaxHeight);
+      }
+      if (customHeight) {
+        bodyHeight = customHeight - headerHeight - footerHeight;
+        if (bodyMaxHeight) {
+          bodyHeight = Math.min(bodyMaxHeight, bodyHeight);
+        }
+        bodyHeight = Math.max(bodyMinHeight, bodyHeight);
+      }
+      scrollYVirtualEl.style.top = `${headerHeight}px`;
+      scrollYVirtualEl.style.width = `${scrollbarWidth}px`;
+      scrollYVirtualEl.style.height = `${bodyHeight + (overflowX ? -Math.max(1, scrollbarHeight) : 0)}px`;
+    }
     containerList.forEach((name, index) => {
       const fixedType = index > 0 ? name : '';
       const layoutList = ['header', 'body', 'footer'];
@@ -3066,7 +3196,8 @@ const Methods = {
               colElem.style.width = `${scrollbarWidth}px`;
             }
             if (fullColumnIdData[colid]) {
-              const column = fullColumnIdData[colid].column;
+              const colRest = fullColumnIdData[colid];
+              const column = colRest.column;
               const {
                 showHeaderOverflow,
                 showFooterOverflow,
@@ -3132,22 +3263,25 @@ const Methods = {
    * 处理固定列的显示状态
    */
   checkScrolling() {
+    const $xeTable = this;
     const {
       tableBody,
       leftContainer,
       rightContainer
-    } = this.$refs;
+    } = $xeTable.$refs;
     const bodyElem = tableBody ? tableBody.$el : null;
-    if (bodyElem) {
+    const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
+    const bodtTargetEl = xHandleEl || bodyElem;
+    if (bodtTargetEl) {
       if (leftContainer) {
-        if (bodyElem.scrollLeft > 0) {
+        if (bodtTargetEl.scrollLeft > 0) {
           (0, _dom.addClass)(leftContainer, 'scrolling--middle');
         } else {
           (0, _dom.removeClass)(leftContainer, 'scrolling--middle');
         }
       }
       if (rightContainer) {
-        if (bodyElem.clientWidth < bodyElem.scrollWidth - Math.ceil(bodyElem.scrollLeft)) {
+        if (bodtTargetEl.clientWidth < bodtTargetEl.scrollWidth - Math.ceil(bodtTargetEl.scrollLeft)) {
           (0, _dom.addClass)(rightContainer, 'scrolling--middle');
         } else {
           (0, _dom.removeClass)(rightContainer, 'scrolling--middle');
@@ -5548,8 +5682,8 @@ const Methods = {
     const {
       fullAllDataRowIdData
     } = this;
-    const rest = fullAllDataRowIdData[(0, _util.getRowid)($xeTable, row)];
-    return rest && !!rest.expandLoaded;
+    const rowRest = fullAllDataRowIdData[(0, _util.getRowid)($xeTable, row)];
+    return rowRest && !!rowRest.expandLoaded;
   },
   clearRowExpandLoaded(row) {
     const $xeTable = this;
@@ -5562,9 +5696,9 @@ const Methods = {
       lazy
     } = expandOpts;
     const rowid = (0, _util.getRowid)($xeTable, row);
-    const rest = fullAllDataRowIdData[rowid];
-    if (lazy && rest) {
-      rest.expandLoaded = false;
+    const rowRest = fullAllDataRowIdData[rowid];
+    if (lazy && rowRest) {
+      rowRest.expandLoaded = false;
       const rowTempExpandLazyLoadedMaps = Object.assign({}, rowExpandLazyLoadedMaps);
       if (rowTempExpandLazyLoadedMaps[rowid]) {
         delete rowTempExpandLazyLoadedMaps[rowid];
@@ -5704,7 +5838,7 @@ const Methods = {
           fullAllDataRowIdData
         } = this;
         const rowid = (0, _util.getRowid)($xeTable, row);
-        const rest = fullAllDataRowIdData[rowid];
+        const rowRest = fullAllDataRowIdData[rowid];
         rowExpandLazyLoadedMaps[rowid] = row;
         loadMethod({
           $table: $xeTable,
@@ -5715,10 +5849,10 @@ const Methods = {
           const {
             rowExpandedMaps
           } = this;
-          rest.expandLoaded = true;
+          rowRest.expandLoaded = true;
           rowExpandedMaps[rowid] = row;
         }).catch(() => {
-          rest.expandLoaded = false;
+          rowRest.expandLoaded = false;
         }).finally(() => {
           const {
             rowExpandLazyLoadedMaps
@@ -5780,8 +5914,8 @@ const Methods = {
         validRows.forEach(row => {
           const rowid = (0, _util.getRowid)(this, row);
           if (!rExpandedMaps[rowid]) {
-            const rest = fullAllDataRowIdData[rowid];
-            const isLoad = lazy && !rest.expandLoaded && !rowExpandLazyLoadedMaps[rowid];
+            const rowRest = fullAllDataRowIdData[rowid];
+            const isLoad = lazy && !rowRest.expandLoaded && !rowExpandLazyLoadedMaps[rowid];
             if (isLoad) {
               lazyRests.push(this.handleAsyncRowExpand(row));
             } else {
@@ -5901,8 +6035,8 @@ const Methods = {
     const {
       fullAllDataRowIdData
     } = this;
-    const rest = fullAllDataRowIdData[(0, _util.getRowid)($xeTable, row)];
-    return rest && !!rest.treeLoaded;
+    const rowRest = fullAllDataRowIdData[(0, _util.getRowid)($xeTable, row)];
+    return rowRest && !!rowRest.treeLoaded;
   },
   clearTreeExpandLoaded(row) {
     const $xeTable = this;
@@ -5916,9 +6050,9 @@ const Methods = {
       lazy
     } = treeOpts;
     const rowid = (0, _util.getRowid)($xeTable, row);
-    const rest = fullAllDataRowIdData[rowid];
-    if (lazy && rest) {
-      rest.treeLoaded = false;
+    const rowRest = fullAllDataRowIdData[rowid];
+    if (lazy && rowRest) {
+      rowRest.treeLoaded = false;
       if (treeExpandedMaps[rowid]) {
         delete treeExpandedMaps[rowid];
       }
@@ -6058,13 +6192,13 @@ const Methods = {
           fullAllDataRowIdData
         } = this;
         const rowid = (0, _util.getRowid)($xeTable, row);
-        const rest = fullAllDataRowIdData[rowid];
+        const rowRest = fullAllDataRowIdData[rowid];
         treeExpandLazyLoadedMaps[rowid] = row;
         Promise.resolve(loadMethod({
           $table: $xeTable,
           row
         })).then(childRecords => {
-          rest.treeLoaded = true;
+          rowRest.treeLoaded = true;
           if (treeExpandLazyLoadedMaps[rowid]) {
             delete treeExpandLazyLoadedMaps[rowid];
           }
@@ -6094,7 +6228,7 @@ const Methods = {
           const {
             treeExpandLazyLoadedMaps
           } = this;
-          rest.treeLoaded = false;
+          rowRest.treeLoaded = false;
           if (treeExpandLazyLoadedMaps[rowid]) {
             delete treeExpandLazyLoadedMaps[rowid];
           }
@@ -6183,8 +6317,8 @@ const Methods = {
       validRows.forEach(row => {
         const rowid = (0, _util.getRowid)(this, row);
         if (!treeTempExpandedMaps[rowid]) {
-          const rest = fullAllDataRowIdData[rowid];
-          const isLoad = lazy && row[hasChildField] && !rest.treeLoaded && !treeExpandLazyLoadedMaps[rowid];
+          const rowRest = fullAllDataRowIdData[rowid];
+          const isLoad = lazy && row[hasChildField] && !rowRest.treeLoaded && !treeExpandLazyLoadedMaps[rowid];
           // 是否使用懒加载
           if (isLoad) {
             result.push(this.handleAsyncTreeExpandChilds(row));
@@ -6348,7 +6482,7 @@ const Methods = {
     const {
       toVisibleIndex,
       visibleSize
-    } = computeVirtualX(this);
+    } = handleVirtualXVisible(this);
     const offsetItem = {
       startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize),
       endIndex: toVisibleIndex + visibleSize + offsetSize
@@ -6367,10 +6501,46 @@ const Methods = {
     }
     this.closeTooltip();
   },
+  handleScrollEvent(evnt, isRollY, isRollX, params) {
+    const $xeTable = this;
+    const props = $xeTable;
+    const {
+      highlightHoverRow
+    } = props;
+    const tableBody = $xeTable.$refs.tableBody;
+    const bodyElem = tableBody ? tableBody.$el : null;
+    const rowOpts = $xeTable.computeRowOpts;
+    const validTip = $xeTable.$refs.validTip;
+    const tooltip = $xeTable.$refs.tooltip;
+    if (rowOpts.isHover || highlightHoverRow) {
+      $xeTable.clearHoverRow();
+    }
+    if (validTip && validTip.visible) {
+      validTip.close();
+    }
+    if (tooltip && tooltip.visible) {
+      tooltip.close();
+    }
+    if (isRollX) {
+      $xeTable.checkScrolling();
+    }
+    const bodyHeight = bodyElem ? bodyElem.clientHeight : 0;
+    const bodyWidth = bodyElem ? bodyElem.clientWidth : 0;
+    const scrollHeight = bodyElem ? bodyElem.scrollHeight : 0;
+    const scrollWidth = bodyElem ? bodyElem.scrollWidth : 0;
+    $xeTable.dispatchEvent('scroll', Object.assign({
+      bodyHeight,
+      bodyWidth,
+      scrollHeight,
+      scrollWidth,
+      isX: isRollX,
+      isY: isRollY
+    }, params), evnt);
+  },
   /**
    * 纵向 Y 可视渲染事件处理
    */
-  triggerScrollYEvent(evnt) {
+  triggerScrollYEvent() {
     const {
       scrollYStore
     } = this;
@@ -6381,21 +6551,84 @@ const Methods = {
     } = scrollYStore;
     // webkit 浏览器使用最佳的渲染方式，且最高渲染量不能大于 40 条
     if (isWebkit && adaptive && offsetSize * 2 + visibleSize <= 40) {
-      this.loadScrollYData(evnt);
+      this.loadScrollYData();
     } else {
-      this.debounceScrollY(evnt);
+      this.debounceScrollYData();
     }
+    this.debounceScrollYCalculate();
   },
-  debounceScrollY: _xeUtils.default.debounce(function (evnt) {
-    this.loadScrollYData(evnt);
+  debounceScrollYData: _xeUtils.default.debounce(function () {
+    this.loadScrollYData();
   }, debounceScrollYDuration, {
     leading: false,
     trailing: true
   }),
+  scrollXEvent(evnt) {
+    const $xeTable = this;
+    const wrapperEl = evnt.currentTarget;
+    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;
+    const {
+      scrollTop,
+      scrollLeft
+    } = wrapperEl;
+    const isRollX = true;
+    const isRollY = false;
+    $xeTable.lastScrollLeft = scrollLeft;
+    $xeTable.lastScrollTime = Date.now();
+    (0, _dom.setScrollLeft)(bodyElem, scrollLeft);
+    (0, _dom.setScrollLeft)(headerElem, scrollLeft);
+    (0, _dom.setScrollLeft)(footerElem, scrollLeft);
+    $xeTable.triggerScrollXEvent(evnt);
+    $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
+      type: 'table',
+      fixed: '',
+      scrollTop,
+      scrollLeft
+    });
+  },
+  debounceScrollYCalculate: _xeUtils.default.debounce(function () {
+    this.updateScrollYSpace();
+  }, 1000, {
+    leading: false,
+    trailing: true
+  }),
+  scrollYEvent(evnt) {
+    const $xeTable = this;
+    const wrapperEl = evnt.currentTarget;
+    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;
+    const {
+      scrollTop,
+      scrollLeft
+    } = wrapperEl;
+    const isRollX = false;
+    const isRollY = true;
+    $xeTable.lastScrollTop = scrollTop;
+    $xeTable.lastScrollTime = Date.now();
+    (0, _dom.setScrollTop)(bodyElem, scrollTop);
+    (0, _dom.setScrollTop)(leftElem, scrollTop);
+    (0, _dom.setScrollTop)(rightElem, scrollTop);
+    $xeTable.triggerScrollYEvent(evnt);
+    $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
+      type: 'table',
+      fixed: '',
+      scrollTop,
+      scrollLeft
+    });
+  },
   /**
    * 纵向 Y 可视渲染处理
    */
-  loadScrollYData(evnt) {
+  loadScrollYData() {
     const {
       mergeList,
       scrollYStore
@@ -6403,13 +6636,12 @@ const Methods = {
     const {
       startIndex,
       endIndex,
-      visibleSize,
-      offsetSize,
-      rowHeight
+      offsetSize
     } = scrollYStore;
-    const scrollBodyElem = evnt.currentTarget || evnt.target;
-    const scrollTop = scrollBodyElem.scrollTop;
-    const toVisibleIndex = Math.floor(scrollTop / rowHeight);
+    const {
+      toVisibleIndex,
+      visibleSize
+    } = handleVirtualYVisible(this);
     const offsetItem = {
       startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize),
       endIndex: toVisibleIndex + visibleSize + offsetSize
@@ -6442,7 +6674,7 @@ const Methods = {
       if (scrollXLoad) {
         const {
           visibleSize: visibleXSize
-        } = computeVirtualX(this);
+        } = handleVirtualXVisible(this);
         const offsetXSize = sXOpts.oSize ? _xeUtils.default.toNumber(sXOpts.oSize) : _dom.browse.msie ? 10 : _dom.browse.edge ? 5 : 0;
         scrollXStore.offsetSize = offsetXSize;
         scrollXStore.visibleSize = visibleXSize;
@@ -6451,12 +6683,14 @@ const Methods = {
       } else {
         this.updateScrollXSpace();
       }
+      calcCellHeight(this);
       // 计算 Y 逻辑
+      const rowHeight = computeRowHeight(this);
+      scrollYStore.rowHeight = rowHeight;
+      this.rowHeight = rowHeight;
       const {
-        rowHeight,
         visibleSize: visibleYSize
-      } = computeVirtualY(this);
-      scrollYStore.rowHeight = rowHeight;
+      } = handleVirtualYVisible(this);
       if (scrollYLoad) {
         const offsetYSize = sYOpts.oSize ? _xeUtils.default.toNumber(sYOpts.oSize) : _dom.browse.msie ? 20 : _dom.browse.edge ? 10 : 0;
         scrollYStore.offsetSize = offsetYSize;
@@ -6466,7 +6700,6 @@ const Methods = {
       } else {
         this.updateScrollYSpace();
       }
-      this.rowHeight = rowHeight;
       this.$nextTick(this.updateStyle);
     });
   },
@@ -6474,9 +6707,18 @@ const Methods = {
     const {
       scrollXLoad,
       visibleColumn,
-      scrollXStore
+      scrollXStore,
+      fullColumnIdData
     } = this;
-    this.tableColumn = scrollXLoad ? visibleColumn.slice(scrollXStore.startIndex, scrollXStore.endIndex) : visibleColumn.slice(0);
+    const tableColumn = scrollXLoad ? visibleColumn.slice(scrollXStore.startIndex, scrollXStore.endIndex) : visibleColumn.slice(0);
+    tableColumn.forEach((column, $index) => {
+      const colid = column.id;
+      const colRest = fullColumnIdData[colid];
+      if (colRest) {
+        colRest.$index = $index;
+      }
+    });
+    this.tableColumn = tableColumn;
   },
   updateScrollXData() {
     // this.tableColumn = []
@@ -6487,6 +6729,7 @@ const Methods = {
   },
   // 更新横向 X 可视渲染上下剩余空间大小
   updateScrollXSpace() {
+    const $xeTable = this;
     const {
       $refs,
       isGroup,
@@ -6496,7 +6739,7 @@ const Methods = {
       scrollXLoad,
       tableWidth,
       scrollbarWidth
-    } = this;
+    } = $xeTable;
     const {
       tableHeader,
       tableBody,
@@ -6531,34 +6774,64 @@ const Methods = {
           }
         });
       });
+      const scrollXSpaceEl = $xeTable.$refs.refScrollXSpaceElem;
+      if (scrollXSpaceEl) {
+        scrollXSpaceEl.style.width = `${tableWidth + scrollbarWidth}px`;
+      }
       this.$nextTick(this.updateStyle);
     }
   },
   updateScrollYData() {
+    const $xeTable = this;
     // this.tableData = []
     this.$nextTick(() => {
       this.handleTableData();
+      calcCellHeight($xeTable);
       this.updateScrollYSpace();
     });
   },
   // 更新纵向 Y 可视渲染上下剩余空间大小
   updateScrollYSpace() {
+    const $xeTable = this;
     const {
+      showOverflow,
       elemStore,
       scrollYStore,
       scrollYLoad,
-      afterFullData
+      afterFullData,
+      fullAllDataRowIdData
     } = this;
     const {
       startIndex,
       rowHeight
     } = scrollYStore;
-    const bodyHeight = afterFullData.length * rowHeight;
-    const topSpaceHeight = Math.max(0, startIndex * rowHeight);
+    let bodyHeight = 0;
+    let topSpaceHeight = 0;
     const containerList = ['main', 'left', 'right'];
     let marginTop = '';
     let ySpaceHeight = '';
     if (scrollYLoad) {
+      if (showOverflow) {
+        bodyHeight = afterFullData.length * rowHeight;
+        topSpaceHeight = Math.max(0, startIndex * rowHeight);
+      } else {
+        for (let i = 0; i < afterFullData.length; i++) {
+          const row = afterFullData[i];
+          const rowid = (0, _util.getRowid)($xeTable, row);
+          const rowRest = fullAllDataRowIdData[rowid];
+          if (rowRest) {
+            bodyHeight += rowRest.height || rowHeight;
+          }
+        }
+        for (let i = 0; i < startIndex; i++) {
+          const row = afterFullData[i];
+          const rowid = (0, _util.getRowid)($xeTable, row);
+          const rowRest = fullAllDataRowIdData[rowid];
+          if (rowRest) {
+            topSpaceHeight += rowRest.height || rowHeight;
+          }
+        }
+      }
       marginTop = `${topSpaceHeight}px`;
       ySpaceHeight = `${bodyHeight}px`;
     }
@@ -6575,6 +6848,10 @@ const Methods = {
         }
       });
     });
+    const scrollYSpaceEl = $xeTable.$refs.refScrollYSpaceElem;
+    if (scrollYSpaceEl) {
+      scrollYSpaceEl.style.height = ySpaceHeight;
+    }
     this.$nextTick(this.updateStyle);
   },
   /**
@@ -6667,36 +6944,52 @@ const Methods = {
    * 手动清除滚动相关信息，还原到初始状态
    */
   clearScroll() {
+    const $xeTable = this;
     const {
       $refs,
       scrollXStore,
       scrollYStore
-    } = this;
+    } = $xeTable;
     const {
       tableBody,
+      tableHeader,
+      leftBody,
       rightBody,
       tableFooter
     } = $refs;
     const tableBodyElem = tableBody ? tableBody.$el : null;
+    const leftBodyElem = leftBody ? leftBody.$el : null;
     const rightBodyElem = rightBody ? rightBody.$el : null;
+    const tableHeaderElem = tableHeader ? tableHeader.$el : null;
     const tableFooterElem = tableFooter ? tableFooter.$el : null;
-    if (rightBodyElem) {
-      (0, _util.restoreScrollListener)(rightBodyElem);
-      rightBodyElem.scrollTop = 0;
-    }
-    if (tableFooterElem) {
-      tableFooterElem.scrollLeft = 0;
+    const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
+    if (xHandleEl) {
+      (0, _dom.setScrollLeft)(xHandleEl, 0);
+    } else {
+      (0, _dom.setScrollLeft)(tableBodyElem, 0);
+      (0, _dom.setScrollLeft)(tableHeaderElem, 0);
+      (0, _dom.setScrollLeft)(tableFooterElem, 0);
     }
-    if (tableBodyElem) {
-      (0, _util.restoreScrollListener)(tableBodyElem);
-      tableBodyElem.scrollTop = 0;
-      tableBodyElem.scrollLeft = 0;
+    const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
+    if (yHandleEl) {
+      (0, _dom.setScrollTop)(yHandleEl, 0);
+    } else {
+      (0, _dom.setScrollTop)(tableBodyElem, 0);
+      (0, _dom.setScrollTop)(leftBodyElem, 0);
+      (0, _dom.setScrollTop)(rightBodyElem, 0);
     }
     scrollXStore.startIndex = 0;
     scrollXStore.endIndex = scrollXStore.visibleSize;
     scrollYStore.startIndex = 0;
     scrollYStore.endIndex = scrollYStore.visibleSize;
-    return this.$nextTick();
+    return $xeTable.$nextTick().then(() => {
+      (0, _dom.setScrollLeft)(tableBodyElem, 0);
+      (0, _dom.setScrollLeft)(tableHeaderElem, 0);
+      (0, _dom.setScrollLeft)(tableFooterElem, 0);
+      (0, _dom.setScrollTop)(tableBodyElem, 0);
+      (0, _dom.setScrollTop)(leftBodyElem, 0);
+      (0, _dom.setScrollTop)(rightBodyElem, 0);
+    });
   },
   /**
    * 更新表尾合计
@@ -6869,6 +7162,14 @@ const Methods = {
     }
     return this.$nextTick();
   },
+  dispatchEvent(type, params, evnt) {
+    const $xeTable = this;
+    $xeTable.$emit(type, createEvent(evnt, {
+      $table: $xeTable,
+      $grid: $xeTable.$xegrid
+    }, params));
+  },
+  // 已废弃，使用 dispatchEvent
   emitEvent(type, params, evnt) {
     this.$emit(type, Object.assign({
       $table: this,