vxe-table 4.10.6-beta.8 → 4.10.6-beta.9

package/lib/index.umd.js

@@ -3138,7 +3138,7 @@ function eqEmptyValue(cellValue) {
 ;// ./packages/ui/index.ts
 
 
-const version = "4.10.6-beta.8";
+const version = "4.10.6-beta.9";
 core_.VxeUI.version = version;
 core_.VxeUI.tableVersion = version;
 core_.VxeUI.setConfig({
@@ -3312,13 +3312,15 @@ core_.VxeUI.setConfig({
     },
     virtualXConfig: {
       // enabled: false,
-      gt: 60
-      // oSize: 0
+      gt: 60,
+      preSize: 0,
+      oSize: 1
     },
     virtualYConfig: {
       // enabled: false,
-      gt: 100
-      // oSize: 0
+      gt: 100,
+      preSize: 1,
+      oSize: 2
     },
     scrollbarConfig: {
       width: 10,
@@ -3568,7 +3570,7 @@ var esnext_iterator_some = __webpack_require__(7550);
 const {
   log: log_log
 } = core_.VxeUI;
-const log_version = `table v${"4.10.6-beta.8"}`;
+const log_version = `table v${"4.10.6-beta.9"}`;
 const warnLog = log_log.create('warn', log_version);
 const errLog = log_log.create('error', log_version);
 ;// ./packages/table/src/columnInfo.ts
@@ -6449,6 +6451,26 @@ const renderType = 'body';
       if (!fixedHiddenColumn && editConfig && (editRender || cellRender) && (editOpts.showStatus || editOpts.showUpdateStatus)) {
         isDirty = $xeTable.isUpdateByRow(row, column.field);
       }
+      const isVNAutoHeight = scrollYLoad && !hasEllipsis;
+      let cellHeight = 0;
+      const vnHeight = isCalcCellHeight ? rest.height : 0;
+      if (hasEllipsis) {
+        if (customRHeight) {
+          cellHeight = customRHeight;
+        } else if (!isAllOverflow) {
+          cellHeight = vnHeight || defaultRowHeight || 18;
+        }
+      } else {
+        cellHeight = vnHeight || defaultRowHeight || 18;
+      }
+      const tcStyle = {};
+      if (cellHeight) {
+        if (hasEllipsis) {
+          tcStyle.maxHeight = `${cellHeight}px`;
+        } else if (isVNAutoHeight) {
+          tcStyle.height = `${cellHeight}px`;
+        }
+      }
       const tdVNs = [];
       if (fixedHiddenColumn && (allColumnOverflow ? isAllOverflow : allColumnOverflow)) {
         tdVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
@@ -6457,9 +6479,7 @@ const renderType = 'body';
             'c--tooltip': showTooltip,
             'c--ellipsis': showEllipsis
           }],
-          style: {
-            maxHeight: hasEllipsis && (customRHeight || defaultRowHeight) ? `${customRHeight || defaultRowHeight}px` : ''
-          }
+          style: tcStyle
         }));
       } else {
         // 渲染单元格
@@ -6469,11 +6489,11 @@ const renderType = 'body';
             'c--tooltip': showTooltip,
             'c--ellipsis': showEllipsis
           }],
-          style: {
-            maxHeight: hasEllipsis && (customRHeight || defaultRowHeight) ? `${customRHeight || defaultRowHeight}px` : ''
-          },
+          style: tcStyle,
           title: showTitle ? $xeTable.getCellLabel(row, column) : null
-        }, column.renderCell(params)));
+        }, isVNAutoHeight ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-cell--auto-wrapper'
+        }, column.renderCell(params))] : column.renderCell(params)));
         if (showValidTip && errorValidItem) {
           const errRule = errorValidItem.rule;
           const validSlot = slots ? slots.valid : null;
@@ -6494,17 +6514,6 @@ const renderType = 'body';
           }, errorValidItem.content)]])]));
         }
       }
