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

package/es/table/src/body.js

@@ -235,6 +235,29 @@ export default defineComponent({
             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(h('div', {
@@ -243,9 +266,7 @@ export default defineComponent({
                             'c--tooltip': showTooltip,
                             'c--ellipsis': showEllipsis
                         }],
-                    style: {
-                        maxHeight: hasEllipsis && (customRHeight || defaultRowHeight) ? `${customRHeight || defaultRowHeight}px` : ''
-                    }
+                    style: tcStyle
                 }));
             }
             else {
@@ -256,11 +277,15 @@ export default defineComponent({
                             '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
+                    ? [
+                        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;
@@ -287,19 +312,6 @@ export default defineComponent({
                     ]));
                 }
             }
-            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)) {
@@ -310,12 +322,12 @@ export default defineComponent({
             }
             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;
+            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 || _columnIndex > scrollXStore.visibleEndIndex)) {
-                isPreLoadStatus = true;
+            else if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+                isVNPreEmptyStatus = true;
             }
             return h('td', Object.assign(Object.assign(Object.assign({ class: [
                     'vxe-body--column',
@@ -328,6 +340,7 @@ export default defineComponent({
                         '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),
@@ -341,8 +354,8 @@ export default defineComponent({
                     getPropClass(className, params),
                     getPropClass(allCellClassName, params)
                 ], key: columnKey || scrollXLoad || scrollYLoad || columnOpts.useKey || rowOpts.useKey || columnOpts.drag ? colid : $columnIndex }, attrs), { style: Object.assign({
-                    height: cellHeight
-                }, XEUtils.isFunction(compCellStyle) ? compCellStyle(params) : compCellStyle, XEUtils.isFunction(cellStyle) ? cellStyle(params) : cellStyle) }), tdOns), isPreLoadStatus || (isOptimizeMode && fixedHiddenColumn) ? [] : tdVNs);
+                    height: cellHeight ? `${cellHeight}px` : ''
+                }, XEUtils.isFunction(compCellStyle) ? compCellStyle(params) : compCellStyle, XEUtils.isFunction(cellStyle) ? cellStyle(params) : cellStyle) }), tdOns), isVNPreEmptyStatus || (isOptimizeMode && fixedHiddenColumn) ? [] : tdVNs);
         };
         const renderRows = (fixedType, isOptimizeMode, tableData, tableColumn) => {
             const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, showOverflow: allColumnOverflow, editConfig, treeConfig } = tableProps;

package/es/table/src/footer.js

@@ -147,9 +147,9 @@ export default defineComponent({
                 }
                 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 h('td', Object.assign(Object.assign(Object.assign(Object.assign({ class: ['vxe-footer--column', column.id, {
                             [`col--${footAlign}`]: footAlign,
@@ -166,7 +166,7 @@ export default defineComponent({
                                 'c--tooltip': showTooltip,
                                 'c--ellipsis': showEllipsis
                             }]
-                    }, isPreLoadStatus ? [] : column.renderFooter(cellParams))
+                    }, isVNPreEmptyStatus ? [] : column.renderFooter(cellParams))
                 ]);
             });
         };

package/es/table/src/header.js

