vxe-table 3.9.21 → 3.10.0-beta.0

package/es/table/src/methods.js

@@ -3,10 +3,10 @@ import { browse, isPx, isScale, hasClass, addClass, removeClass, getEventTargetN
 import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils';
 import { VxeUI } from '../../ui';
 import Cell from './cell';
-import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, restoreScrollListener, getRootColumn } from './util';
+import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn } from './util';
 import { getSlotVNs } from '../../ui/src/vn';
 import { warnLog, errLog } from '../../ui/src/log';
-const { getConfig, getI18n, renderer, formats, interceptor } = VxeUI;
+const { getConfig, getI18n, renderer, formats, interceptor, createEvent } = VxeUI;
 const isWebkit = browse['-webkit'] && !browse.edge;
 const debounceScrollYDuration = browse.msie ? 80 : 20;
 const customStorageKey = 'VXE_CUSTOM_STORE';
@@ -68,7 +68,7 @@ function handleReserveRow(_vm, reserveRowMap) {
     });
     return reserveList;
 }
-function computeVirtualX(_vm) {
+function handleVirtualXVisible(_vm) {
     const { $refs, visibleColumn } = _vm;
     const { tableBody } = $refs;
     const tableBodyElem = tableBody ? tableBody.$el : null;
@@ -94,14 +94,16 @@ function computeVirtualX(_vm) {
     }
     return { toVisibleIndex: 0, visibleSize: 6 };
 }
-function computeVirtualY(_vm) {
-    const { $refs, computeSize, rowHeightMaps } = _vm;
-    const { tableHeader, tableBody } = $refs;
+const computeRowHeight = ($xeTable) => {
+    const { $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) {
@@ -113,10 +115,41 @@ function computeVirtualY(_vm) {
         if (!rowHeight) {
             rowHeight = rowHeightMaps[vSize || 'default'];
         }
-        const visibleSize = Math.max(8, Math.ceil(tableBodyElem.clientHeight / rowHeight) + 2);
-        return { rowHeight, visibleSize };
     }
-    return { rowHeight: 0, visibleSize: 8 };
+    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 { toVisibleIndex: Math.max(0, toVisibleIndex), visibleSize: Math.max(8, visibleSize) };
+    }
+    return { toVisibleIndex: 0, visibleSize: 8 };
 }
 function calculateMergerOffsetIndex(list, offsetItem, type) {
     for (let mcIndex = 0, len = list.length; mcIndex < len; mcIndex++) {
@@ -216,7 +249,7 @@ function clearAllSort(_vm) {
         column.order = null;
     });
 }
-function calcHeight(_vm, key) {
+function calcTableHeight(_vm, key) {
     const { parentHeight } = _vm;
     const val = _vm[key];
     let num = 0;
@@ -237,6 +270,25 @@ 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, sortType } = column;
     return (row) => {
@@ -442,9 +494,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']);
                 }
@@ -659,7 +711,7 @@ const Methods = {
             }
             let cacheItem = fullAllDataRowIdData[rowid];
             if (!cacheItem) {
-                cacheItem = { row, rowid, seq, index: -1, _index: -1, $index: -1, items, parent, level };
+                cacheItem = { row, rowid, seq, index: -1, _index: -1, $index: -1, items, parent, level, height: 0 };
             }
             if (isSource) {
                 cacheItem.index = treeConfig && parent ? -1 : index;
@@ -729,7 +781,7 @@ const Methods = {
             XEUtils.eachTree(rows, (childRow, index, items, path, parent, nodes) => {
                 const rowid = getRowid($xeTable, childRow);
                 const parentRow = parent || parentRest.row;
-                const rest = { row: childRow, rowid, seq: -1, index, _index: -1, $index: -1, items, parent: parentRow, level: parentLevel + nodes.length };
+                const rest = { row: childRow, rowid, seq: -1, index, _index: -1, $index: -1, items, parent: parentRow, level: parentLevel + nodes.length, height: 0 };
                 fullDataRowIdData[rowid] = rest;
                 fullAllDataRowIdData[rowid] = rest;
             }, { children: childrenField });
@@ -759,7 +811,7 @@ const Methods = {
         let hasFixed;
         const handleFunc = (column, index, items, path, parent) => {
             const { id: colid, field, fixed, type, treeNode } = column;
-            const rest = { column, colid, index, items, parent };
+            const rest = { column, colid, index, items, parent: parent || null, width: 0 };
             if (field) {
                 if (process.env.NODE_ENV === 'development') {
                     if (fullColumnFieldData[field]) {
@@ -870,9 +922,15 @@ const Methods = {
         if (tr) {
             const { fullAllDataRowIdData } = this;
             const rowid = tr.getAttribute('rowid');
-            const rest = fullAllDataRowIdData[rowid];
-            if (rest) {
-                return { rowid: rest.rowid, item: rest.row, index: rest.index, items: rest.items, parent: rest.parent };
+            const rowRest = fullAllDataRowIdData[rowid];
+            if (rowRest) {
+                return {
+                    rowid: rowRest.rowid,
+                    item: rowRest.row,
+                    index: rowRest.index,
+                    items: rowRest.items,
+                    parent: rowRest.parent
+                };
             }
         }
         return null;
@@ -885,9 +943,17 @@ const Methods = {
         if (cell) {
             const { 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;
@@ -1204,13 +1270,13 @@ const Methods = {
             const { fullAllDataRowIdData } = $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;
                     }
@@ -1538,14 +1604,14 @@ const Methods = {
         if (treeConfig) {
             XEUtils.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, rowid, seq, index: -1, $index: -1, _index: index, items: [], parent: null, level: 0 };
+                    const rest = { row, rowid, seq, index: -1, $index: -1, _index: index, items: [], parent: null, level: 0, height: 0 };
                     fullAllDataRowIdData[rowid] = rest;
                     fullDataRowIdData[rowid] = rest;
                 }
@@ -1555,14 +1621,14 @@ 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, rowid, seq, index: -1, $index: -1, _index: index, items: [], parent: null, level: 0 };
+                    const rest = { row, rowid, seq, index: -1, $index: -1, _index: index, items: [], parent: null, level: 0, height: 0 };
                     fullAllDataRowIdData[rowid] = rest;
                     fullDataRowIdData[rowid] = rest;
                 }
@@ -2078,7 +2144,7 @@ const Methods = {
                     warnLog('vxe.error.scrollErrProp', ['footer-span-method']);
                 }
             }
-            const { visibleSize } = computeVirtualX(this);
+            const { visibleSize } = handleVirtualXVisible(this);
             scrollXStore.startIndex = 0;
             scrollXStore.endIndex = visibleSize;
             scrollXStore.visibleSize = visibleSize;
@@ -2092,9 +2158,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;
@@ -2188,30 +2254,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 } = this;
         if (!tableData.length || !autoWidthColumnList.length) {
             this.isCalcColumn = false;
@@ -2219,9 +2281,13 @@ 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;
@@ -2249,6 +2315,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();
@@ -2261,12 +2330,13 @@ 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;
@@ -2392,13 +2462,37 @@ 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() {
-        let { $refs, isGroup, fullColumnIdData, tableColumn, customHeight, customMinHeight, customMaxHeight, border, headerHeight, showFooter, showOverflow: allColumnOverflow, showHeaderOverflow: allColumnHeaderOverflow, showFooterOverflow: allColumnFooterOverflow, footerHeight, tableHeight, tableWidth, scrollbarHeight, scrollbarWidth, scrollXLoad, scrollYLoad, cellOffsetWidth, columnStore, elemStore, editStore, currentRow, mouseConfig, keyboardConfig, keyboardOpts, spanMethod, mergeList, mergeFooterList, footerSpanMethod, isAllOverflow, visibleColumn } = this;
+        const $xeTable = this;
+        let { $refs, isGroup, fullColumnIdData, tableColumn, customHeight, customMinHeight, customMaxHeight, border, headerHeight, showFooter, showOverflow: allColumnOverflow, showHeaderOverflow: allColumnHeaderOverflow, showFooterOverflow: allColumnFooterOverflow, footerHeight, tableHeight, tableWidth, scrollbarHeight, scrollbarWidth, scrollXLoad, scrollYLoad, overflowX, cellOffsetWidth, columnStore, elemStore, editStore, currentRow, mouseConfig, keyboardConfig, keyboardOpts, spanMethod, mergeList, mergeFooterList, footerSpanMethod, isAllOverflow, visibleColumn } = $xeTable;
         const containerList = ['main', 'left', 'right'];
         const emptyPlaceholderElem = $refs.emptyPlaceholder;
         const bodyWrapperElem = elemStore['main-body-wrapper'];
@@ -2411,6 +2505,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'];
@@ -2581,7 +2699,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, showOverflow } = column;
                             let cellOverflow;
                             colElem.style.width = `${column.renderWidth}px`;
@@ -2646,11 +2765,14 @@ const Methods = {
      * 处理固定列的显示状态
      */
     checkScrolling() {
-        const { tableBody, leftContainer, rightContainer } = this.$refs;
+        const $xeTable = this;
+        const { tableBody, leftContainer, rightContainer } = $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 {
@@ -2658,7 +2780,7 @@ const Methods = {
                 }
             }
             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 {
@@ -4662,17 +4784,17 @@ const Methods = {
     isRowExpandLoaded(row) {
         const $xeTable = this;
         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;
         const { expandOpts, rowExpandLazyLoadedMaps, fullAllDataRowIdData } = this;
         const { 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 = Object.assign({}, rowExpandLazyLoadedMaps);
             if (rowTempExpandLazyLoadedMaps[rowid]) {
                 delete rowTempExpandLazyLoadedMaps[rowid];
@@ -4773,14 +4895,14 @@ const Methods = {
             if (loadMethod) {
                 const { rowExpandLazyLoadedMaps, fullAllDataRowIdData } = this;
                 const rowid = getRowid($xeTable, row);
-                const rest = fullAllDataRowIdData[rowid];
+                const rowRest = fullAllDataRowIdData[rowid];
                 rowExpandLazyLoadedMaps[rowid] = row;
                 loadMethod({ $table: $xeTable, row, rowIndex: this.getRowIndex(row), $rowIndex: this.getVMRowIndex(row) }).then(() => {
                     const { rowExpandedMaps } = this;
-                    rest.expandLoaded = true;
+                    rowRest.expandLoaded = true;
                     rowExpandedMaps[rowid] = row;
                 }).catch(() => {
-                    rest.expandLoaded = false;
+                    rowRest.expandLoaded = false;
                 }).finally(() => {
                     const { rowExpandLazyLoadedMaps } = this;
                     if (rowExpandLazyLoadedMaps[rowid]) {
@@ -4822,8 +4944,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));
                         }
@@ -4934,17 +5056,17 @@ const Methods = {
     isTreeExpandLoaded(row) {
         const $xeTable = this;
         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;
         const { treeOpts, treeExpandedMaps, fullAllDataRowIdData } = this;
         const { transform, 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];
             }
@@ -5044,10 +5166,10 @@ const Methods = {
             if (loadMethod) {
                 const { treeExpandLazyLoadedMaps, 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];
                     }
@@ -5073,7 +5195,7 @@ const Methods = {
                     }
                 }).catch(() => {
                     const { treeExpandLazyLoadedMaps } = this;
-                    rest.treeLoaded = false;
+                    rowRest.treeLoaded = false;
                     if (treeExpandLazyLoadedMaps[rowid]) {
                         delete treeExpandLazyLoadedMaps[rowid];
                     }
@@ -5136,8 +5258,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));
@@ -5273,7 +5395,7 @@ const Methods = {
     loadScrollXData() {
         const { mergeList, mergeFooterList, scrollXStore } = this;
         const { startIndex, endIndex, offsetSize } = scrollXStore;
-        const { toVisibleIndex, visibleSize } = computeVirtualX(this);
+        const { toVisibleIndex, visibleSize } = handleVirtualXVisible(this);
         const offsetItem = {
             startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize),
             endIndex: toVisibleIndex + visibleSize + offsetSize
@@ -5289,32 +5411,114 @@ 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;
         const { adaptive, offsetSize, visibleSize } = 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.debounce(function (evnt) {
-        this.loadScrollYData(evnt);
+    debounceScrollYData: XEUtils.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: XEUtils.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 } = this;
-        const { startIndex, endIndex, visibleSize, offsetSize, rowHeight } = scrollYStore;
-        const scrollBodyElem = evnt.currentTarget || evnt.target;
-        const scrollTop = scrollBodyElem.scrollTop;
-        const toVisibleIndex = Math.floor(scrollTop / rowHeight);
+        const { startIndex, endIndex, offsetSize } = scrollYStore;
+        const { toVisibleIndex, visibleSize } = handleVirtualYVisible(this);
         const offsetItem = {
             startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize),
             endIndex: toVisibleIndex + visibleSize + offsetSize
@@ -5335,7 +5539,7 @@ const Methods = {
             const { sYOpts, sXOpts, scrollXLoad, scrollYLoad, scrollXStore, scrollYStore } = this;
             // 计算 X 逻辑
             if (scrollXLoad) {
-                const { visibleSize: visibleXSize } = computeVirtualX(this);
+                const { visibleSize: visibleXSize } = handleVirtualXVisible(this);
                 const offsetXSize = sXOpts.oSize ? XEUtils.toNumber(sXOpts.oSize) : browse.msie ? 10 : (browse.edge ? 5 : 0);
                 scrollXStore.offsetSize = offsetXSize;
                 scrollXStore.visibleSize = visibleXSize;
@@ -5345,9 +5549,12 @@ const Methods = {
             else {
                 this.updateScrollXSpace();
             }
+            calcCellHeight(this);
             // 计算 Y 逻辑
-            const { rowHeight, visibleSize: visibleYSize } = computeVirtualY(this);
+            const rowHeight = computeRowHeight(this);
             scrollYStore.rowHeight = rowHeight;
+            this.rowHeight = rowHeight;
+            const { visibleSize: visibleYSize } = handleVirtualYVisible(this);
             if (scrollYLoad) {
                 const offsetYSize = sYOpts.oSize ? XEUtils.toNumber(sYOpts.oSize) : browse.msie ? 20 : (browse.edge ? 10 : 0);
                 scrollYStore.offsetSize = offsetYSize;
@@ -5358,13 +5565,20 @@ const Methods = {
             else {
                 this.updateScrollYSpace();
             }
-            this.rowHeight = rowHeight;
             this.$nextTick(this.updateStyle);
         });
     },
     handleTableColumn() {
-        const { scrollXLoad, visibleColumn, scrollXStore } = this;
-        this.tableColumn = scrollXLoad ? visibleColumn.slice(scrollXStore.startIndex, scrollXStore.endIndex) : visibleColumn.slice(0);
+        const { scrollXLoad, visibleColumn, scrollXStore, fullColumnIdData } = this;
+        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 = []
@@ -5375,7 +5589,8 @@ const Methods = {
     },
     // 更新横向 X 可视渲染上下剩余空间大小
     updateScrollXSpace() {
-        const { $refs, isGroup, elemStore, visibleColumn, scrollXStore, scrollXLoad, tableWidth, scrollbarWidth } = this;
+        const $xeTable = this;
+        const { $refs, isGroup, elemStore, visibleColumn, scrollXStore, scrollXLoad, tableWidth, scrollbarWidth } = $xeTable;
         const { tableHeader, tableBody, tableFooter } = $refs;
         const tableBodyElem = tableBody ? tableBody.$el : null;
         if (tableBodyElem) {
@@ -5406,26 +5621,55 @@ 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 { elemStore, scrollYStore, scrollYLoad, afterFullData } = this;
+        const $xeTable = this;
+        const { showOverflow, elemStore, scrollYStore, scrollYLoad, 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`;
         }
@@ -5442,6 +5686,10 @@ const Methods = {
                 }
             });
         });
+        const scrollYSpaceEl = $xeTable.$refs.refScrollYSpaceElem;
+        if (scrollYSpaceEl) {
+            scrollYSpaceEl.style.height = ySpaceHeight;
+        }
         this.$nextTick(this.updateStyle);
     },
     /**
@@ -5523,28 +5771,44 @@ const Methods = {
      * 手动清除滚动相关信息，还原到初始状态
      */
     clearScroll() {
-        const { $refs, scrollXStore, scrollYStore } = this;
-        const { tableBody, rightBody, tableFooter } = $refs;
+        const $xeTable = this;
+        const { $refs, scrollXStore, scrollYStore } = $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;
+        const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
+        if (xHandleEl) {
+            setScrollLeft(xHandleEl, 0);
         }
-        if (tableFooterElem) {
-            tableFooterElem.scrollLeft = 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);
+        });
     },
     /**
      * 更新表尾合计
@@ -5697,6 +5961,11 @@ 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, $grid: this.$xegrid, $event: evnt }, params));
     },