vxe-table 3.23.5 → 3.23.7

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

@@ -1,7 +1,7 @@
 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 } = VxeUI;
 const sourceType = 'table';
@@ -14,15 +14,12 @@ function updatePopupStyle($xeTable) {
     const { filterStore } = reactData;
     const { elemStore } = internalData;
     const { column, targetEl } = filterStore;
-    if (!column || !targetEl) {
+    if (!column) {
         return $xeTable.$nextTick();
     }
     const tableEl = $xeTable.$refs.refElem;
-    const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode();
     const filterOpts = $xeTable.computeFilterOpts;
     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']);
@@ -34,67 +31,86 @@ function updatePopupStyle($xeTable) {
     if (!filterWrapperElem) {
         return $xeTable.$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 $xeTable.$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 {
+            const filterWidth = filterWrapperElem.offsetWidth;
+            const centerWidth = targetEl ? filterWidth / 2 : ((filterWidth - column.renderWidth) / 2);
+            maxHeight = Math.max(40, tableEl.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14);
+            left = btnRect.left - tableRect.left - centerWidth;
+            top = btnRect.top - tableRect.top + currEl.clientHeight;
+            if (left < 1) {
+                left = 1;
+            }
+            else if (left > (tableEl.clientWidth - filterWidth - 1)) {
+                left = tableEl.clientWidth - filterWidth - 1;
+            }
+            if ($xeGGWrapper) {
+                const wrapperEl = $xeGGWrapper.$refs.refElem;
+                if (wrapperEl) {
+                    const wrapperRect = wrapperEl.getBoundingClientRect();
+                    top += tableRect.top - wrapperRect.top;
+                }
+            }
+            panelStyle = {
+                top: toCssUnit(top),
+                left: toCssUnit(left)
+            };
         }
-        else if (left > (tableEl.clientWidth - filterWidth - 1)) {
-            left = tableEl.clientWidth - filterWidth - 1;
+        if (zIndex) {
+            panelStyle.zIndex = zIndex;
         }
-        if ($xeGGWrapper) {
-            const wrapperEl = $xeGGWrapper.$refs.refElem;
-            if (wrapperEl) {
-                const wrapperRect = wrapperEl.getBoundingClientRect();
-                top += tableRect.top - wrapperRect.top;
+        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 $xeTable.$nextTick();
+    handleStyle();
+    return $xeTable.$nextTick().then(() => {
+        handleStyle();
+    });
 }
 export default {
     methods: {
@@ -191,14 +207,13 @@ export default {
                 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;
-                $xeTable.$nextTick(() => {
+                $xeTable.$nextTick().then(() => {
                     updatePopupStyle($xeTable);
                 });
             }

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

@@ -420,13 +420,11 @@ export default {
         // 处理当前列方向键移动
         moveCurrentColumn(isLeftArrow, isRightArrow, evnt) {
             const $xeTable = this;
-            const reactData = $xeTable;
             const internalData = $xeTable;
-            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

@@ -82,8 +82,8 @@ function renderTdColumn(h, $xeTable, seq, rowid, fixedType, isOptimizeMode, rowL
     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 = $xeTable.computeCellOpts;
     const validOpts = $xeTable.computeValidOpts;
     const checkboxOpts = $xeTable.computeCheckboxOpts;
@@ -436,7 +436,7 @@ function renderTdColumn(h, $xeTable, seq, rowid, fixedType, isOptimizeMode, rowL
                 '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
             },
             getClass(compCellClassName, cellParams),
             getClass(className, cellParams),

package/es/table/src/footer.js

@@ -17,8 +17,8 @@ function renderRows(h, _vm, isOptimizeMode, tableColumn, footerTableData, row, $
     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 = $xeTable.computeVirtualXOpts;
     const footerTooltipOpts = $xeTable.computeFooterTooltipOpts;
     const resizableOpts = $xeTable.resizableOpts;
@@ -155,7 +155,7 @@ function renderRows(h, _vm, isOptimizeMode, tableColumn, footerTableData, row, $
                     'is--pg-left': isCellPaddingLeft,
                     'is--pg-right': isCellPaddingRight,
                     'col--ellipsis': hasEllipsis,
-                    'col--current': currentColumn === column
+                    'col--current': currColFlag && currentCol === column
                 }, getClass(footerClassName, cellParams), getClass(footerCellClassName, cellParams)],
             attrs,
             style: footerCellStyle ? (XEUtils.isFunction(footerCellStyle) ? footerCellStyle(cellParams) : footerCellStyle) : undefined,

package/es/table/src/header.js

@@ -17,8 +17,8 @@ function renderRows(h, _vm, isGroup, isOptimizeMode, headerGroups, _rowIndex, co
     const tableInternalData = $xeTable;
     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 = $xeTable.computeVirtualXOpts;
     const columnOpts = $xeTable.computeColumnOpts;
     const columnDragOpts = $xeTable.computeColumnDragOpts;
@@ -172,7 +172,7 @@ function renderRows(h, _vm, isGroup, isOptimizeMode, headerGroups, _rowIndex, co
                     '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
                 }, getClass(headerClassName, cellParams), getClass(headerCellClassName, cellParams)],
             attrs: thAttrs,
             style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(cellParams) : headerCellStyle) : undefined,
@@ -221,8 +221,8 @@ function renderFilterRows(h, _vm, isOptimizeMode, cols) {
     const tableInternalData = $xeTable;
     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 = $xeTable.computeHeaderTooltipOpts;
     const cellOpts = $xeTable.computeCellOpts;
     const defaultRowHeight = $xeTable.computeDefaultRowHeight;
@@ -292,7 +292,7 @@ function renderFilterRows(h, _vm, isOptimizeMode, cols) {
                     'fixed--width': !isAutoCellWidth,
                     'is--padding': isPadding,
                     'is--sortable': column.sortable,
-                    'col--current': currentColumn === column
+                    'col--current': currColFlag && currentCol === column
                 }
             ],
             key: colid,