vxe-table 3.15.7 → 3.15.9

package/es/table/src/footer.js

@@ -5,7 +5,7 @@ import { updateCellTitle } from '../../ui/src/dom';
 import { getCellHeight } from './util';
 const renderType = 'footer';
 const { renderer, renderEmptyElement } = VxeUI;
-function renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIndex) {
+function renderRows(h, _vm, isOptimizeMode, tableColumn, footerTableData, row, $rowIndex, _rowIndex) {
     const props = _vm;
     const $xeTable = _vm.$parent;
     const tableProps = $xeTable;
@@ -37,10 +37,10 @@ function renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIn
         const isPadding = XEUtils.isBoolean(footerCellOpts.padding) ? footerCellOpts.padding : cellOpts.padding;
         const footOverflow = XEUtils.eqNull(showFooterOverflow) ? allColumnFooterOverflow : showFooterOverflow;
         const footAlign = footerAlign || (compConf ? compConf.tableFooterCellAlign : '') || allFooterAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign;
-        let showEllipsis = footOverflow === 'ellipsis';
+        const showEllipsis = footOverflow === 'ellipsis';
         const showTitle = footOverflow === 'title';
         const showTooltip = footOverflow === true || footOverflow === 'tooltip';
-        let hasEllipsis = showTitle || showTooltip || showEllipsis;
+        const hasEllipsis = showTitle || showTooltip || showEllipsis;
         const showResizable = (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable));
         const attrs = { colid };
         const tfOns = {};
@@ -64,10 +64,6 @@ function renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIn
             type: renderType,
             data: footerTableData
         };
-        // 纵向虚拟滚动不支持动态行高
-        if (scrollXLoad && !hasEllipsis) {
-            showEllipsis = hasEllipsis = true;
-        }
         if (showTitle || showTooltip || showAllTip) {
             tfOns.mouseenter = (evnt) => {
                 if (showTitle) {
@@ -126,7 +122,7 @@ function renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIn
         const isLastColumn = $columnIndex === tableColumn.length - 1;
         const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto');
         let isVNPreEmptyStatus = false;
-        if (!isMergeCell) {
+        if (isOptimizeMode && !isMergeCell) {
             if (scrollXLoad && !column.fixed && !virtualXOpts.immediate && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
                 isVNPreEmptyStatus = true;
             }
@@ -188,7 +184,7 @@ function renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIn
         ]);
     });
 }
-function renderHeads(h, _vm, renderColumnList) {
+function renderHeads(h, _vm, isOptimizeMode, renderColumnList) {
     const props = _vm;
     const $xeTable = _vm.$parent;
     const tableProps = $xeTable;
@@ -213,7 +209,7 @@ function renderHeads(h, _vm, renderColumnList) {
                     ],
                     style: footerRowStyle ? (XEUtils.isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle) : undefined
                 }
-            }, renderRows(h, _vm, renderColumnList, footerTableData, row, $rowIndex, _rowIndex));
+            }, renderRows(h, _vm, isOptimizeMode, renderColumnList, footerTableData, row, $rowIndex, _rowIndex));
         }
         return h('tr', {
             key: $rowIndex,
@@ -222,7 +218,7 @@ function renderHeads(h, _vm, renderColumnList) {
                 footerRowClassName ? XEUtils.isFunction(footerRowClassName) ? footerRowClassName(rowParams) : footerRowClassName : ''
             ],
             style: footerRowStyle ? (XEUtils.isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle) : undefined
-        }, renderRows(h, _vm, renderColumnList, footerTableData, row, $rowIndex, _rowIndex));
+        }, renderRows(h, _vm, isOptimizeMode, renderColumnList, footerTableData, row, $rowIndex, _rowIndex));
     });
 }
 export default {
@@ -284,11 +280,11 @@ export default {
         const { fixedType, fixedColumn, tableColumn } = props;
         const { spanMethod, footerSpanMethod, showFooterOverflow: allColumnFooterOverflow } = tableProps;
         const { visibleColumn, fullColumnIdData } = tableInternalData;
-        const { isGroup, isColLoading, overflowX, scrollXLoad, scrollYLoad, dragCol } = tableReactData;
+        const { isGroup, isColLoading, overflowX, scrollXLoad, dragCol } = tableReactData;
         let renderColumnList = tableColumn;
         let isOptimizeMode = false;
         // 如果是使用优化模式
-        if (scrollXLoad || scrollYLoad || allColumnFooterOverflow) {
+        if (scrollXLoad && allColumnFooterOverflow) {
             if (spanMethod || footerSpanMethod) {
                 // 如果不支持优化模式
             }
@@ -296,7 +292,7 @@ export default {
                 isOptimizeMode = true;
             }
         }
-        if (!isColLoading && (fixedType || !overflowX)) {
+        if (!isOptimizeMode || (!isColLoading && (fixedType || !overflowX))) {
             renderColumnList = visibleColumn;
         }
         if (fixedType) {
@@ -382,7 +378,7 @@ export default {
                    */
                     h('tfoot', {
                         ref: 'refFooterTFoot'
-                    }, renderHeads(h, this, renderColumnList))
+                    }, renderHeads(h, this, isOptimizeMode, renderColumnList))
                 ])
             ])
         ]);

