vxe-table 4.10.6-beta.7 → 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

@@ -21,7 +21,7 @@ export default defineComponent({
         const $xeTable = inject('$xeTable', {});
         const { xID, props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable;
         const { refElem: tableRefElem, refLeftContainer, refRightContainer, refCellResizeBar, refCellResizeTip } = $xeTable.getRefMaps();
-        const { computeColumnOpts, computeColumnDragOpts, computeResizableOpts } = $xeTable.getComputeMaps();
+        const { computeColumnOpts, computeColumnDragOpts, computeResizableOpts, computeScrollbarXToTop } = $xeTable.getComputeMaps();
         const headerColumn = ref([]);
         const refElem = ref();
         const refHeaderScroll = ref();
@@ -37,6 +37,7 @@ export default defineComponent({
         const resizeMousedownEvent = (evnt, params) => {
             const { column } = params;
             const { fixedType } = props;
+            const { scrollbarHeight } = tableReactData;
             const { elemStore, visibleColumn } = tableInternalData;
             const resizableOpts = computeResizableOpts.value;
             const tableEl = tableRefElem.value;
@@ -44,6 +45,7 @@ export default defineComponent({
             const rightContainerElem = refRightContainer.value;
             const resizeBarElem = refCellResizeBar.value;
             const resizeTipElem = refCellResizeTip.value;
+            const scrollbarXToTop = computeScrollbarXToTop.value;
             const { clientX: dragClientX } = evnt;
             const wrapperElem = refElem.value;
             const dragBtnElem = evnt.target;
@@ -92,6 +94,7 @@ export default defineComponent({
             const updateEvent = (evnt) => {
                 evnt.stopPropagation();
                 evnt.preventDefault();
+                const tableHeight = tableEl.clientHeight;
                 const offsetX = evnt.clientX - dragClientX;
                 let left = dragPosLeft + offsetX;
                 const scrollLeft = fixedType ? 0 : bodyScrollElem.scrollLeft;
@@ -111,6 +114,8 @@ export default defineComponent({
                 dragLeft = Math.max(left, dragMinLeft);
                 const resizeBarLeft = Math.max(1, dragLeft - scrollLeft);
                 resizeBarElem.style.left = `${resizeBarLeft}px`;
+                resizeBarElem.style.top = `${scrollbarXToTop ? scrollbarHeight : 0}px`;
+                resizeBarElem.style.height = `${scrollbarXToTop ? tableHeight - scrollbarHeight : tableHeight}px`;
                 if (resizableOpts.showDragTip && resizeTipElem) {
                     const tableWidth = tableEl.clientWidth;
                     const wrapperRect = wrapperElem.getBoundingClientRect();
@@ -125,7 +130,7 @@ export default defineComponent({
                         resizeTipLeft += tableWidth - resizeBarLeft;
                     }
                     resizeTipElem.style.left = `${resizeTipLeft}px`;
-                    resizeTipElem.style.top = `${Math.min(tableEl.clientHeight - resizeTipHeight, Math.max(0, evnt.clientY - wrapperRect.y - resizeTipHeight / 2))}px`;
+                    resizeTipElem.style.top = `${Math.min(tableHeight - resizeTipHeight, Math.max(0, evnt.clientY - wrapperRect.y - resizeTipHeight / 2))}px`;
                     resizeTipElem.textContent = getI18n('vxe.table.resizeColTip', [resizeColumn.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft)]);
                 }
             };
@@ -228,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,
@@ -257,7 +262,7 @@ export default defineComponent({
                                 'c--tooltip': showTooltip,
                                 'c--ellipsis': showEllipsis
                             }]
-                    }, isPreLoadStatus || (isOptimizeMode && fixedHiddenColumn) ? [] : column.renderHeader(params)),
+                    }, isVNPreEmptyStatus || (isOptimizeMode && fixedHiddenColumn) ? [] : column.renderHeader(params)),
                     /**
                      * 列宽拖动
                      */