vxe-table 4.21.4 → 4.21.6

package/es/table/module/filter/hook.js

@@ -2,7 +2,7 @@ import { nextTick } from 'vue';
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../../ui';
 import { toFilters, handleFieldOrColumn, getRefElem } from '../../src/util';
-import { toCssUnit, triggerEvent, getDomNode } from '../../../ui/src/dom';
+import { toCssUnit, triggerEvent, updatePanelPlacement } from '../../../ui/src/dom';
 import { isEnableConf } from '../../../ui/src/utils';
 const { renderer, hooks } = VxeUI;
 const tableFilterMethodKeys = ['openFilter', 'setFilter', 'clearFilter', 'saveFilter', 'saveFilterByEvent', 'saveFilterPanel', 'saveFilterPanelByEvent', 'resetFilter', 'resetFilterByEvent', 'resetFilterPanel', 'resetFilterPanelByEvent', 'getCheckedFilters', 'updateFilterOptionStatus'];
@@ -19,15 +19,12 @@ hooks.add('tableFilterModule', {
             const { filterStore } = reactData;
             const { elemStore } = internalData;
             const { column, targetEl } = filterStore;
-            if (!column || !targetEl) {
+            if (!column) {
                 return nextTick();
             }
             const tableEl = refElem.value;
-            const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode();
             const filterOpts = computeFilterOpts.value;
             const { maxHeight: customMaxHeight, transfer, zIndex } = filterOpts;
-            const currEl = targetEl;
-            const tableRect = tableEl.getBoundingClientRect();
             const filterRender = column ? column.filterRender : null;
             const compConf = filterRender && isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
             const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
@@ -39,67 +36,82 @@ hooks.add('tableFilterModule', {
             if (!filterWrapperElem) {
                 return nextTick();
             }
-            const btnRect = currEl.getBoundingClientRect();
             const filterHeadElem = filterWrapperElem.querySelector('.vxe-table--filter-header');
             const filterFootElem = filterWrapperElem.querySelector('.vxe-table--filter-footer');
-            const filterWidth = filterWrapperElem.offsetWidth;
-            const centerWidth = currEl ? filterWidth / 2 : ((filterWidth - column.renderWidth) / 2);
-            let left = 0;
-            let top = 0;
-            let maxHeight = 0;
             /**
              * 是否显示筛选按钮图标
              * 如果不存在图标，则相对单元格居中显示
              */
-            if (transfer) {
-                left = btnRect.left - centerWidth + scrollLeft;
-                top = btnRect.top + currEl.clientHeight + scrollTop;
-                maxHeight = Math.min(Math.max(tableRect.height, Math.floor(visibleHeight / 2)), Math.max(80, visibleHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 28));
-                if (left < 16) {
-                    left = 16;
+            const handleStyle = () => {
+                let currEl = targetEl;
+                if (!targetEl) {
+                    const headerWrapperElem = getRefElem(elemStore[`${column.fixed || 'main'}-header-wrapper`] || elemStore['main-header-wrapper']);
+                    const colEl = headerWrapperElem ? headerWrapperElem.querySelector(`.vxe-header--column.${column.id}`) : null;
+                    if (colEl) {
+                        currEl = colEl;
+                    }
                 }
-                else if (left > (visibleWidth - filterWidth - 16)) {
-                    left = visibleWidth - filterWidth - 16;
+                if (!currEl) {
+                    return nextTick();
                 }
-            }
-            else {
-                left = btnRect.left - tableRect.left - centerWidth;
-                top = btnRect.top - tableRect.top + currEl.clientHeight;
-                maxHeight = Math.max(40, tableEl.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14);
-                if (left < 1) {
-                    left = 1;
+                const btnRect = currEl.getBoundingClientRect();
+                const tableRect = tableEl.getBoundingClientRect();
+                let left = 0;
+                let top = 0;
+                let maxHeight = 0;
+                let panelStyle = {};
+                if (transfer) {
+                    const ppObj = updatePanelPlacement(currEl, filterWrapperElem, {
+                        defaultPlacement: 'bottom',
+                        isMinWidth: false,
+                        teleportTo: transfer
+                    });
+                    panelStyle = ppObj.style;
                 }
-                else if (left > (tableEl.clientWidth - filterWidth - 1)) {
-                    left = tableEl.clientWidth - filterWidth - 1;
+                else {
+                    const filterWidth = filterWrapperElem.offsetWidth;
+                    const centerWidth = targetEl ? filterWidth / 2 : ((filterWidth - column.renderWidth) / 2);
+                    left = btnRect.left - tableRect.left - centerWidth;
+                    top = btnRect.top - tableRect.top + currEl.clientHeight;
+                    maxHeight = Math.max(40, tableEl.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14);
+                    if (left < 1) {
+                        left = 1;
+                    }
+                    else if (left > (tableEl.clientWidth - filterWidth - 1)) {
+                        left = tableEl.clientWidth - filterWidth - 1;
+                    }
+                    if ($xeGGWrapper) {
+                        const wrapperEl = $xeGGWrapper.getRefMaps().refElem.value;
+                        if (wrapperEl) {
+                            const wrapperRect = wrapperEl.getBoundingClientRect();
+                            top += tableRect.top - wrapperRect.top;
+                        }
+                    }
+                    panelStyle = {
+                        top: toCssUnit(top),
+                        left: toCssUnit(left)
+                    };
                 }
-                if ($xeGGWrapper) {
-                    const wrapperEl = $xeGGWrapper.getRefMaps().refElem.value;
-                    if (wrapperEl) {
-                        const wrapperRect = wrapperEl.getBoundingClientRect();
-                        top += tableRect.top - wrapperRect.top;
+                if (zIndex) {
+                    panelStyle.zIndex = zIndex;
+                }
+                filterStore.style = panelStyle;
+                // 筛选面板是自适应表格高度
+                if (compConf ? !compConf.tableFilterAutoHeight : false) {
+                    maxHeight = 0;
+                }
+                else {
+                    if (customMaxHeight) {
+                        maxHeight = customMaxHeight > maxHeight ? maxHeight : customMaxHeight;
                     }
                 }
-            }
-            const fStys = {
-                top: toCssUnit(top),
-                left: toCssUnit(left)
+                // 判断面板不能大于表格高度
+                filterStore.maxHeight = maxHeight;
             };
-            if (zIndex) {
-                fStys.zIndex = zIndex;
-            }
-            filterStore.style = fStys;
-            // 筛选面板是自适应表格高度
-            if (compConf ? !compConf.tableFilterAutoHeight : false) {
-                maxHeight = 0;
-            }
-            else {
-                if (customMaxHeight) {
-                    maxHeight = customMaxHeight > maxHeight ? maxHeight : customMaxHeight;
-                }
-            }
-            // 判断面板不能大于表格高度
-            filterStore.maxHeight = maxHeight;
-            return nextTick();
+            handleStyle();
+            return nextTick().then(() => {
+                handleStyle();
+            });
         };
         const filterPrivateMethods = {
             checkFilterOptions() {
@@ -117,15 +129,14 @@ hooks.add('tableFilterModule', {
                     filterStore.visible = false;
                 }
                 else {
-                    const currEl = btnEl || colEl;
                     $xeTable.handleFilterOptions(column);
                     internalData._currFilterParams = params;
-                    filterStore.targetEl = currEl;
+                    filterStore.targetEl = btnEl;
                     filterStore.style = null;
                     filterStore.visible = true;
                     initStore.filter = true;
                 }
-                nextTick(() => {
+                nextTick().then(() => {
                     updatePopupStyle();
                 });
                 $xeTable.dispatchEvent('filter-visible', { column, field: column.field, property: column.field, filterList: $xeTable.getCheckedFilters(), visible: filterStore.visible }, evnt);

package/es/table/module/keyboard/hook.js

@@ -433,11 +433,10 @@ hooks.add('tableKeyboardModule', {
             },
             // 处理当前列方向键移动
             moveCurrentColumn(isLeftArrow, isRightArrow, evnt) {
-                const { currentColumn } = reactData;
-                const { visibleColumn } = internalData;
+                const { currentCol, visibleColumn } = internalData;
                 let targetCol = null;
-                if (currentColumn) {
-                    const _columnIndex = $xeTable.getVTColumnIndex(currentColumn);
+                if (currentCol) {
+                    const _columnIndex = $xeTable.getVTColumnIndex(currentCol);
                     if (isLeftArrow && _columnIndex > 0) {
                         targetCol = visibleColumn[_columnIndex - 1];
                     }

package/es/table/src/body.js

@@ -98,8 +98,8 @@ export default defineVxeComponent({
             const $xeGrid = $xeTable.xeGrid;
             const $xeGantt = $xeTable.xeGantt;
             const { columnKey, resizable: allResizable, showOverflow: allShowOverflow, border, height, treeConfig, cellClassName: allCellClassName, cellStyle, align: allAlign, spanMethod, mouseConfig, editConfig, editRules, tooltipConfig, padding: allPadding } = tableProps;
-            const { tableData, tableColumn, dragRow, overflowX, overflowY, currentColumn, scrollXLoad, scrollYLoad, mergeBodyFlag, calcCellHeightFlag, resizeHeightFlag, resizeWidthFlag, editStore, isAllOverflow, validErrorMaps } = tableReactData;
-            const { fullAllDataRowIdData, fullColumnIdData, mergeBodyCellMaps, visibleColumn, afterFullData, mergeBodyList, scrollXStore, scrollYStore, keepUpdateFieldMaps } = tableInternalData;
+            const { tableData, tableColumn, dragRow, overflowX, overflowY, scrollXLoad, scrollYLoad, mergeBodyFlag, calcCellHeightFlag, resizeHeightFlag, resizeWidthFlag, editStore, isAllOverflow, validErrorMaps, currColFlag } = tableReactData;
+            const { fullAllDataRowIdData, fullColumnIdData, mergeBodyCellMaps, visibleColumn, afterFullData, mergeBodyList, scrollXStore, scrollYStore, keepUpdateFieldMaps, currentCol } = tableInternalData;
             const cellOpts = computeCellOpts.value;
             const validOpts = computeValidOpts.value;
             const checkboxOpts = computeCheckboxOpts.value;
@@ -444,7 +444,7 @@ export default defineVxeComponent({
                         'col--active': editConfig && isEdit && (actived.row === row && (actived.column === column || editOpts.mode === 'row')),
                         'col--valid-error': !!errorValidItem,
                         'show--valid-bg': errorValidItem && validOpts.showErrorBackground,
-                        'col--current': currentColumn === column
+                        'col--current': currColFlag && currentCol === column
                     },
                     getPropClass(compCellClassName, cellParams),
                     getPropClass(className, cellParams),

package/es/table/src/footer.js

@@ -43,8 +43,8 @@ export default defineVxeComponent({
             const $xeGantt = $xeTable.xeGantt;
             const { fixedType } = props;
             const { resizable: allResizable, border, footerCellClassName, footerCellStyle, footerAlign: allFooterAlign, footerSpanMethod, align: allAlign, columnKey, showFooterOverflow: allColumnFooterOverflow } = tableProps;
-            const { scrollXLoad, scrollYLoad, overflowX, currentColumn, mergeFootFlag } = tableReactData;
-            const { fullColumnIdData, mergeFooterList, mergeFooterCellMaps, scrollXStore } = tableInternalData;
+            const { scrollXLoad, scrollYLoad, overflowX, mergeFootFlag, currColFlag } = tableReactData;
+            const { fullColumnIdData, mergeFooterList, mergeFooterCellMaps, scrollXStore, currentCol } = tableInternalData;
             const virtualXOpts = computeVirtualXOpts.value;
             const footerTooltipOpts = computeFooterTooltipOpts.value;
             const resizableOpts = computeResizableOpts.value;
@@ -180,7 +180,7 @@ export default defineVxeComponent({
                             'is--pg-left': isCellPaddingLeft,
                             'is--pg-right': isCellPaddingRight,
                             'col--ellipsis': hasEllipsis,
-                            'col--current': currentColumn === column
+                            'col--current': currColFlag && currentCol === column
                         }, getPropClass(footerClassName, cellParams), getPropClass(footerCellClassName, cellParams)] }, attrs), { style: footerCellStyle ? (XEUtils.isFunction(footerCellStyle) ? footerCellStyle(cellParams) : footerCellStyle) : null }), tfOns), { key: columnKey || scrollXLoad || scrollYLoad || columnOpts.useKey || columnOpts.drag ? column.id : $columnIndex }), [
                     h('div', {
                         class: ['vxe-cell', {

package/es/table/src/header.js

@@ -53,8 +53,8 @@ export default defineVxeComponent({
             const $xeGantt = $xeTable.xeGantt;
             const { fixedType } = props;
             const { resizable: allResizable, columnKey, showCustomHeader, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps;
-            const { currentColumn, dragCol, scrollXLoad, scrollYLoad, overflowX, mergeHeadFlag, tableColumn } = tableReactData;
-            const { fullColumnIdData, scrollXStore, mergeHeaderList, mergeHeaderCellMaps } = tableInternalData;
+            const { dragCol, scrollXLoad, scrollYLoad, overflowX, mergeHeadFlag, tableColumn, currColFlag } = tableReactData;
+            const { fullColumnIdData, scrollXStore, mergeHeaderList, mergeHeaderCellMaps, currentCol } = tableInternalData;
             const virtualXOpts = computeVirtualXOpts.value;
             const columnOpts = computeColumnOpts.value;
             const columnDragOpts = computeColumnDragOpts.value;
@@ -206,7 +206,7 @@ export default defineVxeComponent({
                             'is--filter-active': hasFilter,
                             'is--drag-active': columnOpts.drag && !column.fixed && !isDisabledDrag && (isCrossDrag || isPeerDrag || !column.parentId),
                             'is--drag-disabled': columnOpts.drag && isDisabledDrag,
-                            'col--current': currentColumn === column
+                            'col--current': currColFlag && currentCol === column
                         },
                         headerClassName ? (XEUtils.isFunction(headerClassName) ? headerClassName(cellParams) : headerClassName) : '',
                         headerCellClassName ? (XEUtils.isFunction(headerCellClassName) ? headerCellClassName(cellParams) : headerCellClassName) : ''
@@ -244,8 +244,8 @@ export default defineVxeComponent({
             const $xeGantt = $xeTable.xeGantt;
             const { fixedType } = props;
             const { showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign } = tableProps;
-            const { currentColumn, overflowX } = tableReactData;
-            const { fullColumnIdData } = tableInternalData;
+            const { overflowX, currColFlag } = tableReactData;
+            const { fullColumnIdData, currentCol } = tableInternalData;
             const headerTooltipOpts = computeHeaderTooltipOpts.value;
             const cellOpts = computeCellOpts.value;
             const defaultRowHeight = computeDefaultRowHeight.value;
@@ -314,7 +314,7 @@ export default defineVxeComponent({
                             'fixed--width': !isAutoCellWidth,
                             'is--padding': isPadding,
                             'is--sortable': column.sortable,
-                            'col--current': currentColumn === column
+                            'col--current': currColFlag && currentCol === column
                         }
                     ], key: colid }, thAttrs), [
                     h('div', {

package/es/table/src/table.js

@@ -1,7 +1,7 @@
 import { h, reactive, ref, provide, inject, nextTick, Teleport, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, watch, computed, onMounted } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
-import { initTpImg, getTpImg, isPx, isScale, hasClass, addClass, removeClass, wheelScrollTopTo, wheelScrollLeftTo, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, toCssUnit, hasControlKey, checkTargetElement, hasEventInputTarget } from '../../ui/src/dom';
+import { initTpImg, getTpImg, isPx, isScale, hasClass, addClass, removeClass, wheelScrollTopTo, wheelScrollLeftTo, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, toCssUnit, hasControlKey, checkTargetElement, hasAxternalInputTarget } from '../../ui/src/dom';
 import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils';
 import { VxeUI } from '../../ui';
 import { createReactData, createInternalData, getRowUniqueId, createRowId, clearTableAllStatus, getColumnList, toFilters, hasDeepKey, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getRefElem, getColReMinWidth, getColReMaxWidth, createHandleUpdateRowId, createHandleGetRowId, getCalcHeight, getCellRestHeight, getLastChildColumn, getRowMaxHeight, handleCustomStoreConfig, encodeRowid } from './util';
@@ -298,10 +298,18 @@ export default defineVxeComponent({
             return Object.assign({}, getConfig().tooltip, getConfig().table.tooltipConfig, props.tooltipConfig);
         });
         const computeHeaderTooltipOpts = computed(() => {
-            return Object.assign({}, getConfig().tooltip, getConfig().table.headerTooltipConfig, props.headerTooltipConfig);
+            const tooltipOpts = computeTooltipOpts.value;
+            return Object.assign({}, getConfig().tooltip, {
+                enterable: tooltipOpts.enterable,
+                defaultPlacement: tooltipOpts.defaultPlacement
+            }, getConfig().table.headerTooltipConfig, props.headerTooltipConfig);
         });
         const computeFooterTooltipOpts = computed(() => {
-            return Object.assign({}, getConfig().tooltip, getConfig().table.footerTooltipConfig, props.footerTooltipConfig);
+            const tooltipOpts = computeTooltipOpts.value;
+            return Object.assign({}, getConfig().tooltip, {
+                enterable: tooltipOpts.enterable,
+                defaultPlacement: tooltipOpts.defaultPlacement
+            }, getConfig().table.footerTooltipConfig, props.footerTooltipConfig);
         });
         const computeTableTipConfig = computed(() => {
             const { tooltipStore } = reactData;
@@ -6747,7 +6755,7 @@ export default defineVxeComponent({
             },
             getCurrentColumn() {
                 const columnOpts = computeColumnOpts.value;
-                return columnOpts.isCurrent || props.highlightCurrentColumn ? reactData.currentColumn : null;
+                return columnOpts.isCurrent || props.highlightCurrentColumn ? internalData.currentCol : null;
             },
             /**
              * 用于当前列，设置某列行为高亮状态
@@ -6759,7 +6767,8 @@ export default defineVxeComponent({
                 const column = handleFieldOrColumn($xeTable, fieldOrColumn);
                 if (column) {
                     $xeTable.clearCurrentColumn();
-                    reactData.currentColumn = column;
+                    internalData.currentCol = column;
+                    reactData.currColFlag++; // 刷新当前列状态
                 }
                 return nextTick().then(() => {
                     // 更新状选中态
@@ -6772,7 +6781,8 @@ export default defineVxeComponent({
              * 用于当前列，手动清空当前高亮的状态
              */
             clearCurrentColumn() {
-                reactData.currentColumn = null;
+                internalData.currentCol = null;
+                reactData.currColFlag++; // 刷新当前列状态
                 return nextTick();
             },
             setPendingRow(rows, status) {
@@ -8415,8 +8425,7 @@ export default defineVxeComponent({
         };
         const handleGlobalScrollEvent = (evnt) => {
             const { filterStore } = reactData;
-            const filterOpts = computeFilterOpts.value;
-            if (filterStore.visible && filterOpts.transfer) {
+            if (filterStore.visible) {
                 $xeTable.handleFilterStyle();
             }
             reUpdateCustomStyleEvent(evnt);
@@ -8856,7 +8865,7 @@ export default defineVxeComponent({
                                 .then(() => $xeTable.triggerCurrentRowEvent(evnt, params));
                         }
                     }
-                    else if (keyboardConfig && keyboardOpts.isUndoRedo && isControlKey && (isZ || isY) && !hasEventInputTarget(evnt.target)) {
+                    else if (keyboardConfig && keyboardOpts.isUndoRedo && isControlKey && (isZ || isY) && !hasAxternalInputTarget(evnt.target)) {
                         if (evnt.target) {
                             if (isY || (hasShiftKey && isZ)) {
                                 // 恢复被撤销的操作：Ctrl + Y 或 Ctrl + Shift + Z
@@ -8962,6 +8971,10 @@ export default defineVxeComponent({
             }
         };
         const handleGlobalResizeEvent = () => {
+            const { filterStore } = reactData;
+            if (filterStore.visible) {
+                $xeTable.handleFilterStyle();
+            }
             if ($xeTable.closeMenu) {
                 $xeTable.closeMenu();
             }
@@ -11152,7 +11165,7 @@ export default defineVxeComponent({
                 }
             },
             triggerCurrentColumnEvent(evnt, params) {
-                const { currentColumn: oldValue } = reactData;
+                const { currentCol: oldValue } = internalData;
                 const columnOpts = computeColumnOpts.value;
                 const currentColumnOpts = computeCurrentColumnOpts.value;
                 const beforeRowMethod = currentColumnOpts.beforeSelectMethod || columnOpts.currentMethod;
@@ -13352,9 +13365,9 @@ export default defineVxeComponent({
             },
             setHoverRow(row) {
                 const $xeGanttView = internalData.xeGanttView;
+                $xeTable.clearHoverRow();
                 const rowid = getRowid($xeTable, row);
                 const el = refElem.value;
-                $xeTable.clearHoverRow();
                 if (el) {
                     XEUtils.arrayEach(el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]`), elem => addClass(elem, 'row--hover'));
                 }

package/es/table/src/util.js

@@ -38,6 +38,10 @@ export function createInternalData() {
         customMaxHeight: 0,
         // 当前 hover 行
         hoverRow: null,
+        hoverCol: null,
+        // 当前行
+        currentRow: null,
+        currentCol: null,
         // 最后滚动位置
         lastScrollLeft: 0,
         lastScrollTop: 0,
@@ -85,8 +89,6 @@ export function createInternalData() {
         fullColumnFieldData: {},
         fullCellHeightMaps: {},
         fullCellStoreMaps: {},
-        // 当前行
-        currentRow: null,
         // 合并表头单元格的数据
         mergeHeaderList: [],
         mergeHeaderMaps: {},
@@ -186,8 +188,6 @@ export function createReactData() {
         isAllSelected: false,
         // 复选框属性，有选中且非全选状态
         isIndeterminate: false,
-        // 单选框属性，选中列
-        currentColumn: null,
         // 单选框属性，选中行
         selectRadioRow: null,
         // 表尾合计数据
@@ -396,7 +396,8 @@ export function createReactData() {
         dragTipText: '',
         isDragResize: false,
         isRowLoading: false,
-        isColLoading: false
+        isColLoading: false,
+        currColFlag: 1
     };
 }
 const maxKey = '__max';

package/es/table/style.css

@@ -1644,7 +1644,7 @@
   padding-top: 0.2em;
 }
 .vxe-table--filter-wrapper .vxe-table--filter-body {
-  max-height: 200px;
+  max-height: var(--vxe-ui-vxe-table-filter-default-max-height);
   padding-bottom: 0.2em;
 }
 .vxe-table--filter-wrapper > ul {