package/es/table/src/header.js

@@ -35,10 +35,10 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
         const isPadding = XEUtils.isBoolean(headerCellOpts.padding) ? headerCellOpts.padding : cellOpts.padding;
         const headOverflow = XEUtils.isUndefined(showHeaderOverflow) || XEUtils.isNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow;
         const headAlign = headerAlign || (compConf ? compConf.tableHeaderCellAlign : '') || allHeaderAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign;
-        let showEllipsis = headOverflow === 'ellipsis';
+        const showEllipsis = headOverflow === 'ellipsis';
         const showTitle = headOverflow === 'title';
         const showTooltip = headOverflow === true || headOverflow === 'tooltip';
-        let hasEllipsis = showTitle || showTooltip || showEllipsis;
+        const hasEllipsis = showTitle || showTooltip || showEllipsis;
         let hasFilter = false;
         let firstFilterOption = null;
         if (filters) {
@@ -47,7 +47,20 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
         }
         const columnIndex = colRest.index;
         const _columnIndex = colRest._index;
-        const cellParams = { $table: $xeTable, $grid: $xeGrid, $rowIndex, column, columnIndex, $columnIndex, _columnIndex, firstFilterOption, fixed: fixedType, type: cellType, isHidden: fixedHiddenColumn, hasFilter };
+        const cellParams = {
+            $table: $xeTable,
+            $grid: $xeGrid,
+            $rowIndex,
+            column,
+            columnIndex,
+            $columnIndex,
+            _columnIndex,
+            firstFilterOption,
+            fixed: fixedType,
+            type: cellType,
+            isHidden: fixedHiddenColumn,
+            hasFilter
+        };
         const thAttrs = {
             colid,
             colspan: column.colSpan > 1 ? column.colSpan : null,
@@ -57,10 +70,6 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
             click: (evnt) => $xeTable.triggerHeaderCellClickEvent(evnt, cellParams),
             dblclick: (evnt) => $xeTable.triggerHeaderCellDblclickEvent(evnt, cellParams)
         };
-        // 虚拟滚动不支持动态高度
-        if (scrollXLoad && !hasEllipsis) {
-            showEllipsis = hasEllipsis = true;
-        }
         const isColDragCell = columnOpts.drag && columnDragOpts.trigger === 'cell';
         let isDisabledDrag = false;
         if (isColDragCell) {
@@ -83,7 +92,7 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
         const showResizable = (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable));
         const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto');
         let isVNPreEmptyStatus = false;