-      let cellHeight = '';
-      const vnHeight = isCalcCellHeight ? rest.height : 0;
-      if (hasEllipsis) {
-        if (customRHeight) {
-          cellHeight = `${customRHeight}px`;
-        } else if (!isAllOverflow) {
-          cellHeight = `${vnHeight || defaultRowHeight || 18}px`;
-        }
-      } else {
-        cellHeight = `${vnHeight || defaultRowHeight || 18}px`;
-      }
       if (mouseConfig && mouseOpts.area && selectCellToRow) {
         if (!$columnIndex && selectCellToRow === true || selectCellToRow === column.field) {
           tdVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
@@ -6514,11 +6523,11 @@ const renderType = 'body';
       }
       const isLastColumn = $columnIndex === columns.length - 1;
       const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto');
-      let isPreLoadStatus = false;
-      if (scrollYLoad && (_rowIndex < scrollYStore.visibleStartIndex || _rowIndex > scrollYStore.visibleEndIndex)) {
-        isPreLoadStatus = true;
-      } else if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex || _columnIndex > scrollXStore.visibleEndIndex)) {
-        isPreLoadStatus = true;
+      let isVNPreEmptyStatus = false;
+      if (scrollYLoad && (_rowIndex < scrollYStore.visibleStartIndex - scrollYStore.preloadSize || _rowIndex > scrollYStore.visibleEndIndex + scrollYStore.preloadSize)) {
+        isVNPreEmptyStatus = true;
+      } else if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+        isVNPreEmptyStatus = true;
       }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('td', {
         class: ['vxe-body--column', colid, {
@@ -6529,6 +6538,7 @@ const renderType = 'body';
           'col--tree-node': treeNode,
           'col--edit': isEdit,
           'col--ellipsis': hasEllipsis,
+          'col--auto-height': isVNAutoHeight,
           'fixed--width': !isAutoCellWidth,
           'fixed--hidden': fixedHiddenColumn,
           'is--drag-cell': isRowDragCell && (isCrossDrag || isPeerDrag || !rowLevel),
@@ -6541,10 +6551,10 @@ const renderType = 'body';
         key: columnKey || scrollXLoad || scrollYLoad || columnOpts.useKey || rowOpts.useKey || columnOpts.drag ? colid : $columnIndex,
         ...attrs,
         style: Object.assign({
-          height: cellHeight
+          height: cellHeight ? `${cellHeight}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),
         ...tdOns
-      }, isPreLoadStatus || isOptimizeMode && fixedHiddenColumn ? [] : tdVNs);
+      }, isVNPreEmptyStatus || isOptimizeMode && fixedHiddenColumn ? [] : tdVNs);
     };
     const renderRows = (fixedType, isOptimizeMode, tableData, tableColumn) => {
       const {
@@ -7301,9 +7311,9 @@ const header_renderType = 'header';
         const isLastColumn = $columnIndex === cols.length - 1;
         const showResizable = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(column.resizable) ? column.resizable : columnOpts.resizable || allResizable;
         const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto');
-        let isPreLoadStatus = false;
-        if (scrollXLoad && !isGroup && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex || _columnIndex > scrollXStore.visibleEndIndex)) {
-          isPreLoadStatus = true;
+        let isVNPreEmptyStatus = false;
+        if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+          isVNPreEmptyStatus = true;
         }
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('th', {
           class: ['vxe-header--column', colid, {
@@ -7332,7 +7342,7 @@ const header_renderType = 'header';
             'c--tooltip': showTooltip,
             'c--ellipsis': showEllipsis
           }]
-        }, isPreLoadStatus || isOptimizeMode && fixedHiddenColumn ? [] : column.renderHeader(params)),
+        }, isVNPreEmptyStatus || isOptimizeMode && fixedHiddenColumn ? [] : column.renderHeader(params)),
         /**
          * 列宽拖动
          */
@@ -7754,9 +7764,9 @@ function mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex) {
         }
         const isLastColumn = $columnIndex === tableColumn.length - 1;
         const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto');
-        let isPreLoadStatus = false;
-        if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex || _columnIndex > scrollXStore.visibleEndIndex)) {
-          isPreLoadStatus = true;
+        let isVNPreEmptyStatus = false;
+        if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+          isVNPreEmptyStatus = true;
         }
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('td', {
           class: ['vxe-footer--column', column.id, {
@@ -7778,7 +7788,7 @@ function mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex) {
             'c--tooltip': showTooltip,
             'c--ellipsis': showEllipsis
           }]
-        }, isPreLoadStatus ? [] : column.renderFooter(cellParams))]);
+        }, isVNPreEmptyStatus ? [] : column.renderFooter(cellParams))]);
       });
     };
     const renderHeads = renderColumnList => {
@@ -11198,29 +11208,36 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       };
     };
     const computeRowHeight = () => {
+      const {
+        showOverflow
+      } = props;
       const tableHeader = refTableHeader.value;
       const tableBody = refTableBody.value;
       const tableBodyElem = tableBody ? tableBody.$el : null;
       const defaultRowHeight = computeDefaultRowHeight.value;
       let rowHeight = 0;
-      if (tableBodyElem) {
-        const tableHeaderElem = tableHeader ? tableHeader.$el : null;
-        let firstTrElem;
-        firstTrElem = tableBodyElem.querySelector('tr');
-        if (!firstTrElem && tableHeaderElem) {
-          firstTrElem = tableHeaderElem.querySelector('tr');
+      if (showOverflow) {
+        if (tableBodyElem) {
+          const tableHeaderElem = tableHeader ? tableHeader.$el : null;
+          let firstTrElem;
+          firstTrElem = tableBodyElem.querySelector('tr');
+          if (!firstTrElem && tableHeaderElem) {
+            firstTrElem = tableHeaderElem.querySelector('tr');
+          }
+          if (firstTrElem) {
+            rowHeight = firstTrElem.clientHeight;
+          }
         }
-        if (firstTrElem) {
-          rowHeight = firstTrElem.clientHeight;
+        if (!rowHeight) {
+          rowHeight = defaultRowHeight;
         }
-      }
-      if (!rowHeight) {
+      } else {
         rowHeight = defaultRowHeight;
       }
       // 最低支持 18px 行高
       return Math.max(18, rowHeight);
     };
-    const handleVirtualYVisible = () => {
+    const handleVirtualYVisible = currScrollTop => {
       const {
         showOverflow
       } = props;
@@ -11234,10 +11251,8 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       } = internalData;
       const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
       if (bodyScrollElem) {
-        const {
-          scrollTop,
-          clientHeight
-        } = bodyScrollElem;
+        const clientHeight = bodyScrollElem.clientHeight;
+        const scrollTop = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNumber(currScrollTop) ? currScrollTop : bodyScrollElem.scrollTop;
         const endHeight = scrollTop + clientHeight;
         let toVisibleIndex = -1;
         let offsetTop = 0;
@@ -11869,7 +11884,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         tableData.forEach(row => {
           const rowid = getRowid($xeTable, row);
           const rowRest = fullAllDataRowIdData[rowid];
-          const cellList = el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]>.vxe-body--column>.vxe-cell`);
+          const cellList = el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]>.vxe-body--column>.vxe-cell>.vxe-cell--auto-wrapper`);
           if (rowRest && cellList.length) {
             let height = 0;
             for (let i = 0; i < cellList.length; i++) {
@@ -13196,16 +13211,16 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           scrollXStore,
           scrollYStore
         } = internalData;
-        const sYOpts = computeSYOpts.value;
-        const sXOpts = computeSXOpts.value;
+        const virtualYOpts = computeVirtualYOpts.value;
+        const virtualXOpts = computeVirtualXOpts.value;
         // 计算 X 逻辑
         if (scrollXLoad) {
           const {
             toVisibleIndex: toXVisibleIndex,
             visibleSize: visibleXSize
           } = handleVirtualXVisible();
-          const offsetXSize = Math.max(0, sXOpts.oSize ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(sXOpts.oSize) : 0);
-          scrollXStore.preloadSize = 4;
+          const offsetXSize = Math.max(0, virtualXOpts.oSize ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(virtualXOpts.oSize) : 0);
+          scrollXStore.preloadSize = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(virtualXOpts.preSize);
           scrollXStore.offsetSize = offsetXSize;
           scrollXStore.visibleSize = visibleXSize;
           scrollXStore.endIndex = Math.max(scrollXStore.startIndex + scrollXStore.visibleSize + offsetXSize, scrollXStore.endIndex);
@@ -13217,7 +13232,6 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         } else {
           $xeTable.updateScrollXSpace();
         }
-        calcCellHeight();
         // 计算 Y 逻辑
         const rowHeight = computeRowHeight();
         scrollYStore.rowHeight = rowHeight;
@@ -13227,8 +13241,8 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           visibleSize: visibleYSize
         } = handleVirtualYVisible();
         if (scrollYLoad) {
-          const offsetYSize = Math.max(0, sYOpts.oSize ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(sYOpts.oSize) : 0);
-          scrollYStore.preloadSize = 2;
+          const offsetYSize = Math.max(0, virtualYOpts.oSize ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(virtualYOpts.oSize) : 0);
+          scrollYStore.preloadSize = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(virtualYOpts.preSize);
           scrollYStore.offsetSize = offsetYSize;
           scrollYStore.visibleSize = visibleYSize;
           scrollYStore.endIndex = Math.max(scrollYStore.startIndex + visibleYSize + offsetYSize, scrollYStore.endIndex);
@@ -13257,7 +13271,6 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       return computeScrollLoad().then(() => {
         if (reFull === true) {
           // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
-          calcCellHeight();
           calcCellWidth();
           autoCellWidth();
           updateStyle();
@@ -13403,6 +13416,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
             if (sYOpts.scrollToTopOnChange) {
               targetScrollTop = 0;
             }
+            calcCellHeight();
             // 是否变更虚拟滚动
             if (oldScrollYLoad === sYLoad) {
               restoreScrollLocation($xeTable, targetScrollLeft, targetScrollTop).then(() => {
@@ -13835,7 +13849,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
     /**
      * 纵向 Y 可视渲染处理
      */
-    const loadScrollYData = () => {
+    const loadScrollYData = scrollTop => {
       const {
         showOverflow
       } = props;
@@ -13855,7 +13869,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       const {
         toVisibleIndex,
         visibleSize
-      } = handleVirtualYVisible();
+      } = handleVirtualYVisible(scrollTop);
       const offsetItem = {
         startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize - preloadSize),
         endIndex: toVisibleIndex + visibleSize + autoOffsetYSize + preloadSize
@@ -13928,18 +13942,11 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       }, fpsTime);
     };
     const lazyScrollYData = () => {
-      const {
-        showOverflow
-      } = props;
       const {
         lyTimeout,
-        lyRunTime,
-        scrollYStore
+        lyRunTime
       } = internalData;
-      const {
-        visibleSize
-      } = scrollYStore;
-      const fpsTime = showOverflow ? 5 : Math.max(5, Math.min(80, Math.floor(visibleSize / 2)));
+      const fpsTime = Math.floor(Math.max(4, Math.min(10, 20 / 3)));
       if (lyTimeout) {
         clearTimeout(lyTimeout);
       }
@@ -13973,16 +13980,14 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         internalData.inBodyScroll = false;
         internalData.inFooterScroll = false;
         internalData.scrollRenderType = '';
+        calcCellHeight();
         if (isRollX && scrollXLoad) {
-          $xeTable.updateScrollXData().then(() => {
-            calcCellHeight();
-            loadScrollXData();
-          });
+          $xeTable.updateScrollXData();
         }
         if (isRollY && scrollYLoad) {
           $xeTable.updateScrollYData().then(() => {
             calcCellHeight();
-            loadScrollYData();
+            $xeTable.updateScrollYSpace();
           });
         }
         $xeTable.updateCellAreas();
@@ -19869,9 +19874,9 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           setScrollTop(bodyScrollElem, scrollTop);
           setScrollTop(leftScrollElem, scrollTop);
           setScrollTop(rightScrollElem, scrollTop);
-          $xeTable.triggerScrollYEvent(evnt);
+          loadScrollYData(scrollTop);
           $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
-            type: 'footer',
+            type: 'table',
             fixed: ''
           });
         }
@@ -20115,9 +20120,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           showOverflow
         } = props;
         handleTableColumn();
-        // calcCellHeight()
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => {
-          // calcCellHeight()
           handleTableColumn();
           $xeTable.updateScrollXSpace();
           if (!showOverflow) {
@@ -20127,9 +20130,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       },
       updateScrollYData() {
         $xeTable.handleTableData();
-        // calcCellHeight()
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => {
-          // calcCellHeight()
           $xeTable.handleTableData();
           $xeTable.updateScrollYSpace();
         });