@@ -233,9 +233,9 @@ export default defineComponent({
                 const isLastColumn = $columnIndex === cols.length - 1;
                 const showResizable = (XEUtils.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 h('th', Object.assign(Object.assign(Object.assign({ class: ['vxe-header--column', colid, {
                             [`col--${headAlign}`]: headAlign,
@@ -262,7 +262,7 @@ export default defineComponent({
                                 'c--tooltip': showTooltip,
                                 'c--ellipsis': showEllipsis
                             }]
-                    }, isPreLoadStatus || (isOptimizeMode && fixedHiddenColumn) ? [] : column.renderHeader(params)),
+                    }, isVNPreEmptyStatus || (isOptimizeMode && fixedHiddenColumn) ? [] : column.renderHeader(params)),
                     /**
                      * 列宽拖动
                      */

package/es/table/src/table.js

@@ -827,35 +827,42 @@ export default defineComponent({
             return { toVisibleIndex: 0, visibleSize: 6 };
         };
         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;
             const { rowHeight } = reactData;
             const { elemStore, afterFullData, fullAllDataRowIdData } = internalData;
             const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
             if (bodyScrollElem) {
-                const { scrollTop, clientHeight } = bodyScrollElem;
+                const clientHeight = bodyScrollElem.clientHeight;
+                const scrollTop = XEUtils.isNumber(currScrollTop) ? currScrollTop : bodyScrollElem.scrollTop;
                 const endHeight = scrollTop + clientHeight;
                 let toVisibleIndex = -1;
                 let offsetTop = 0;
@@ -1407,7 +1414,7 @@ export default defineComponent({
                 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++) {
@@ -2476,13 +2483,13 @@ export default defineComponent({
             return nextTick().then(() => {
                 const { scrollXLoad, scrollYLoad } = reactData;
                 const { 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 ? XEUtils.toNumber(sXOpts.oSize) : 0);
-                    scrollXStore.preloadSize = 4;
+                    const offsetXSize = Math.max(0, virtualXOpts.oSize ? XEUtils.toNumber(virtualXOpts.oSize) : 0);
+                    scrollXStore.preloadSize = XEUtils.toNumber(virtualXOpts.preSize);
                     scrollXStore.offsetSize = offsetXSize;
                     scrollXStore.visibleSize = visibleXSize;
                     scrollXStore.endIndex = Math.max(scrollXStore.startIndex + scrollXStore.visibleSize + offsetXSize, scrollXStore.endIndex);
@@ -2495,15 +2502,14 @@ export default defineComponent({
                 else {
                     $xeTable.updateScrollXSpace();
                 }
-                calcCellHeight();
                 // 计算 Y 逻辑
                 const rowHeight = computeRowHeight();
                 scrollYStore.rowHeight = rowHeight;
                 reactData.rowHeight = rowHeight;
                 const { toVisibleIndex: toYVisibleIndex, visibleSize: visibleYSize } = handleVirtualYVisible();
                 if (scrollYLoad) {
-                    const offsetYSize = Math.max(0, sYOpts.oSize ? XEUtils.toNumber(sYOpts.oSize) : 0);
-                    scrollYStore.preloadSize = 2;
+                    const offsetYSize = Math.max(0, virtualYOpts.oSize ? XEUtils.toNumber(virtualYOpts.oSize) : 0);
+                    scrollYStore.preloadSize = XEUtils.toNumber(virtualYOpts.preSize);
                     scrollYStore.offsetSize = offsetYSize;
                     scrollYStore.visibleSize = visibleYSize;
                     scrollYStore.endIndex = Math.max(scrollYStore.startIndex + visibleYSize + offsetYSize, scrollYStore.endIndex);
@@ -2533,7 +2539,6 @@ export default defineComponent({
             return computeScrollLoad().then(() => {
                 if (reFull === true) {
                     // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
-                    calcCellHeight();
                     calcCellWidth();
                     autoCellWidth();
                     updateStyle();
@@ -2668,6 +2673,7 @@ export default defineComponent({
                         if (sYOpts.scrollToTopOnChange) {
                             targetScrollTop = 0;
                         }
+                        calcCellHeight();
                         // 是否变更虚拟滚动
                         if (oldScrollYLoad === sYLoad) {
                             restoreScrollLocation($xeTable, targetScrollLeft, targetScrollTop)
@@ -3046,13 +3052,13 @@ export default defineComponent({
         /**
          * 纵向 Y 可视渲染处理
          */
-        const loadScrollYData = () => {
+        const loadScrollYData = (scrollTop) => {
             const { showOverflow } = props;
             const { mergeList } = reactData;
             const { scrollYStore } = internalData;
             const { preloadSize, startIndex, endIndex, offsetSize } = scrollYStore;
             const autoOffsetYSize = showOverflow ? offsetSize : offsetSize + 1;
-            const { toVisibleIndex, visibleSize } = handleVirtualYVisible();
+            const { toVisibleIndex, visibleSize } = handleVirtualYVisible(scrollTop);
             const offsetItem = {
                 startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize - preloadSize),
                 endIndex: toVisibleIndex + visibleSize + autoOffsetYSize + preloadSize
@@ -3112,10 +3118,8 @@ export default defineComponent({
             }, fpsTime);
         };
         const lazyScrollYData = () => {
-            const { showOverflow } = props;
-            const { lyTimeout, lyRunTime, scrollYStore } = internalData;
-            const { visibleSize } = scrollYStore;
-            const fpsTime = showOverflow ? 5 : Math.max(5, Math.min(80, Math.floor(visibleSize / 2)));
+            const { lyTimeout, lyRunTime } = internalData;
+            const fpsTime = Math.floor(Math.max(4, Math.min(10, 20 / 3)));
             if (lyTimeout) {
                 clearTimeout(lyTimeout);
             }
@@ -3144,16 +3148,14 @@ export default defineComponent({
                 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();
@@ -8262,9 +8264,9 @@ export default defineComponent({
                     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: ''
                     });
                 }
@@ -8464,9 +8466,7 @@ export default defineComponent({
             updateScrollXData() {
                 const { showOverflow } = props;
                 handleTableColumn();
-                // calcCellHeight()
                 return nextTick().then(() => {
-                    // calcCellHeight()
                     handleTableColumn();
                     $xeTable.updateScrollXSpace();
                     if (!showOverflow) {
@@ -8476,9 +8476,7 @@ export default defineComponent({
             },
             updateScrollYData() {
                 $xeTable.handleTableData();
-                // calcCellHeight()
                 return nextTick().then(() => {
-                    // calcCellHeight()
                     $xeTable.handleTableData();
                     $xeTable.updateScrollYSpace();
                 });

package/es/table/style.css

@@ -2901,6 +2901,15 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.vxe-table--render-default .vxe-body--column.col--auto-height {
+  overflow: hidden;
+}
+.vxe-table--render-default .vxe-body--column.col--auto-height > .vxe-cell {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  overflow: hidden;
+}
 .vxe-table--render-default .vxe-table--expanded {
   cursor: pointer;
 }