-        if (!isGroup) {
+        if (isOptimizeMode && !isGroup) {
             if (!dragCol || dragCol.id !== colid) {
                 if (scrollXLoad && !column.fixed && !virtualXOpts.immediate && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
                     isVNPreEmptyStatus = true;
@@ -254,7 +263,7 @@ export default {
         const { fixedType, fixedColumn, tableColumn } = props;
         const { headerColumn } = this;
         const { mouseConfig, showHeaderOverflow: allColumnHeaderOverflow, spanMethod, footerSpanMethod } = tableProps;
-        const { isGroup, isColLoading, overflowX, scrollXLoad, scrollYLoad, dragCol } = tableReactData;
+        const { isGroup, isColLoading, overflowX, scrollXLoad, dragCol } = tableReactData;
         const { visibleColumn, fullColumnIdData } = tableInternalData;
         const mouseOpts = $xeTable.computeMouseOpts;
         let renderHeaderList = headerColumn;
@@ -265,7 +274,7 @@ export default {
         }
         else {
             // 如果是使用优化模式
-            if (scrollXLoad || scrollYLoad || allColumnHeaderOverflow) {
+            if (scrollXLoad && allColumnHeaderOverflow) {
                 if (spanMethod || footerSpanMethod) {
                     // 如果不支持优化模式
                 }
@@ -273,7 +282,7 @@ export default {
                     isOptimizeMode = true;
                 }
             }
-            if (!isColLoading && (fixedType || !overflowX)) {
+            if (!isOptimizeMode || (!isColLoading && (fixedType || !overflowX))) {
                 renderColumnList = visibleColumn;
             }
             if (fixedType) {

package/es/table/src/methods.js

@@ -829,7 +829,7 @@ function updateStyle($xeTable) {
     const reactData = $xeTable;
     const internalData = $xeTable;
     const { showHeaderOverflow: allColumnHeaderOverflow, showFooterOverflow: allColumnFooterOverflow, mouseConfig, spanMethod, footerSpanMethod } = props;
-    const { isGroup, currentRow, tableColumn, scrollXLoad, scrollYLoad, overflowX, scrollbarWidth, overflowY, scrollbarHeight, scrollXWidth, columnStore, editStore, isAllOverflow, expandColumn } = reactData;
+    const { isGroup, currentRow, tableColumn, scrollXLoad, scrollYLoad, overflowX, scrollbarWidth, overflowY, scrollbarHeight, scrollXWidth, columnStore, editStore, isAllOverflow, expandColumn, isColLoading } = reactData;
     const { visibleColumn, tableHeight, headerHeight, footerHeight, elemStore, customHeight, customMinHeight, customMaxHeight } = internalData;
     const el = $xeTable.$refs.refElem;
     if (!el) {
@@ -939,7 +939,7 @@ function updateStyle($xeTable) {
                 }
                 else {
                     // 如果是使用优化模式
-                    if (scrollXLoad || scrollYLoad || allColumnHeaderOverflow) {
+                    if (scrollXLoad && allColumnHeaderOverflow) {
                         if (spanMethod || footerSpanMethod) {
                             // 如果不支持优化模式
                         }
@@ -947,8 +947,10 @@ function updateStyle($xeTable) {
                             isOptimizeMode = true;
                         }
                     }
-                    if (fixedType) {
+                    if (!isOptimizeMode || (!isColLoading && (fixedType || !overflowX))) {
                         renderColumnList = visibleColumn;
+                    }
+                    if (fixedType) {
                         // 如果是使用优化模式
                         if (isOptimizeMode) {
                             renderColumnList = fixedColumn || [];
@@ -1040,7 +1042,7 @@ function updateStyle($xeTable) {
                 let renderColumnList = tableColumn;
                 let isOptimizeMode = false;
                 // 如果是使用优化模式
-                if (scrollXLoad || scrollYLoad || allColumnFooterOverflow) {
+                if (scrollXLoad && allColumnFooterOverflow) {
                     if (spanMethod || footerSpanMethod) {
                         // 如果不支持优化模式
                     }
@@ -1048,8 +1050,10 @@ function updateStyle($xeTable) {
                         isOptimizeMode = true;
                     }
                 }
-                if (fixedType) {
+                if (!isOptimizeMode) {
                     renderColumnList = visibleColumn;
+                }
+                if (fixedType) {
                     if (isOptimizeMode) {
                         renderColumnList = fixedColumn || [];
                     }

package/es/table/style.css

@@ -2493,11 +2493,6 @@
   line-height: var(--vxe-ui-table-row-line-height);
   text-align: left;
 }
-.vxe-table--render-default .vxe-header--column.col--current,
-.vxe-table--render-default .vxe-body--column.col--current,
-.vxe-table--render-default .vxe-footer--column.col--current {
-  background-color: var(--vxe-ui-table-column-current-background-color);
-}
 .vxe-table--render-default .vxe-header--column.col--center,
 .vxe-table--render-default .vxe-body--column.col--center,
 .vxe-table--render-default .vxe-footer--column.col--center {
@@ -2529,6 +2524,18 @@
 .vxe-table--render-default .vxe-body--row.row--stripe > .vxe-body--column {
   background-color: var(--vxe-ui-table-row-striped-background-color);
 }
+.vxe-table--render-default .vxe-header--column,
+.vxe-table--render-default .vxe-body--column,
+.vxe-table--render-default .vxe-footer--column {
+  position: relative;
+  line-height: var(--vxe-ui-table-row-line-height);
+  text-align: left;
+}
+.vxe-table--render-default .vxe-header--column.col--current,
+.vxe-table--render-default .vxe-body--column.col--current,
+.vxe-table--render-default .vxe-footer--column.col--current {
+  background-color: var(--vxe-ui-table-column-current-background-color);
+}
 .vxe-table--render-default .vxe-body--row.row--radio > .vxe-body--column {
   background-color: var(--vxe-ui-table-row-radio-checked-background-color);
 }