vxe-table 3.9.21 → 3.10.0-beta.0

package/lib/index.umd.js

@@ -2220,9 +2220,9 @@ function getClass(property, params) {
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
-const version = "3.9.20";
+const version = "3.10.0-beta.0";
 core_.VxeUI.version = version;
-core_.VxeUI.tableVersion = "3.9.20";
+core_.VxeUI.tableVersion = version;
 core_.VxeUI.setConfig({
   emptyCell: '　',
   table: {
@@ -2764,7 +2764,7 @@ function isNodeElement(elem) {
 const {
   log: log_log
 } = core_.VxeUI;
-const log_version = `table v${"3.9.20"}`;
+const log_version = `table v${"3.10.0-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
@@ -3019,16 +3019,6 @@ function restoreScrollLocation(_vm, scrollLeft, scrollTop) {
 function toTreePathSeq(path) {
   return path.map((num, i) => i % 2 === 0 ? Number(num) + 1 : '.').join('');
 }
-function removeScrollListener(scrollElem) {
-  if (scrollElem && scrollElem._onscroll) {
-    scrollElem.onscroll = null;
-  }
-}
-function restoreScrollListener(scrollElem) {
-  if (scrollElem && scrollElem._onscroll) {
-    scrollElem.onscroll = scrollElem._onscroll;
-  }
-}
 /**
  * 生成行的唯一主键
  */
@@ -3305,30 +3295,75 @@ function isColumnInfo(column) {
 function createColumn($xeTable, options, renderOptions) {
   return isColumnInfo(options) ? options : new ColumnInfo($xeTable, options, renderOptions);
 }
-function rowToVisible($xetable, row) {
+function rowToVisible($xeTable, row) {
   const {
-    tableBody
-  } = $xetable.$refs;
+    reactData,
+    internalData
+  } = $xeTable;
+  const tableProps = $xeTable;
+  const {
+    showOverflow
+  } = tableProps;
+  const tableBody = $xeTable.$refs.tableBody;
+  const {
+    columnStore,
+    scrollYLoad
+  } = reactData;
+  const {
+    afterFullData,
+    scrollYStore,
+    fullAllDataRowIdData
+  } = internalData;
+  const {
+    leftList,
+    rightList
+  } = columnStore;
   const bodyElem = tableBody ? tableBody.$el : null;
+  const rowid = getRowid($xeTable, row);
+  let offsetFixedLeft = 0;
+  leftList.forEach(item => {
+    offsetFixedLeft += item.renderWidth;
+  });
+  let offsetFixedRight = 0;
+  rightList.forEach(item => {
+    offsetFixedRight += item.renderWidth;
+  });
   if (bodyElem) {
-    const trElem = bodyElem.querySelector(`[rowid="${getRowid($xetable, row)}"]`);
+    const bodyHeight = bodyElem.clientHeight;
+    const bodyScrollTop = bodyElem.scrollTop;
+    const trElem = bodyElem.querySelector(`[rowid="${rowid}"]`);
     if (trElem) {
-      const bodyHeight = bodyElem.clientHeight;
-      const bodySrcollTop = bodyElem.scrollTop;
-      const trOffsetTop = trElem.offsetTop + (trElem.offsetParent ? trElem.offsetParent.offsetTop : 0);
+      const trOffsetParent = trElem.offsetParent;
+      const trOffsetTop = trElem.offsetTop + (trOffsetParent ? trOffsetParent.offsetTop : 0);
       const trHeight = trElem.clientHeight;
       // 检测行是否在可视区中
-      if (trOffsetTop < bodySrcollTop || trOffsetTop > bodySrcollTop + bodyHeight) {
-        // 向上定位
-        return $xetable.scrollTo(null, trOffsetTop);
-      } else if (trOffsetTop + trHeight >= bodyHeight + bodySrcollTop) {
-        // 向下定位
-        return $xetable.scrollTo(null, bodySrcollTop + trHeight);
+      if (trOffsetTop < bodyScrollTop || trOffsetTop > bodyScrollTop + bodyHeight) {
+        return $xeTable.scrollTo(null, trOffsetTop);
+      } else if (trOffsetTop + trHeight >= bodyHeight + bodyScrollTop) {
+        return $xeTable.scrollTo(null, bodyScrollTop + trHeight);
       }
     } else {
-      // 如果是虚拟渲染跨行滚动
-      if ($xetable.scrollYLoad) {
-        return $xetable.scrollTo(null, ($xetable.afterFullData.indexOf(row) - 1) * $xetable.scrollYStore.rowHeight);
+      // 如果是虚拟渲染滚动
+      if (scrollYLoad) {
+        if (showOverflow) {
+          return $xeTable.scrollTo(null, ($xeTable.findRowIndexOf(afterFullData, row) - 1) * scrollYStore.rowHeight);
+        }
+        let scrollTop = 0;
+        const rest = fullAllDataRowIdData[rowid];
+        const rHeight = rest ? rest.height : 0;
+        for (let i = 0; i < afterFullData.length; i++) {
+          const currRow = afterFullData[i];
+          const currRowid = getRowid($xeTable, currRow);
+          if (currRow === row || currRowid === rowid) {
+            break;
+          }
+          const rest = fullAllDataRowIdData[currRowid];
+          scrollTop += rest ? rest.height : 0;
+        }
+        if (scrollTop < bodyScrollTop) {
+          return $xeTable.scrollTo(null, scrollTop - offsetFixedLeft - 1);
+        }
+        return $xeTable.scrollTo(null, scrollTop + rHeight - (bodyHeight - offsetFixedRight - 1));
       }
     }
   }
@@ -3340,14 +3375,15 @@ function colToVisible($xeTable, column) {
     scrollXLoad,
     visibleColumn
   } = $xeTable;
-  const {
-    tableBody
-  } = $xeTable.$refs;
+  const tableBody = $xeTable.$refs.tableBody;
   const {
     leftList,
     rightList
   } = columnStore;
   const bodyElem = tableBody ? tableBody.$el : null;
+  if (column.fixed) {
+    return Promise.resolve();
+  }
   let offsetFixedLeft = 0;
   leftList.forEach(item => {
     offsetFixedLeft += item.renderWidth;
@@ -3358,15 +3394,15 @@ function colToVisible($xeTable, column) {
   });
   if (bodyElem) {
     const bodyWidth = bodyElem.clientWidth;
-    const bodySrcollLeft = bodyElem.scrollLeft;
+    const bodyScrollLeft = bodyElem.scrollLeft;
     const tdElem = bodyElem.querySelector(`.${column.id}`);
     if (tdElem) {
       const tdOffsetLeft = tdElem.offsetLeft + (tdElem.offsetParent ? tdElem.offsetParent.offsetLeft : 0);
       const cellWidth = tdElem.clientWidth;
       // 检测是否在可视区中
-      if (tdOffsetLeft < bodySrcollLeft + offsetFixedLeft) {
+      if (tdOffsetLeft < bodyScrollLeft + offsetFixedLeft) {
         return $xeTable.scrollTo(tdOffsetLeft - offsetFixedLeft - 1);
-      } else if (tdOffsetLeft + cellWidth - bodySrcollLeft > bodyWidth - offsetFixedRight) {
+      } else if (tdOffsetLeft + cellWidth - bodyScrollLeft > bodyWidth - offsetFixedRight) {
         return $xeTable.scrollTo(tdOffsetLeft + cellWidth - (bodyWidth - offsetFixedRight - 1));
       }
     } else {
@@ -3374,13 +3410,13 @@ function colToVisible($xeTable, column) {
       if (scrollXLoad) {
         let scrollLeft = 0;
         const cellWidth = column.renderWidth;
-        for (let index = 0; index < visibleColumn.length; index++) {
-          if (visibleColumn[index] === column) {
+        for (let i = 0; i < visibleColumn.length; i++) {
+          if (visibleColumn[i] === column) {
             break;
           }
-          scrollLeft += visibleColumn[index].renderWidth;
+          scrollLeft += visibleColumn[i].renderWidth;
         }
-        if (scrollLeft < bodySrcollLeft) {
+        if (scrollLeft < bodyScrollLeft) {
           return $xeTable.scrollTo(scrollLeft - offsetFixedLeft - 1);
         }
         return $xeTable.scrollTo(scrollLeft + cellWidth - (bodyWidth - offsetFixedRight - 1));
@@ -4674,7 +4710,8 @@ const {
   getI18n: methods_getI18n,
   renderer: methods_renderer,
   formats: methods_formats,
-  interceptor: methods_interceptor
+  interceptor: methods_interceptor,
+  createEvent
 } = core_.VxeUI;
 const isWebkit = browse['-webkit'] && !browse.edge;
 const debounceScrollYDuration = browse.msie ? 80 : 20;
@@ -4743,7 +4780,7 @@ function handleReserveRow(_vm, reserveRowMap) {
   });
   return reserveList;
 }
-function computeVirtualX(_vm) {
+function handleVirtualXVisible(_vm) {
   const {
     $refs,
     visibleColumn
@@ -4783,21 +4820,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) {
@@ -4809,14 +4844,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 = 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
   };
 }
@@ -4934,7 +5010,7 @@ function clearAllSort(_vm) {
     column.order = null;
   });
 }
-function calcHeight(_vm, key) {
+function calcTableHeight(_vm, key) {
   const {
     parentHeight
   } = _vm;
@@ -4955,6 +5031,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 = 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,
@@ -5199,9 +5298,9 @@ const Methods = {
         if (!(this.height || this.maxHeight)) {
           errLog('vxe.error.reqProp', ['table.height | table.max-height | table.scroll-y={enabled: false}']);
         }
-        if (!this.showOverflow) {
-          warnLog('vxe.error.reqProp', ['table.show-overflow']);
-        }
+        // if (!this.showOverflow) {
+        //   warnLog('vxe.error.reqProp', ['table.show-overflow'])
+        // }
         if (this.spanMethod) {
           warnLog('vxe.error.scrollErrProp', ['table.span-method']);
         }
@@ -5442,7 +5541,8 @@ const Methods = {
           $index: -1,
           items,
           parent,
-          level
+          level,
+          height: 0
         };
       }
       if (isSource) {
@@ -5540,7 +5640,8 @@ const Methods = {
           $index: -1,
           items,
           parent: parentRow,
-          level: parentLevel + nodes.length
+          level: parentLevel + nodes.length,
+          height: 0
         };
         fullDataRowIdData[rowid] = rest;
         fullAllDataRowIdData[rowid] = rest;
@@ -5591,7 +5692,8 @@ const Methods = {
         colid,
         index,
         items,
-        parent
+        parent: parent || null,
+        width: 0
       };
       if (field) {
         if (true) {
@@ -5702,14 +5804,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
         };
       }
     }
@@ -5725,15 +5827,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;
@@ -6083,13 +6187,13 @@ const Methods = {
       } = $xeTable;
       const rowid = 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;
           }
@@ -6541,11 +6645,11 @@ const Methods = {
     if (treeConfig) {
       external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(afterTreeFullData, (row, index, items, path) => {
         const rowid = 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,
@@ -6556,7 +6660,8 @@ const Methods = {
             _index: index,
             items: [],
             parent: null,
-            level: 0
+            level: 0,
+            height: 0
           };
           fullAllDataRowIdData[rowid] = rest;
           fullDataRowIdData[rowid] = rest;
@@ -6568,11 +6673,11 @@ const Methods = {
     } else {
       afterFullData.forEach((row, index) => {
         const rowid = 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,
@@ -6583,7 +6688,8 @@ const Methods = {
             _index: index,
             items: [],
             parent: null,
-            level: 0
+            level: 0,
+            height: 0
           };
           fullAllDataRowIdData[rowid] = rest;
           fullDataRowIdData[rowid] = rest;
@@ -7158,7 +7264,7 @@ const Methods = {
       }
       const {
         visibleSize
-      } = computeVirtualX(this);
+      } = handleVirtualXVisible(this);
       scrollXStore.startIndex = 0;
       scrollXStore.endIndex = visibleSize;
       scrollXStore.visibleSize = visibleSize;
@@ -7172,9 +7278,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;
@@ -7285,36 +7391,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
@@ -7325,9 +7421,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;
@@ -7354,6 +7456,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();
@@ -7366,12 +7471,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;
@@ -7506,12 +7618,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 = 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,
@@ -7533,6 +7674,7 @@ const Methods = {
       scrollbarWidth,
       scrollXLoad,
       scrollYLoad,
+      overflowX,
       cellOffsetWidth,
       columnStore,
       elemStore,
@@ -7547,7 +7689,7 @@ const Methods = {
       footerSpanMethod,
       isAllOverflow,
       visibleColumn
-    } = this;
+    } = $xeTable;
     const containerList = ['main', 'left', 'right'];
     const emptyPlaceholderElem = $refs.emptyPlaceholder;
     const bodyWrapperElem = elemStore['main-body-wrapper'];
@@ -7560,6 +7702,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'];
@@ -7724,7 +7890,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,
@@ -7790,22 +7957,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) {
           addClass(leftContainer, 'scrolling--middle');
         } else {
           removeClass(leftContainer, 'scrolling--middle');
         }
       }
       if (rightContainer) {
-        if (bodyElem.clientWidth < bodyElem.scrollWidth - Math.ceil(bodyElem.scrollLeft)) {
+        if (bodtTargetEl.clientWidth < bodtTargetEl.scrollWidth - Math.ceil(bodtTargetEl.scrollLeft)) {
           addClass(rightContainer, 'scrolling--middle');
         } else {
           removeClass(rightContainer, 'scrolling--middle');
@@ -10214,8 +10384,8 @@ const Methods = {
     const {
       fullAllDataRowIdData
     } = this;
-    const rest = fullAllDataRowIdData[getRowid($xeTable, row)];
-    return rest && !!rest.expandLoaded;
+    const rowRest = fullAllDataRowIdData[getRowid($xeTable, row)];
+    return rowRest && !!rowRest.expandLoaded;
   },
   clearRowExpandLoaded(row) {
     const $xeTable = this;
@@ -10228,9 +10398,9 @@ const Methods = {
       lazy
     } = expandOpts;
     const rowid = 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 = {
         ...rowExpandLazyLoadedMaps
       };
@@ -10372,7 +10542,7 @@ const Methods = {
           fullAllDataRowIdData
         } = this;
         const rowid = getRowid($xeTable, row);
-        const rest = fullAllDataRowIdData[rowid];
+        const rowRest = fullAllDataRowIdData[rowid];
         rowExpandLazyLoadedMaps[rowid] = row;
         loadMethod({
           $table: $xeTable,
@@ -10383,10 +10553,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
@@ -10450,8 +10620,8 @@ const Methods = {
         validRows.forEach(row => {
           const rowid = 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 {
@@ -10571,8 +10741,8 @@ const Methods = {
     const {
       fullAllDataRowIdData
     } = this;
-    const rest = fullAllDataRowIdData[getRowid($xeTable, row)];
-    return rest && !!rest.treeLoaded;
+    const rowRest = fullAllDataRowIdData[getRowid($xeTable, row)];
+    return rowRest && !!rowRest.treeLoaded;
   },
   clearTreeExpandLoaded(row) {
     const $xeTable = this;
@@ -10586,9 +10756,9 @@ const Methods = {
       lazy
     } = treeOpts;
     const rowid = 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];
       }
@@ -10728,13 +10898,13 @@ const Methods = {
           fullAllDataRowIdData
         } = this;
         const rowid = 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];
           }
@@ -10764,7 +10934,7 @@ const Methods = {
           const {
             treeExpandLazyLoadedMaps
           } = this;
-          rest.treeLoaded = false;
+          rowRest.treeLoaded = false;
           if (treeExpandLazyLoadedMaps[rowid]) {
             delete treeExpandLazyLoadedMaps[rowid];
           }
@@ -10855,8 +11025,8 @@ const Methods = {
       validRows.forEach(row => {
         const rowid = 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));
@@ -11020,7 +11190,7 @@ const Methods = {
     const {
       toVisibleIndex,
       visibleSize
-    } = computeVirtualX(this);
+    } = handleVirtualXVisible(this);
     const offsetItem = {
       startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize),
       endIndex: toVisibleIndex + visibleSize + offsetSize
@@ -11039,10 +11209,47 @@ 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', {
+      bodyHeight,
+      bodyWidth,
+      scrollHeight,
+      scrollWidth,
+      isX: isRollX,
+      isY: isRollY,
+      ...params
+    }, evnt);
+  },
   /**
    * 纵向 Y 可视渲染事件处理
    */
-  triggerScrollYEvent(evnt) {
+  triggerScrollYEvent() {
     const {
       scrollYStore
     } = this;
@@ -11053,21 +11260,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: external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().debounce(function (evnt) {
-    this.loadScrollYData(evnt);
+  debounceScrollYData: external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_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();
+    setScrollLeft(bodyElem, scrollLeft);
+    setScrollLeft(headerElem, scrollLeft);
+    setScrollLeft(footerElem, scrollLeft);
+    $xeTable.triggerScrollXEvent(evnt);
+    $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
+      type: 'table',
+      fixed: '',
+      scrollTop,
+      scrollLeft
+    });
+  },
+  debounceScrollYCalculate: external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_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();
+    setScrollTop(bodyElem, scrollTop);
+    setScrollTop(leftElem, scrollTop);
+    setScrollTop(rightElem, scrollTop);
+    $xeTable.triggerScrollYEvent(evnt);
+    $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
+      type: 'table',
+      fixed: '',
+      scrollTop,
+      scrollLeft
+    });
+  },
   /**
    * 纵向 Y 可视渲染处理
    */
-  loadScrollYData(evnt) {
+  loadScrollYData() {
     const {
       mergeList,
       scrollYStore
@@ -11075,13 +11345,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
@@ -11114,7 +11383,7 @@ const Methods = {
       if (scrollXLoad) {
         const {
           visibleSize: visibleXSize
-        } = computeVirtualX(this);
+        } = handleVirtualXVisible(this);
         const offsetXSize = 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;
         scrollXStore.offsetSize = offsetXSize;
         scrollXStore.visibleSize = visibleXSize;
@@ -11123,12 +11392,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 ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(sYOpts.oSize) : browse.msie ? 20 : browse.edge ? 10 : 0;
         scrollYStore.offsetSize = offsetYSize;
@@ -11138,7 +11409,6 @@ const Methods = {
       } else {
         this.updateScrollYSpace();
       }
-      this.rowHeight = rowHeight;
       this.$nextTick(this.updateStyle);
     });
   },
@@ -11146,9 +11416,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 = []
@@ -11159,6 +11438,7 @@ const Methods = {
   },
   // 更新横向 X 可视渲染上下剩余空间大小
   updateScrollXSpace() {
+    const $xeTable = this;
     const {
       $refs,
       isGroup,
@@ -11168,7 +11448,7 @@ const Methods = {
       scrollXLoad,
       tableWidth,
       scrollbarWidth
-    } = this;
+    } = $xeTable;
     const {
       tableHeader,
       tableBody,
@@ -11203,34 +11483,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 = 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 = getRowid($xeTable, row);
+          const rowRest = fullAllDataRowIdData[rowid];
+          if (rowRest) {
+            topSpaceHeight += rowRest.height || rowHeight;
+          }
+        }
+      }
       marginTop = `${topSpaceHeight}px`;
       ySpaceHeight = `${bodyHeight}px`;
     }
@@ -11247,6 +11557,10 @@ const Methods = {
         }
       });
     });
+    const scrollYSpaceEl = $xeTable.$refs.refScrollYSpaceElem;
+    if (scrollYSpaceEl) {
+      scrollYSpaceEl.style.height = ySpaceHeight;
+    }
     this.$nextTick(this.updateStyle);
   },
   /**
@@ -11339,36 +11653,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) {
-      restoreScrollListener(rightBodyElem);
-      rightBodyElem.scrollTop = 0;
-    }
-    if (tableFooterElem) {
-      tableFooterElem.scrollLeft = 0;
+    const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
+    if (xHandleEl) {
+      setScrollLeft(xHandleEl, 0);
+    } else {
+      setScrollLeft(tableBodyElem, 0);
+      setScrollLeft(tableHeaderElem, 0);
+      setScrollLeft(tableFooterElem, 0);
     }
-    if (tableBodyElem) {
-      restoreScrollListener(tableBodyElem);
-      tableBodyElem.scrollTop = 0;
-      tableBodyElem.scrollLeft = 0;
+    const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
+    if (yHandleEl) {
+      setScrollTop(yHandleEl, 0);
+    } else {
+      setScrollTop(tableBodyElem, 0);
+      setScrollTop(leftBodyElem, 0);
+      setScrollTop(rightBodyElem, 0);
     }
     scrollXStore.startIndex = 0;
     scrollXStore.endIndex = scrollXStore.visibleSize;
     scrollYStore.startIndex = 0;
     scrollYStore.endIndex = scrollYStore.visibleSize;
-    return this.$nextTick();
+    return $xeTable.$nextTick().then(() => {
+      setScrollLeft(tableBodyElem, 0);
+      setScrollLeft(tableHeaderElem, 0);
+      setScrollLeft(tableFooterElem, 0);
+      setScrollTop(tableBodyElem, 0);
+      setScrollTop(leftBodyElem, 0);
+      setScrollTop(rightBodyElem, 0);
+    });
   },
   /**
    * 更新表尾合计
@@ -11541,6 +11871,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,
@@ -11686,13 +12024,13 @@ function renderLine(h, _vm, $xetable, params) {
 function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, columns, items) {
   const {
     $listeners: tableListeners,
+    fullAllDataRowIdData,
     afterFullData,
     tableData,
     height,
     columnKey,
     overflowX,
     sYOpts,
-    scrollXLoad,
     scrollYLoad,
     highlightCurrentRow,
     showOverflow: allColumnOverflow,
@@ -11748,12 +12086,13 @@ function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, ro
   const isEdit = isEnableConf(editRender);
   let fixedHiddenColumn = fixedType ? column.fixed !== fixedType : column.fixed && overflowX;
   const cellOverflow = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isUndefined(showOverflow) || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNull(showOverflow) ? allColumnOverflow : showOverflow;
-  let showEllipsis = cellOverflow === 'ellipsis';
+  const showEllipsis = cellOverflow === 'ellipsis';
   const showTitle = cellOverflow === 'title';
   const showTooltip = cellOverflow === true || cellOverflow === 'tooltip';
-  let hasEllipsis = showTitle || showTooltip || showEllipsis;
+  const hasEllipsis = showTitle || showTooltip || showEllipsis;
   let isDirty;
   const tdOns = {};
+  const rest = fullAllDataRowIdData[rowid];
   const cellAlign = align || (compConf ? compConf.tableCellAlign : '') || allAlign;
   const errorValidItem = validErrorMaps[`${rowid}:${column.id}`];
   const showValidTip = editRules && validOpts.showMessage && (validOpts.message === 'default' ? height || tableData.length > 1 : validOpts.message === 'inline');
@@ -11785,10 +12124,6 @@ function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, ro
     data: tableData,
     items
   };
-  // 虚拟滚动不支持动态高度
-  if ((scrollXLoad || scrollYLoad) && !hasEllipsis) {
-    showEllipsis = hasEllipsis = true;
-  }
   // hover 进入事件
   if (showTitle || showTooltip || showAllTip || bindMouseenter || tooltipConfig) {
     tdOns.mouseenter = evnt => {
@@ -11948,7 +12283,7 @@ function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, ro
     key: columnKey || columnOpts.useKey ? column.id : $columnIndex,
     attrs,
     style: Object.assign({
-      height: hasEllipsis && (scrollYRHeight || rowHeight) ? `${scrollYRHeight || rowHeight}px` : ''
+      height: hasEllipsis && (scrollYRHeight || rowHeight) ? `${scrollYRHeight || rowHeight}px` : scrollYLoad ? `${rest.height || scrollYRHeight || rowHeight}px` : ''
     }, external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(compCellStyle) ? compCellStyle(params) : compCellStyle, external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(cellStyle) ? cellStyle(params) : cellStyle),
     on: tdOns
   }, tdVNs);
@@ -12112,45 +12447,6 @@ function renderRows(h, _vm, $xetable, fixedType, tableData, tableColumn) {
   });
   return rows;
 }
-/**
- * 同步滚动条
- */
-let scrollProcessTimeout;
-function syncBodyScroll(_vm, fixedType, scrollTop, elem1, elem2) {
-  if (elem1 || elem2) {
-    if (elem1) {
-      removeScrollListener(elem1);
-      elem1.scrollTop = scrollTop;
-    }
-    if (elem2) {
-      removeScrollListener(elem2);
-      elem2.scrollTop = scrollTop;
-    }
-    clearTimeout(scrollProcessTimeout);
-    scrollProcessTimeout = setTimeout(() => {
-      // const { tableBody, leftBody, rightBody } = _vm.$refs
-      // const bodyElem = tableBody.$el
-      // const leftElem = leftBody ? leftBody.$el : null
-      // const rightElem = rightBody ? rightBody.$el : null
-      restoreScrollListener(elem1);
-      restoreScrollListener(elem2);
-      // 检查滚动条是的同步
-      // let targetTop = bodyElem.scrollTop
-      // if (fixedType === 'left') {
-      //   if (leftElem) {
-      //     targetTop = leftElem.scrollTop
-      //   }
-      // } else if (fixedType === 'right') {
-      //   if (rightElem) {
-      //     targetTop = rightElem.scrollTop
-      //   }
-      // }
-      // setScrollTop(bodyElem, targetTop)
-      // setScrollTop(leftElem, targetTop)
-      // setScrollTop(rightElem, targetTop)
-    }, 300);
-  }
-}
 /* harmony default export */ var body = ({
   name: 'VxeTableBody',
   props: {
@@ -12186,17 +12482,9 @@ function syncBodyScroll(_vm, fixedType, scrollTop, elem1, elem2) {
     elemStore[`${prefix}xSpace`] = $refs.xSpace;
     elemStore[`${prefix}ySpace`] = $refs.ySpace;
     elemStore[`${prefix}emptyBlock`] = $refs.emptyBlock;
-    if (this.$el) {
-      this.$el.onscroll = this.scrollEvent;
-      this.$el._onscroll = this.scrollEvent;
-    }
   },
   beforeDestroy() {
     clearTimeout(this.wheelTime);
-    if (this.$el) {
-      this.$el._onscroll = null;
-      this.$el.onscroll = null;
-    }
   },
   destroyed() {
     const {
@@ -12284,9 +12572,11 @@ function syncBodyScroll(_vm, fixedType, scrollTop, elem1, elem2) {
       attrs: {
         xid: tId
       },
-      on: scrollYLoad && sYOpts.mode === 'wheel' ? {
+      on: Object.assign({
+        scroll: this.scrollEvent
+      }, scrollYLoad && sYOpts.mode === 'wheel' ? {
         wheel: this.wheelEvent
-      } : {}
+      } : null)
     }, [fixedType ? _e() : h('div', {
       class: 'vxe-body--x-space',
       ref: 'xSpace'
@@ -12362,89 +12652,68 @@ function syncBodyScroll(_vm, fixedType, scrollTop, elem1, elem2) {
     scrollEvent(evnt) {
       const {
         $el: scrollBodyElem,
-        $parent: $xetable,
+        $parent: $xeTable,
         fixedType
       } = this;
       const {
         $refs,
-        elemStore,
-        highlightHoverRow,
-        scrollXLoad,
-        scrollYLoad,
         lastScrollTop,
-        lastScrollLeft,
-        rowOpts
-      } = $xetable;
+        lastScrollLeft
+      } = $xeTable;
       const {
         tableHeader,
         tableBody,
         leftBody,
         rightBody,
-        tableFooter,
-        validTip
+        tableFooter
       } = $refs;
       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 bodyYElem = elemStore['main-body-ySpace'];
-      const bodyXElem = elemStore['main-body-xSpace'];
-      const bodyHeight = scrollYLoad && bodyYElem ? bodyYElem.clientHeight : bodyElem.clientHeight;
-      const bodyWidth = scrollXLoad && bodyXElem ? bodyXElem.clientWidth : bodyElem.clientWidth;
-      let scrollTop = scrollBodyElem.scrollTop;
+      const scrollTop = scrollBodyElem.scrollTop;
       const scrollLeft = bodyElem.scrollLeft;
       const isRollX = scrollLeft !== lastScrollLeft;
       const isRollY = scrollTop !== lastScrollTop;
-      $xetable.lastScrollTop = scrollTop;
-      $xetable.lastScrollLeft = scrollLeft;
-      $xetable.lastScrollTime = Date.now();
-      if (rowOpts.isHover || highlightHoverRow) {
-        $xetable.clearHoverRow();
-      }
-      if (leftElem && fixedType === 'left') {
-        scrollTop = leftElem.scrollTop;
-        syncBodyScroll($xetable, fixedType, scrollTop, bodyElem, rightElem);
-      } else if (rightElem && fixedType === 'right') {
-        scrollTop = rightElem.scrollTop;
-        syncBodyScroll($xetable, fixedType, scrollTop, bodyElem, leftElem);
-      } else {
-        if (isRollX) {
-          if (headerElem) {
-            headerElem.scrollLeft = bodyElem.scrollLeft;
-          }
-          if (footerElem) {
-            footerElem.scrollLeft = bodyElem.scrollLeft;
-          }
-        }
-        if (leftElem || rightElem) {
-          $xetable.checkScrolling();
-          if (isRollY) {
-            syncBodyScroll($xetable, fixedType, scrollTop, leftElem, rightElem);
-          }
+      const xHandleEl = $refs.refScrollXHandleElem;
+      const yHandleEl = $refs.refScrollYHandleElem;
+      if (yHandleEl) {
+        yHandleEl.scrollTop = scrollTop;
+      } else if (isRollY) {
+        $xeTable.lastScrollTop = scrollTop;
+        $xeTable.lastScrollLeft = scrollLeft;
+        if (leftElem && fixedType === 'left') {
+          setScrollTop(bodyElem, scrollTop);
+          setScrollTop(rightElem, scrollTop);
+        } else if (rightElem && fixedType === 'right') {
+          setScrollTop(bodyElem, scrollTop);
+          setScrollTop(leftElem, scrollTop);
+        } else {
+          setScrollTop(leftElem, scrollTop);
+          setScrollTop(rightElem, scrollTop);
         }
+        $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
+          type: renderType,
+          fixed: fixedType,
+          scrollTop,
+          scrollLeft
+        });
       }
-      if (scrollXLoad && isRollX) {
-        $xetable.triggerScrollXEvent(evnt);
-      }
-      if (scrollYLoad && isRollY) {
-        $xetable.triggerScrollYEvent(evnt);
-      }
-      if (isRollX && validTip && validTip.visible) {
-        validTip.updatePlacement();
+      if (xHandleEl) {
+        xHandleEl.scrollLeft = scrollLeft;
+      } else if (isRollX) {
+        $xeTable.lastScrollTop = scrollTop;
+        $xeTable.lastScrollLeft = scrollLeft;
+        setScrollLeft(headerElem, scrollLeft);
+        setScrollLeft(footerElem, scrollLeft);
+        $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
+          type: renderType,
+          fixed: fixedType,
+          scrollTop,
+          scrollLeft
+        });
       }
-      $xetable.emitEvent('scroll', {
-        type: renderType,
-        fixed: fixedType,
-        scrollTop,
-        scrollLeft,
-        scrollHeight: bodyElem.scrollHeight,
-        scrollWidth: bodyElem.scrollWidth,
-        bodyHeight,
-        bodyWidth,
-        isX: isRollX,
-        isY: isRollY
-      }, evnt);
     },
     handleWheel(evnt, isTopWheel, deltaTop, isRollX, isRollY) {
       const {
@@ -12956,7 +13225,7 @@ const cellType = 'header';
 
 
 
-const footer_cellType = 'footer';
+const footer_renderType = 'footer';
 const {
   renderer: footer_renderer
 } = core_.VxeUI;
@@ -13120,7 +13389,7 @@ function mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex) {
         _rowIndex,
         $rowIndex,
         fixed: fixedType,
-        type: footer_cellType
+        type: footer_renderType
       };
       return h('tr', {
         class: ['vxe-footer--row', footerRowClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(footerRowClassName) ? footerRowClassName(rowParams) : footerRowClassName : ''],
@@ -13166,7 +13435,7 @@ function mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex) {
           itemIndex,
           items: list,
           fixed: fixedType,
-          type: footer_cellType,
+          type: footer_renderType,
           data: footerTableData
         };
         // 虚拟滚动不支持动态高度
@@ -13270,48 +13539,39 @@ function mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex) {
      */
     scrollEvent(evnt) {
       const {
-        $parent: $xetable,
+        $parent: $xeTable,
         fixedType
       } = this;
       const {
-        $refs,
-        scrollXLoad,
-        triggerScrollXEvent,
-        lastScrollLeft
-      } = $xetable;
+        $refs
+      } = $xeTable;
       const {
         tableHeader,
         tableBody,
-        tableFooter,
-        validTip
+        tableFooter
       } = $refs;
       const headerElem = tableHeader ? tableHeader.$el : null;
       const footerElem = tableFooter ? tableFooter.$el : null;
       const bodyElem = tableBody.$el;
       const scrollLeft = footerElem ? footerElem.scrollLeft : 0;
-      const isX = scrollLeft !== lastScrollLeft;
-      $xetable.lastScrollLeft = scrollLeft;
-      $xetable.lastScrollTime = Date.now();
-      if (headerElem) {
-        headerElem.scrollLeft = scrollLeft;
-      }
-      if (bodyElem) {
-        bodyElem.scrollLeft = scrollLeft;
-      }
-      if (scrollXLoad && isX) {
-        triggerScrollXEvent(evnt);
-      }
-      if (isX && validTip && validTip.visible) {
-        validTip.updatePlacement();
+      const xHandleEl = $refs.refScrollXHandleElem;
+      if (xHandleEl) {
+        xHandleEl.scrollLeft = scrollLeft;
+      } else {
+        const isRollX = true;
+        const isRollY = false;
+        const scrollTop = bodyElem.scrollTop;
+        $xeTable.lastScrollLeft = scrollLeft;
+        $xeTable.lastScrollTime = Date.now();
+        setScrollLeft(headerElem, scrollLeft);
+        setScrollLeft(bodyElem, scrollLeft);
+        $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
+          type: footer_renderType,
+          fixed: fixedType,
+          scrollTop,
+          scrollLeft
+        });
       }
-      $xetable.emitEvent('scroll', {
-        type: footer_cellType,
-        fixed: fixedType,
-        scrollTop: bodyElem.scrollTop,
-        scrollLeft,
-        isX,
-        isY: false
-      }, evnt);
     }
   }
 });
@@ -16272,7 +16532,8 @@ function insertTreeRow(_vm, newRecords, isAppend) {
         $index: -1,
         items: parentChilds,
         parent: parentRow,
-        level: parentLevel + 1
+        level: parentLevel + 1,
+        height: 0
       };
       fullDataRowIdData[rowid] = rest;
       fullAllDataRowIdData[rowid] = rest;
@@ -16293,7 +16554,8 @@ function insertTreeRow(_vm, newRecords, isAppend) {
         $index: -1,
         items: tableFullTreeData,
         parent: null,
-        level: 0
+        level: 0,
+        height: 0
       };
       fullDataRowIdData[rowid] = rest;
       fullAllDataRowIdData[rowid] = rest;
@@ -16400,7 +16662,8 @@ function handleInsertRowAt(_vm, records, row, isInsertNextRow) {
               $index: -1,
               items: parentMapChilds,
               parent: parentRow,
-              level: parentLevel + 1
+              level: parentLevel + 1,
+              height: 0
             };
             fullDataRowIdData[rowid] = rest;
             fullAllDataRowIdData[rowid] = rest;
@@ -20148,7 +20411,8 @@ const {
   renderer: table_renderer,
   globalResize: table_globalResize,
   globalEvents: table_globalEvents,
-  globalMixins: table_globalMixins
+  globalMixins: table_globalMixins,
+  renderEmptyElement: table_renderEmptyElement
 } = core_.VxeUI;
 /**
  * 渲染浮固定列
@@ -20204,7 +20468,7 @@ function renderFixed(h, $xetable, fixedType) {
     ref: `${fixedType}Footer`
   }) : _e()]);
 }
-function renderEmptyContenet(h, _vm) {
+function renderEmptyBody(h, _vm) {
   const {
     $scopedSlots,
     emptyOpts
@@ -20781,6 +21045,20 @@ function handleUupdateResize(_vm) {
       }
       return false;
     },
+    computeVirtualScrollBars() {
+      const $xeTable = this;
+      const reactData = $xeTable;
+      const {
+        overflowX,
+        scrollXLoad,
+        overflowY,
+        scrollYLoad
+      } = reactData;
+      return {
+        x: overflowX && scrollXLoad,
+        y: overflowY && scrollYLoad
+      };
+    },
     tabsResizeFlag() {
       const $xeTable = this;
       const $xeTabs = $xeTable.$xeTabs;
@@ -21183,6 +21461,7 @@ function handleUupdateResize(_vm) {
     // 使用已安装的组件，如果未安装则不渲染
     const VxeUILoadingComponent = core_.VxeUI.getComponent('VxeLoading');
     const VxeUITooltipComponent = core_.VxeUI.getComponent('VxeTooltip');
+    const $xeTable = this;
     const {
       _e,
       $scopedSlots,
@@ -21226,13 +21505,14 @@ function handleUupdateResize(_vm) {
       checkboxOpts,
       loadingOpts,
       editRules
-    } = this;
+    } = $xeTable;
     const {
       leftList,
       rightList
     } = columnStore;
     const currLoading = this._isLoading || loading;
     const vSize = computeSize;
+    const virtualScrollBars = $xeTable.computeVirtualScrollBars;
     return h('div', {
       class: ['vxe-table', 'vxe-table--render-default', `tid_${tId}`, vSize ? `size--${vSize}` : '', `border--${tableBorder}`, {
         [`valid-msg--${validOpts.msgMode}`]: !!editRules,
@@ -21276,6 +21556,7 @@ function handleUupdateResize(_vm) {
       class: 'vxe-table-slots',
       ref: 'hideColumn'
     }, this.$slots.default), h('div', {
+      key: 'tw',
       class: 'vxe-table--render-wrapper'
     }, [h('div', {
       class: 'vxe-table--main-wrapper'
@@ -21315,34 +21596,55 @@ function handleUupdateResize(_vm) {
       }
     }) : _e()]), h('div', {
       class: 'vxe-table--fixed-wrapper'
-    }, [
-    /**
-     * 左侧固定区域
-     */
-    leftList && leftList.length && overflowX ? renderFixed(h, this, 'left') : _e(),
-    /**
-     * 右侧固定区域
-     */
-    rightList && rightList.length && overflowX ? renderFixed(h, this, 'right') : _e()])]),
+    }, [leftList && leftList.length && overflowX ? renderFixed(h, this, 'left') : _e(), rightList && rightList.length && overflowX ? renderFixed(h, this, 'right') : _e()])]), virtualScrollBars.x ? h('div', {
+      key: 'vx',
+      ref: 'refScrollXVirtualElem',
+      class: 'vxe-table--scroll-x-virtual'
+    }, [h('div', {
+      ref: 'refScrollXHandleElem',
+      class: 'vxe-table--scroll-x-handle',
+      on: {
+        scroll: $xeTable.scrollXEvent
+      }
+    }, [h('div', {
+      ref: 'refScrollXSpaceElem',
+      class: 'vxe-table--scroll-x-space'
+    })])]) : table_renderEmptyElement($xeTable), virtualScrollBars.y ? h('div', {
+      key: 'vy',
+      ref: 'refScrollYVirtualElem',
+      class: 'vxe-table--scroll-y-virtual'
+    }, [h('div', {
+      ref: 'refScrollYHandleElem',
+      class: 'vxe-table--scroll-y-handle',
+      on: {
+        scroll: $xeTable.scrollYEvent
+      }
+    }, [h('div', {
+      ref: 'refScrollYSpaceElem',
+      class: 'vxe-table--scroll-x-space'
+    })])]) : table_renderEmptyElement($xeTable),
     /**
      * 空数据
      */
     h('div', {
+      key: 'tn',
       ref: 'emptyPlaceholder',
       class: 'vxe-table--empty-placeholder'
     }, [h('div', {
       class: 'vxe-table--empty-content'
-    }, renderEmptyContenet(h, this))]),
+    }, renderEmptyBody(h, this))]),
     /**
      * 边框线
      */
     h('div', {
+      key: 'tl',
       class: 'vxe-table--border-line'
     }),
     /**
      * 列宽线
      */
     h('div', {
+      key: 'cl',
       class: 'vxe-table--resizable-bar',
       style: overflowX ? {
         'padding-bottom': `${scrollbarHeight}px`
@@ -21353,6 +21655,7 @@ function handleUupdateResize(_vm) {
      * 加载中
      */
     VxeUILoadingComponent ? h(VxeUILoadingComponent, {
+      key: 'lg',
       class: 'vxe-table--loading',
       props: {
         value: currLoading,
@@ -21364,6 +21667,7 @@ function handleUupdateResize(_vm) {
      * 自定义列
      */
     initStore.custom ? h(panel, {
+      key: 'cs',
       ref: 'customWrapper',
       props: {
         customStore
@@ -21373,6 +21677,7 @@ function handleUupdateResize(_vm) {
      * 筛选
      */
     initStore.filter ? h(filter_panel, {
+      key: 'tf',
       ref: 'filterWrapper',
       props: {
         filterStore
@@ -21382,6 +21687,7 @@ function handleUupdateResize(_vm) {
      * 导入
      */
     initStore.import && this.importConfig ? h(import_panel, {
+      key: 'it',
       props: {
         defaultOptions: this.importParams,
         storeData: this.importStore
@@ -21391,6 +21697,7 @@ function handleUupdateResize(_vm) {
      * 导出
      */
     initStore.export && (this.exportConfig || this.printConfig) ? h(export_panel, {
+      key: 'et',
       props: {
         defaultOptions: this.exportParams,
         storeData: this.exportStore
@@ -21400,6 +21707,7 @@ function handleUupdateResize(_vm) {
      * 快捷菜单
      */
     ctxMenuStore.visible && this.isCtxMenu ? h(menu_panel, {
+      key: 'tm',
       ref: 'ctxWrapper',
       props: {
         ctxMenuStore,
@@ -21410,6 +21718,7 @@ function handleUupdateResize(_vm) {
      * 通用提示
      */
     VxeUITooltipComponent ? h(VxeUITooltipComponent, {
+      key: 'ctp',
       ref: 'commTip',
       props: {
         isArrow: false,
@@ -21420,6 +21729,7 @@ function handleUupdateResize(_vm) {
      * 工具提示
      */
     VxeUITooltipComponent ? h(VxeUITooltipComponent, {
+      key: 'btp',
       ref: 'tooltip',
       props: Object.assign({}, this.tipConfig, this.tooltipStore.currOpts)
     }) : _e(),
@@ -21427,6 +21737,7 @@ function handleUupdateResize(_vm) {
      * 校验提示
      */
     VxeUITooltipComponent && this.editRules && validOpts.showMessage && (validOpts.message === 'default' ? !height : validOpts.message === 'tooltip') ? h(VxeUITooltipComponent, {
+      key: 'vtp',
       ref: 'validTip',
       class: [{
         'old-cell-valid': editRules && table_getConfig().cellVaildMode === 'obsolete'
@@ -21451,7 +21762,7 @@ const {
   getI18n: toolbar_getI18n,
   renderer: toolbar_renderer,
   commands: toolbar_commands,
-  createEvent,
+  createEvent: toolbar_createEvent,
   globalMixins: toolbar_globalMixins,
   renderEmptyElement: toolbar_renderEmptyElement
 } = core_.VxeUI;
@@ -21566,7 +21877,7 @@ const {
     //
     dispatchEvent(type, params, evnt) {
       const $xeToolbar = this;
-      $xeToolbar.$emit(type, createEvent(evnt, {
+      $xeToolbar.$emit(type, toolbar_createEvent(evnt, {
         $toolbar: $xeToolbar
       }, params));
     },
@@ -25415,11 +25726,11 @@ const Toolbar = VxeToolbar;
           clearSort: '清除排序',
           sortAsc: '升序',
           sortDesc: '降序',
-          fixedColumn: '锁定列',
-          fixedGroup: '锁定组',
-          cancelFixed: '取消锁定',
-          fixedLeft: '锁定左侧',
-          fixedRight: '锁定右侧',
+          fixedColumn: '冻结列',
+          fixedGroup: '冻结分组',
+          cancelFixed: '取消冻结',
+          fixedLeft: '冻结到左侧',
+          fixedRight: '冻结到右侧',
           clearFilter: '清除筛选',
           textOption: '文本筛选',
           numberOption: '数值筛选'