vxe-table 4.19.22 → 4.19.23

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

@@ -4,6 +4,7 @@ import XEUtils from 'xe-utils';
 import { getColumnList } from '../../src/util';
 import { toCssUnit } from '../../../ui/src/dom';
 const tableCustomMethodKeys = ['openCustom', 'closeCustom', 'getCustomVisible', 'toggleCustom', 'saveCustom', 'cancelCustom', 'resetCustom', 'toggleCustomAllCheckbox', 'setCustomAllCheckbox'];
+const customColumnCssKeys = ['checkbox', 'sort', 'title', 'width', 'fixed', 'align', 'header-align', 'footer-align'];
 VxeUI.hooks.add('tableCustomModule', {
     setupTable($xeTable) {
         const { reactData, internalData } = $xeTable;
@@ -17,14 +18,15 @@ VxeUI.hooks.add('tableCustomModule', {
             const customOpts = computeCustomOpts.value;
             const { mode, placement, popupOptions } = customOpts;
             const showSimple = !(mode === 'modal' || mode === 'drawer');
-            const { transfer, maxHeight } = popupOptions || {};
+            const { transfer, minWidth, maxWidth, maxHeight } = popupOptions || {};
             const customSimpleMode = computeCustomSimpleMode.value;
             const showCustomSimpleOutside = customSimpleMode === 'outside';
             const bodyEl = document.documentElement;
             let wrapperEl = refElem.value;
             let popupTop = 0;
             let popupMaxHeight = 0;
-            const popupStys = {};
+            const defPupStys = {};
+            const panePupStys = {};
             if ($xeGantt) {
                 const { refGanttContainerElem } = $xeGantt.getRefMaps();
                 const ganttContainerElem = refGanttContainerElem.value;
@@ -57,24 +59,41 @@ VxeUI.hooks.add('tableCustomModule', {
             }
             if (!placement || !(['left', 'right', 'bottom-left', 'bottom-right'].includes(placement))) {
                 if (popupTop) {
-                    popupStys.top = toCssUnit(popupTop);
+                    defPupStys.top = toCssUnit(popupTop);
                 }
             }
             if (showSimple && transfer) {
                 if (placement === 'bottom-left' || placement === 'bottom-right') {
-                    popupStys.bottom = toCssUnit(bodyEl.scrollHeight - tableRect.top - tableRect.height + 1);
+                    defPupStys.bottom = toCssUnit(bodyEl.scrollHeight - tableRect.top - tableRect.height + 1);
                 }
                 if (placement === 'top-left' || placement === 'bottom-left') {
-                    popupStys.left = toCssUnit(tableRect.left);
+                    defPupStys.left = toCssUnit(tableRect.left);
                 }
                 else if (!placement || placement === 'top-right' || placement === 'bottom-right') {
-                    popupStys.right = toCssUnit(bodyEl.scrollWidth - tableRect.left - tableRect.width + 1);
+                    defPupStys.right = toCssUnit(bodyEl.scrollWidth - tableRect.left - tableRect.width + 1);
                 }
             }
+            // 同步表格的css变量到弹窗中
+            const bodyComputeStyle = getComputedStyle(bodyEl);
+            const tableComputeStyle = getComputedStyle(wrapperEl);
+            customColumnCssKeys.forEach(key => {
+                const currCssKey = `--vxe-ui-vxe-table-custom-column-${key}-${key === 'title' ? 'min-' : ''}width`;
+                const currCssVal = tableComputeStyle.getPropertyValue(currCssKey);
+                if (currCssVal && currCssVal !== bodyComputeStyle.getPropertyValue(currCssKey)) {
+                    panePupStys[currCssKey] = currCssVal;
+                }
+            });
+            if (minWidth) {
+                defPupStys['--vxe-ui-vxe-table-custom-default-min-width'] = toCssUnit(minWidth);
+            }
+            if (maxWidth) {
+                defPupStys['--vxe-ui-vxe-table-custom-default-max-width'] = toCssUnit(maxWidth);
+            }
             if (popupMxHeight) {
-                popupStys.maxHeight = toCssUnit(popupMxHeight);
+                defPupStys.maxHeight = toCssUnit(popupMxHeight);
             }
-            customStore.popupStyle = popupStys;
+            customStore.defPopupStyle = defPupStys;
+            customStore.panePopupStyle = panePupStys;
             customStore.maxHeight = popupMxHeight;
             return nextTick();
         };
@@ -123,6 +142,9 @@ VxeUI.hooks.add('tableCustomModule', {
                     column.renderFixed = column.fixed;
                     column.renderVisible = column.visible;
                     column.renderResizeWidth = column.renderWidth;
+                    column.renderAlign = column.align;
+                    column.renderHeaderAlign = column.headerAlign;
+                    column.renderFooterAlign = column.footerAlign;
                     sortMaps[colid] = column.renderSortNumber;
                     fixedMaps[colid] = column.fixed;
                     visibleMaps[colid] = column.visible;
@@ -154,8 +176,17 @@ VxeUI.hooks.add('tableCustomModule', {
         const saveCustom = (isDirectly) => {
             const { customColumnList, aggHandleFields, rowGroupList } = reactData;
             const customOpts = computeCustomOpts.value;
-            const { allowVisible, allowSort, allowFixed, allowResizable, allowGroup, allowValues } = customOpts;
-            if (!isDirectly) {
+            const { allowVisible, allowSort, allowFixed, allowResizable, allowAlign, allowHeaderAlign, allowFooterAlign, allowGroup, allowValues } = customOpts;
+            if (isDirectly) {
+                XEUtils.eachTree(customColumnList, (column) => {
+                    if (allowResizable) {
+                        if (column.renderVisible && (!column.children || !column.children.length)) {
+                            column.resizeWidth = Math.max(0, XEUtils.toNumber(column.renderWidth));
+                        }
+                    }
+                });
+            }
+            else {
                 XEUtils.eachTree(customColumnList, (column, index, items, path, parentColumn) => {
                     if (parentColumn) {
                         // 更新子列信息
@@ -181,6 +212,15 @@ VxeUI.hooks.add('tableCustomModule', {
                     if (allowVisible) {
                         column.visible = column.renderVisible;
                     }
+                    if (allowAlign) {
+                        column.align = column.renderAlign;
+                    }
+                    if (allowHeaderAlign) {
+                        column.headerAlign = column.renderHeaderAlign;
+                    }
+                    if (allowFooterAlign) {
+                        column.footerAlign = column.renderFooterAlign;
+                    }
                     if (allowGroup && allowValues) {
                         column.aggFunc = column.renderAggFn;
                     }
@@ -211,7 +251,7 @@ VxeUI.hooks.add('tableCustomModule', {
             const { customColumnList, customStore } = reactData;
             const { oldSortMaps, oldFixedMaps, oldVisibleMaps } = customStore;
             const customOpts = computeCustomOpts.value;
-            const { allowVisible, allowSort, allowFixed, allowResizable } = customOpts;
+            const { allowVisible, allowSort, allowFixed, allowAlign, allowHeaderAlign, allowFooterAlign, allowResizable, allowGroup, allowValues } = customOpts;
             XEUtils.eachTree(customColumnList, column => {
                 const colid = column.getKey();
                 const visible = !!oldVisibleMaps[colid];
@@ -230,6 +270,21 @@ VxeUI.hooks.add('tableCustomModule', {
                 if (allowResizable) {
                     column.renderResizeWidth = column.renderWidth;
                 }
+                if (allowAlign) {
+                    column.align = column.renderAlign;
+                }
+                if (allowHeaderAlign) {
+                    column.headerAlign = column.renderHeaderAlign;
+                }
+                if (allowFooterAlign) {
+                    column.footerAlign = column.renderFooterAlign;
+                }
+                if (allowGroup) {
+                    // 无
+                }
+                if (allowValues) {
+                    // 无
+                }
             }, { children: 'children' });
             return nextTick();
         };
@@ -292,7 +347,10 @@ VxeUI.hooks.add('tableCustomModule', {
                     resizable: options === true,
                     fixed: options === true,
                     sort: options === true,
-                    aggFunc: options === true
+                    aggFunc: options === true,
+                    align: options === true,
+                    headerAlign: options === true,
+                    footerAlign: options === true
                 }, options);
                 const allCols = [];
                 XEUtils.eachTree(collectColumn, (column) => {
@@ -301,6 +359,7 @@ VxeUI.hooks.add('tableCustomModule', {
                     }
                     if (opts.fixed) {
                         column.fixed = column.defaultFixed;
+                        column.renderFixed = column.defaultFixed;
                     }
                     if (opts.sort) {
                         column.renderSortNumber = column.sortNumber;
@@ -309,6 +368,18 @@ VxeUI.hooks.add('tableCustomModule', {
                     if (!checkMethod || checkMethod({ $table: $xeTable, column })) {
                         column.visible = column.defaultVisible;
                     }
+                    if (opts.align) {
+                        column.align = column.defaultAlign;
+                        column.renderAlign = column.defaultAlign;
+                    }
+                    if (opts.headerAlign) {
+                        column.headerAlign = column.defaultHeaderAlign;
+                        column.renderHeaderAlign = column.defaultHeaderAlign;
+                    }
+                    if (opts.footerAlign) {
+                        column.footerAlign = column.defaultFooterAlign;
+                        column.renderFooterAlign = column.defaultFooterAlign;
+                    }
                     if (opts.aggFunc) {
                         column.aggFunc = column.defaultAggFunc;
                         column.renderAggFn = column.defaultAggFunc;