vxe-table 4.19.21 → 4.19.23

package/dist/all.esm.js

@@ -44,7 +44,7 @@ function eqEmptyValue(cellValue) {
     return cellValue === '' || XEUtils.eqNull(cellValue);
 }
 
-const version = "4.19.21";
+const version = "4.19.23";
 VxeUI.version = version;
 VxeUI.tableVersion = version;
 VxeUI.setConfig({
@@ -155,6 +155,7 @@ VxeUI.setConfig({
             allowResizable: true,
             allowFixed: true,
             allowSort: true,
+            allowAlign: true,
             showSortDragButton: true,
             showFooter: true,
             placement: 'top-right',
@@ -163,9 +164,11 @@ VxeUI.setConfig({
                 visible: true,
                 resizable: true,
                 sort: true,
-                fixed: true
-                // rowGroup: false,
-                // aggFunc: false
+                fixed: true,
+                align: true,
+                headerAlign: true,
+                footerAlign: true,
+                aggFunc: true
             },
             // autoAggGroupValues: false,
             //  checkMethod () {},
@@ -388,6 +391,15 @@ VxeUI.setIcon({
     TABLE_RADIO_UNCHECKED: iconPrefix + 'radio-unchecked',
     TABLE_RADIO_DISABLED_UNCHECKED: iconPrefix + 'radio-unchecked-fill',
     TABLE_CUSTOM_SORT: iconPrefix + 'drag-handle',
+    TABLE_CUSTOM_FIXED_LEFT: iconPrefix + 'fixed-left',
+    TABLE_CUSTOM_FIXED_RIGHT: iconPrefix + 'fixed-right',
+    TABLE_CUSTOM_ALIGN_LEFT: iconPrefix + 'align-left',
+    TABLE_CUSTOM_ALIGN_CENTER: iconPrefix + 'align-center',
+    TABLE_CUSTOM_ALIGN_RIGHT: iconPrefix + 'align-right',
+    TABLE_CUSTOM_MOVE_UP: iconPrefix + 'arrows-up',
+    TABLE_CUSTOM_MOVE_DN: iconPrefix + 'arrows-down',
+    TABLE_CUSTOM_PUT_TOP: iconPrefix + 'top',
+    TABLE_CUSTOM_PUT_BOTTOM: iconPrefix + 'bottom',
     TABLE_MENU_OPTIONS: iconPrefix + 'arrow-right',
     TABLE_MENU_OPTION_LOADING: iconPrefix + 'repeat roll',
     TABLE_DRAG_ROW: iconPrefix + 'drag-handle',
@@ -743,7 +755,7 @@ function wheelScrollTopTo(diffNum, cb) {
 }
 
 const { log } = VxeUI;
-const tableVersion = `table v${"4.19.21"}`;
+const tableVersion = `table v${"4.19.23"}`;
 function createComponentLog(name) {
     const uiVersion = VxeUI.uiVersion ? `ui v${VxeUI.uiVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -766,7 +778,7 @@ class ColumnInfo {
         const $xeGrid = $xeTable.xeGrid;
         const $xeGantt = $xeTable.xeGantt;
         const $xeGGWrapper = $xeGrid || $xeGantt;
-        const { type, field, width, visible, aggFunc, formatter, filterMultiple, cellRender, editRender, filterRender } = colConfs;
+        const { type, field, width, visible, fixed, align, headerAlign, footerAlign, aggFunc, formatter, filterMultiple, cellRender, editRender, filterRender } = colConfs;
         const colId = colConfs.colId || XEUtils.uniqueId('col_');
         const defaultVisible = XEUtils.isBoolean(visible) ? visible : true;
         const defaultRenderWidth = width && isPx(width) && width !== 'auto' ? Math.max(0, XEUtils.toInteger(width)) : 0;
@@ -828,10 +840,10 @@ class ColumnInfo {
             minWidth: colConfs.minWidth,
             maxWidth: colConfs.maxWidth,
             resizable: colConfs.resizable,
-            fixed: colConfs.fixed,
-            align: colConfs.align,
-            headerAlign: colConfs.headerAlign,
-            footerAlign: colConfs.footerAlign,
+            fixed,
+            align,
+            headerAlign,
+            footerAlign,
             showOverflow: colConfs.showOverflow,
             showHeaderOverflow: colConfs.showHeaderOverflow,
             showFooterOverflow: colConfs.showFooterOverflow,
@@ -868,7 +880,7 @@ class ColumnInfo {
             titleHelp: colConfs.titleHelp,
             titlePrefix: colConfs.titlePrefix,
             titleSuffix: colConfs.titleSuffix,
-            aggFunc: colConfs.aggFunc,
+            aggFunc,
             copyMethod: colConfs.copyMethod,
             cutMethod: colConfs.cutMethod,
             pasteMethod: colConfs.pasteMethod,
@@ -882,8 +894,11 @@ class ColumnInfo {
             defaultParentId: null,
             halfVisible: false,
             defaultVisible: defaultVisible,
-            defaultFixed: colConfs.fixed,
-            defaultAggFunc: colConfs.aggFunc,
+            defaultFixed: fixed,
+            defaultAlign: align,
+            defaultHeaderAlign: headerAlign,
+            defaultFooterAlign: footerAlign,
+            defaultAggFunc: aggFunc,
             checked: false,
             halfChecked: false,
             disabled: false,
@@ -902,6 +917,9 @@ class ColumnInfo {
             renderAggFn: '',
             renderAggDigits: null,
             renderAggFormat: null,
+            renderAlign: '',
+            renderHeaderAlign: '',
+            renderFooterAlign: '',
             renderFixed: '',
             renderVisible: false,
             renderWidth: defaultRenderWidth,
@@ -1165,7 +1183,8 @@ function createReactData$2() {
             activeWrapper: false,
             visible: false,
             maxHeight: null,
-            popupStyle: {},
+            defPopupStyle: {},
+            panePopupStyle: {},
             oldSortMaps: {},
             oldFixedMaps: {},
             oldVisibleMaps: {}
@@ -1965,6 +1984,36 @@ function colToVisible($xeTable, isForce, column, row) {
     }
     return Promise.resolve();
 }
+function hangleBolleanDefaultValue(currVal, defVal) {
+    return XEUtils.isBoolean(currVal) ? currVal : defVal;
+}
+function handleCustomStoreConfig($xeTable) {
+    const { computeCustomOpts } = $xeTable.getComputeMaps();
+    const customOpts = computeCustomOpts.value;
+    const { storage, storeOptions } = customOpts;
+    const isAllCustom = storage === true;
+    const storageOpts = Object.assign({}, isAllCustom ? {} : storage || {}, storeOptions);
+    const isCustomAlign = hangleBolleanDefaultValue(storageOpts.align, isAllCustom);
+    const isCustomHeaderAlign = hangleBolleanDefaultValue(storageOpts.headerAlign, isAllCustom);
+    const isCustomFooterAlign = hangleBolleanDefaultValue(storageOpts.footerAlign, isAllCustom);
+    const isCustomResizable = hangleBolleanDefaultValue(storageOpts.resizable, isAllCustom);
+    const isCustomVisible = hangleBolleanDefaultValue(storageOpts.visible, isAllCustom);
+    const isCustomFixed = hangleBolleanDefaultValue(storageOpts.fixed, isAllCustom);
+    const isCustomSort = hangleBolleanDefaultValue(storageOpts.sort, isAllCustom);
+    const isCustomAggGroup = hangleBolleanDefaultValue(storageOpts.aggGroup, isAllCustom);
+    const isCustomAggFunc = hangleBolleanDefaultValue(storageOpts.aggFunc, isAllCustom);
+    return {
+        isCustomAlign,
+        isCustomHeaderAlign,
+        isCustomFooterAlign,
+        isCustomResizable,
+        isCustomVisible,
+        isCustomFixed,
+        isCustomSort,
+        isCustomAggGroup,
+        isCustomAggFunc
+    };
+}
 
 function getOnName(type) {
     return 'on' + type.substring(0, 1).toLocaleUpperCase() + type.substring(1);
@@ -3876,10 +3925,18 @@ const tableEmits = [
     'scroll',
     'scroll-boundary',
     'custom',
+    'custom-open',
+    'custom-close',
+    'custom-cancel',
+    'custom-reset',
+    'custom-confirm',
     'custom-visible-change',
     'custom-visible-all',
     'custom-fixed-change',
     'custom-sort-change',
+    'custom-align-change',
+    'custom-header-align-change',
+    'custom-footer-align-change',
     'change-fnr', // 废弃
     'open-fnr',
     'show-fnr',
@@ -5755,23 +5812,30 @@ var TableCustomPanelComponent = defineVxeComponent({
             $xeTable.saveCustom();
             $xeTable.closeCustom();
             $xeTable.emitCustomEvent('confirm', $event);
+            $xeTable.dispatchEvent('custom-confirm', {}, $event);
             $xeTable.emitCustomEvent('close', $event);
+            $xeTable.dispatchEvent('custom-close', {}, $event);
         };
         const cancelCloseEvent = ({ $event }) => {
             $xeTable.closeCustom();
             $xeTable.emitCustomEvent('close', $event);
+            $xeTable.dispatchEvent('custom-close', {}, $event);
         };
         const cancelCustomEvent = ({ $event }) => {
             $xeTable.cancelCustom();
             $xeTable.closeCustom();
             $xeTable.emitCustomEvent('cancel', $event);
+            $xeTable.dispatchEvent('custom-cancel', {}, $event);
             $xeTable.emitCustomEvent('close', $event);
+            $xeTable.dispatchEvent('custom-close', {}, $event);
         };
         const handleResetCustomEvent = (evnt) => {
             $xeTable.resetCustom(true);
             $xeTable.closeCustom();
             $xeTable.emitCustomEvent('reset', evnt);
+            $xeTable.dispatchEvent('custom-reset', {}, evnt);
             $xeTable.emitCustomEvent('close', evnt);
+            $xeTable.dispatchEvent('custom-close', {}, evnt);
         };
         const resetCustomEvent = ({ $event }) => {
             if (VxeUI.modal) {
@@ -5881,6 +5945,20 @@ var TableCustomPanelComponent = defineVxeComponent({
                 $xeTable.dispatchEvent('custom-fixed-change', { column, fixed: targetFixed }, evnt);
             }
         };
+        const changeAlignOption = (column, targetAlign, colProperty, renderProperty, eName, evnt) => {
+            const customOpts = computeCustomOpts.value;
+            if (customOpts.immediate) {
+                column[colProperty] = targetAlign;
+                column[renderProperty] = targetAlign;
+                tableReactData.isCustomStatus = true;
+                $xeTable.handleCustom();
+                $xeTable.saveCustomStore(`update:${colProperty}`);
+            }
+            else {
+                column[renderProperty] = targetAlign;
+            }
+            $xeTable.dispatchEvent(eName, { column, [colProperty]: targetAlign }, evnt);
+        };
         const allOptionEvent = (evnt) => {
             const { customStore } = tableReactData;
             const isAll = !customStore.isAll;
@@ -6336,7 +6414,7 @@ var TableCustomPanelComponent = defineVxeComponent({
             const { isCustomStatus, customColumnList, isCustomDragStatus } = tableReactData;
             const customOpts = computeCustomOpts.value;
             const columnDragOpts = computeColumnDragOpts.value;
-            const { popupStyle } = customStore;
+            const { defPopupStyle } = customStore;
             const { immediate, checkMethod, visibleMethod, allowVisible, allowSort, allowFixed, allowGroup, allowValues, trigger, placement, showSortDragButton, showSortMoveButton, showSortPutButton } = customOpts;
             const isMaxFixedColumn = computeIsMaxFixedColumn.value;
             const vSize = computeSize.value;
@@ -6494,9 +6572,9 @@ var TableCustomPanelComponent = defineVxeComponent({
                         !parentItem && allowFixed
                             ? h('div', {
                                 class: 'vxe-table-custom--fixed-option'
-                            }, [
-                                VxeUIButtonComponent
-                                    ? h(VxeUIButtonComponent, {
+                            }, VxeUIButtonComponent
+                                ? [
+                                    h(VxeUIButtonComponent, {
                                         mode: 'text',
                                         icon: column.renderFixed === 'left' ? getIcon$6().TOOLBAR_TOOLS_FIXED_LEFT_ACTIVE : getIcon$6().TOOLBAR_TOOLS_FIXED_LEFT,
                                         status: column.renderFixed === 'left' ? 'primary' : '',
@@ -6505,10 +6583,8 @@ var TableCustomPanelComponent = defineVxeComponent({
                                         onClick: ({ $event }) => {
                                             changeFixedOption(column, 'left', $event);
                                         }
-                                    })
-                                    : renderEmptyElement$6($xeTable),
-                                VxeUIButtonComponent
-                                    ? h(VxeUIButtonComponent, {
+                                    }),
+                                    h(VxeUIButtonComponent, {
                                         mode: 'text',
                                         icon: column.renderFixed === 'right' ? getIcon$6().TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVE : getIcon$6().TOOLBAR_TOOLS_FIXED_RIGHT,
                                         status: column.renderFixed === 'right' ? 'primary' : '',
@@ -6518,8 +6594,8 @@ var TableCustomPanelComponent = defineVxeComponent({
                                             changeFixedOption(column, 'right', $event);
                                         }
                                     })
-                                    : renderEmptyElement$6($xeTable)
-                            ])
+                                ]
+                                : [])
                             : renderEmptyElement$6($xeTable)
                     ]));
                 }
@@ -6531,7 +6607,7 @@ var TableCustomPanelComponent = defineVxeComponent({
                         [`size--${vSize}`]: vSize,
                         'is--active': customStore.visible
                     }],
-                style: popupStyle
+                style: defPopupStyle
             }, customStore.visible
                 ? [
                     h('div', {
@@ -6652,44 +6728,18 @@ var TableCustomPanelComponent = defineVxeComponent({
                 ]
                 : []);
         };
-        const renderPopupPanel = () => {
-            const $xeGrid = $xeTable.xeGrid;
-            const $xeGantt = $xeTable.xeGantt;
-            const { customStore } = props;
-            const { treeConfig, rowGroupConfig, aggregateConfig, resizable: allResizable } = tableProps;
-            const { isCustomStatus, customColumnList } = tableReactData;
+        const renderPopupBodys = () => {
+            const { resizable: allResizable } = tableProps;
+            const { customColumnList } = tableReactData;
             const customOpts = computeCustomOpts.value;
             const columnDragOpts = computeColumnDragOpts.value;
-            const aggregateOpts = computeAggregateOpts.value;
-            const { placement: aggPlacement } = aggregateOpts;
-            const { mode, immediate, showSortDragButton, showSortMoveButton, showSortPutButton, modalOptions, drawerOptions, allowVisible, allowSort, allowFixed, allowResizable, allowGroup, allowValues, checkMethod, visibleMethod } = customOpts;
+            const { immediate, showSortDragButton, showSortMoveButton, showSortPutButton, allowVisible, allowSort, allowFixed, allowAlign, allowHeaderAlign, allowFooterAlign, allowResizable, allowGroup, allowValues, checkMethod, visibleMethod } = customOpts;
             const columnOpts = computeColumnOpts.value;
-            const { maxFixedSize } = columnOpts;
             const resizableOpts = computeResizableOpts.value;
             const { minWidth: reMinWidth, maxWidth: reMaxWidth } = resizableOpts;
-            const modalOpts = Object.assign({}, modalOptions);
-            const drawerOpts = Object.assign({}, drawerOptions);
             const isMaxFixedColumn = computeIsMaxFixedColumn.value;
             const { isCrossDrag, isPeerDrag } = columnDragOpts;
-            const slots = customOpts.slots || {};
-            const headerSlot = slots.header;
-            const topSlot = slots.top;
-            const bottomSlot = slots.bottom;
-            const defaultSlot = slots.default;
-            const footerSlot = slots.footer;
             const trVNs = [];
-            const isAllChecked = customStore.isAll;
-            const isAllIndeterminate = customStore.isIndeterminate;
-            const isAggRtBmLayout = aggPlacement === 'right' || aggPlacement === 'bottom';
-            const params = {
-                $table: $xeTable,
-                $grid: $xeGrid,
-                $gantt: $xeGantt,
-                columns: customColumnList,
-                isAllChecked,
-                isAllIndeterminate,
-                isCustomStatus
-            };
             XEUtils.eachTree(customColumnList, (column, index, items, path, parentItem) => {
                 const isVisible = visibleMethod ? visibleMethod({ $table: $xeTable, column }) : true;
                 if (isVisible) {
@@ -6721,6 +6771,243 @@ var TableCustomPanelComponent = defineVxeComponent({
                     const isDisabled = checkMethod ? !checkMethod({ $table: $xeTable, column }) : false;
                     const isHidden = !isChecked;
                     const showSortBtn = (isCrossDrag || isPeerDrag ? immediate : false) || column.level === 1;
+                    const alignList = [
+                        { icon: getIcon$6().TABLE_CUSTOM_ALIGN_LEFT, value: 'left', title: getI18n$a('vxe.custom.setting.anLeftTitle'), disabled: isHidden },
+                        { icon: getIcon$6().TABLE_CUSTOM_ALIGN_CENTER, value: 'center', title: getI18n$a('vxe.custom.setting.anCenterTitle'), disabled: isHidden },
+                        { icon: getIcon$6().TABLE_CUSTOM_ALIGN_RIGHT, value: 'right', title: getI18n$a('vxe.custom.setting.anRightTitle'), disabled: isHidden }
+                    ];
+                    const tdVNs = [];
+                    if (allowVisible) {
+                        tdVNs.push(h('td', {
+                            key: 'av',
+                            class: 'vxe-table-custom-popup--column-td col--visible'
+                        }, [
+                            h('div', {
+                                class: ['vxe-table-custom--checkbox-option', {
+                                        'is--checked': isChecked,
+                                        'is--indeterminate': isIndeterminate,
+                                        'is--disabled': isDisabled
+                                    }],
+                                title: getI18n$a('vxe.custom.setting.colVisible'),
+                                onClick: (evnt) => {
+                                    if (!isDisabled) {
+                                        changeCheckboxOption(column, evnt);
+                                    }
+                                }
+                            }, [
+                                h('span', {
+                                    class: ['vxe-checkbox--icon', isIndeterminate ? getIcon$6().TABLE_CHECKBOX_INDETERMINATE : (isChecked ? getIcon$6().TABLE_CHECKBOX_CHECKED : getIcon$6().TABLE_CHECKBOX_UNCHECKED)]
+                                })
+                            ])
+                        ]));
+                    }
+                    tdVNs.push(h('td', {
+                        key: 'at',
+                        class: 'vxe-table-custom-popup--column-td col--name'
+                    }, [
+                        h('div', {
+                            class: 'vxe-table-custom-popup--name'
+                        }, [
+                            (allowSort && showSortDragButton) || (allowGroup || allowValues)
+                                ? (showSortBtn || ((allowGroup || allowValues) && !isColGroup)
+                                    ? h('div', Object.assign({ class: ['vxe-table-custom-popup--column-sort-btn', {
+                                                'is--disabled': isHidden
+                                            }], title: getI18n$a('vxe.custom.setting.sortHelpTip') }, (isHidden
+                                        ? {}
+                                        : {
+                                            onMousedown: sortMousedownEvent,
+                                            onMouseup: sortMouseupEvent
+                                        })), [
+                                        h('i', {
+                                            class: getIcon$6().TABLE_CUSTOM_SORT
+                                        })
+                                    ])
+                                    : h('div', {
+                                        class: 'vxe-table-custom-popup--column-sort-placeholder'
+                                    }))
+                                : renderEmptyElement$6($xeTable),
+                            column.type === 'html'
+                                ? h('div', {
+                                    key: '1',
+                                    class: 'vxe-table-custom-popup--title',
+                                    innerHTML: colTitle
+                                })
+                                : h('div', {
+                                    key: '0',
+                                    class: 'vxe-table-custom-popup--title',
+                                    title: colTitle
+                                }, colTitle),
+                            showSortBtn && (showSortMoveButton || showSortPutButton)
+                                ? h('div', {
+                                    class: 'vxe-table-custom-popup--move-btn'
+                                }, VxeUIButtonComponent
+                                    ? [
+                                        showSortMoveButton
+                                            ? h(VxeUIButtonComponent, {
+                                                mode: 'text',
+                                                icon: 'vxe-icon-arrows-up',
+                                                title: getI18n$a('vxe.custom.setting.moveUpTitle'),
+                                                disabled: index <= 0,
+                                                onClick(evntParame) {
+                                                    sortMoveUpEvent(evntParame, column);
+                                                }
+                                            })
+                                            : renderEmptyElement$6($xeTable),
+                                        showSortMoveButton
+                                            ? h(VxeUIButtonComponent, {
+                                                mode: 'text',
+                                                icon: 'vxe-icon-arrows-down',
+                                                title: getI18n$a('vxe.custom.setting.moveDnTitle'),
+                                                disabled: index >= items.length - 1,
+                                                onClick(evntParame) {
+                                                    sortMoveDnEvent(evntParame, column);
+                                                }
+                                            })
+                                            : renderEmptyElement$6($xeTable),
+                                        showSortPutButton && !parentItem
+                                            ? h(VxeUIButtonComponent, {
+                                                mode: 'text',
+                                                icon: 'vxe-icon-top',
+                                                title: getI18n$a('vxe.custom.setting.putTopTitle'),
+                                                disabled: index <= 0,
+                                                onClick(evntParame) {
+                                                    sortMoveTopEvent(evntParame, column);
+                                                }
+                                            })
+                                            : renderEmptyElement$6($xeTable),
+                                        showSortPutButton && !parentItem
+                                            ? h(VxeUIButtonComponent, {
+                                                mode: 'text',
+                                                icon: 'vxe-icon-bottom',
+                                                title: getI18n$a('vxe.custom.setting.putBottomTitle'),
+                                                disabled: index >= items.length - 1,
+                                                onClick(evntParame) {
+                                                    sortMoveBottomEvent(evntParame, column);
+                                                }
+                                            })
+                                            : renderEmptyElement$6($xeTable)
+                                    ]
+                                    : [])
+                                : renderEmptyElement$6($xeTable)
+                        ])
+                    ]));
+                    if (allowResizable) {
+                        tdVNs.push(h('td', {
+                            key: 'aw',
+                            class: 'vxe-table-custom-popup--column-td col--resizable'
+                        }, [
+                            ((column.children && column.children.length) ||
+                                !(XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable)))
+                                ? h('span', '-')
+                                : (VxeUINumberInputComponent
+                                    ? h(VxeUINumberInputComponent, {
+                                        type: 'integer',
+                                        immediate: false,
+                                        disabled: isHidden,
+                                        modelValue: column.renderResizeWidth,
+                                        min: customMinWidth || undefined,
+                                        max: customMaxWidth || undefined,
+                                        'onUpdate:modelValue'(value) {
+                                            const width = Math.max(0, Number(value));
+                                            column.renderResizeWidth = width;
+                                        },
+                                        onChange() {
+                                            changeColumnWidth(column);
+                                        }
+                                    })
+                                    : renderEmptyElement$6($xeTable))
+                        ]));
+                    }
+                    if (allowFixed) {
+                        tdVNs.push(h('td', {
+                            key: 'af',
+                            class: 'vxe-table-custom-popup--column-td col--fixed'
+                        }, parentItem
+                            ? [h('span', '-')]
+                            : (VxeUIRadioGroupComponent
+                                ? [
+                                    h(VxeUIButtonComponent, {
+                                        icon: column.renderFixed === 'left' ? getIcon$6().TOOLBAR_TOOLS_FIXED_LEFT_ACTIVE : getIcon$6().TOOLBAR_TOOLS_FIXED_LEFT,
+                                        status: column.renderFixed === 'left' ? 'primary' : '',
+                                        disabled: isHidden || (isMaxFixedColumn && !column.renderFixed),
+                                        title: getI18n$a(column.renderFixed === 'left' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedLeft'),
+                                        onClick: ({ $event }) => {
+                                            changeFixedOption(column, 'left', $event);
+                                        }
+                                    }),
+                                    h(VxeUIButtonComponent, {
+                                        icon: column.renderFixed === 'right' ? getIcon$6().TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVE : getIcon$6().TOOLBAR_TOOLS_FIXED_RIGHT,
+                                        status: column.renderFixed === 'right' ? 'primary' : '',
+                                        disabled: isHidden || (isMaxFixedColumn && !column.renderFixed),
+                                        title: getI18n$a(column.renderFixed === 'right' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedRight'),
+                                        onClick: ({ $event }) => {
+                                            changeFixedOption(column, 'right', $event);
+                                        }
+                                    })
+                                ]
+                                : [])));
+                    }
+                    if (allowAlign) {
+                        tdVNs.push(h('td', {
+                            key: 'aa',
+                            class: 'vxe-table-custom-popup--column-td col--align'
+                        }, VxeUIRadioGroupComponent
+                            ? [
+                                h(VxeUIRadioGroupComponent, {
+                                    modelValue: column.renderAlign || '',
+                                    type: 'button',
+                                    strict: false,
+                                    disabled: isHidden,
+                                    options: alignList,
+                                    onChange({ value, $event }) {
+                                        changeAlignOption(column, value, 'align', 'renderAlign', 'custom-align-change', $event);
+                                    }
+                                })
+                            ]
+                            : []));
+                    }
+                    if (allowHeaderAlign) {
+                        tdVNs.push(h('td', {
+                            key: 'aha',
+                            class: 'vxe-table-custom-popup--column-td col--header-align'
+                        }, isColGroup
+                            ? [h('span', '-')]
+                            : (VxeUIRadioGroupComponent
+                                ? [
+                                    h(VxeUIRadioGroupComponent, {
+                                        modelValue: column.renderHeaderAlign || '',
+                                        type: 'button',
+                                        strict: false,
+                                        disabled: isHidden,
+                                        options: alignList,
+                                        onChange({ value, $event }) {
+                                            changeAlignOption(column, value, 'headerAlign', 'renderHeaderAlign', 'custom-header-align-change', $event);
+                                        }
+                                    })
+                                ]
+                                : [])));
+                    }
+                    if (allowFooterAlign) {
+                        tdVNs.push(h('td', {
+                            key: 'afa',
+                            class: 'vxe-table-custom-popup--column-td col--footer-align'
+                        }, isColGroup
+                            ? [h('span', '-')]
+                            : (VxeUIRadioGroupComponent
+                                ? [
+                                    h(VxeUIRadioGroupComponent, {
+                                        modelValue: column.renderFooterAlign || '',
+                                        type: 'button',
+                                        strict: false,
+                                        disabled: isHidden,
+                                        options: alignList,
+                                        onChange({ value, $event }) {
+                                            changeAlignOption(column, value, 'footerAlign', 'renderFooterAlign', 'custom-footer-align-change', $event);
+                                        }
+                                    })
+                                ]
+                                : [])));
+                    }
                     trVNs.push(h('tr', {
                         key: column.id,
                         colid: column.id,
@@ -6730,177 +7017,139 @@ var TableCustomPanelComponent = defineVxeComponent({
                         onDragstart: sortDragstartEvent,
                         onDragend: sortDragendEvent,
                         onDragover: sortDragoverEvent
-                    }, [
-                        allowVisible
-                            ? h('td', {
-                                class: 'vxe-table-custom-popup--column-item col--visible'
-                            }, [
-                                h('div', {
-                                    class: ['vxe-table-custom--checkbox-option', {
-                                            'is--checked': isChecked,
-                                            'is--indeterminate': isIndeterminate,
-                                            'is--disabled': isDisabled
-                                        }],
-                                    title: getI18n$a('vxe.custom.setting.colVisible'),
-                                    onClick: (evnt) => {
-                                        if (!isDisabled) {
-                                            changeCheckboxOption(column, evnt);
-                                        }
-                                    }
-                                }, [
-                                    h('span', {
-                                        class: ['vxe-checkbox--icon', isIndeterminate ? getIcon$6().TABLE_CHECKBOX_INDETERMINATE : (isChecked ? getIcon$6().TABLE_CHECKBOX_CHECKED : getIcon$6().TABLE_CHECKBOX_UNCHECKED)]
-                                    })
-                                ])
-                            ])
-                            : renderEmptyElement$6($xeTable),
-                        h('td', {
-                            class: 'vxe-table-custom-popup--column-item col--name'
-                        }, [
-                            h('div', {
-                                class: 'vxe-table-custom-popup--name'
-                            }, [
-                                (allowSort && showSortDragButton) || (allowGroup || allowValues)
-                                    ? (showSortBtn || ((allowGroup || allowValues) && !isColGroup)
-                                        ? h('div', Object.assign({ class: ['vxe-table-custom-popup--column-sort-btn', {
-                                                    'is--disabled': isHidden
-                                                }], title: getI18n$a('vxe.custom.setting.sortHelpTip') }, (isHidden
-                                            ? {}
-                                            : {
-                                                onMousedown: sortMousedownEvent,
-                                                onMouseup: sortMouseupEvent
-                                            })), [
-                                            h('i', {
-                                                class: getIcon$6().TABLE_CUSTOM_SORT
-                                            })
-                                        ])
-                                        : h('div', {
-                                            class: 'vxe-table-custom-popup--column-sort-placeholder'
-                                        }))
-                                    : renderEmptyElement$6($xeTable),
-                                column.type === 'html'
-                                    ? h('div', {
-                                        key: '1',
-                                        class: 'vxe-table-custom-popup--title',
-                                        innerHTML: colTitle
-                                    })
-                                    : h('div', {
-                                        key: '0',
-                                        class: 'vxe-table-custom-popup--title',
-                                        title: colTitle
-                                    }, colTitle),
-                                showSortBtn && (showSortMoveButton || showSortPutButton)
-                                    ? h('div', {
-                                        class: 'vxe-table-custom-popup--move-btn'
-                                    }, VxeUIButtonComponent
-                                        ? [
-                                            showSortMoveButton
-                                                ? h(VxeUIButtonComponent, {
-                                                    mode: 'text',
-                                                    content: getI18n$a('vxe.custom.setting.moveUp'),
-                                                    title: getI18n$a('vxe.custom.setting.moveUpTitle'),
-                                                    disabled: index <= 0,
-                                                    onClick(evntParame) {
-                                                        sortMoveUpEvent(evntParame, column);
-                                                    }
-                                                })
-                                                : renderEmptyElement$6($xeTable),
-                                            showSortMoveButton
-                                                ? h(VxeUIButtonComponent, {
-                                                    mode: 'text',
-                                                    content: getI18n$a('vxe.custom.setting.moveDn'),
-                                                    title: getI18n$a('vxe.custom.setting.moveDnTitle'),
-                                                    disabled: index >= items.length - 1,
-                                                    onClick(evntParame) {
-                                                        sortMoveDnEvent(evntParame, column);
-                                                    }
-                                                })
-                                                : renderEmptyElement$6($xeTable),
-                                            showSortPutButton && !parentItem
-                                                ? h(VxeUIButtonComponent, {
-                                                    mode: 'text',
-                                                    content: getI18n$a('vxe.custom.setting.putTop'),
-                                                    title: getI18n$a('vxe.custom.setting.putTopTitle'),
-                                                    disabled: index <= 0,
-                                                    onClick(evntParame) {
-                                                        sortMoveTopEvent(evntParame, column);
-                                                    }
-                                                })
-                                                : renderEmptyElement$6($xeTable),
-                                            showSortPutButton && !parentItem
-                                                ? h(VxeUIButtonComponent, {
-                                                    mode: 'text',
-                                                    content: getI18n$a('vxe.custom.setting.putBottom'),
-                                                    title: getI18n$a('vxe.custom.setting.putBottomTitle'),
-                                                    disabled: index >= items.length - 1,
-                                                    onClick(evntParame) {
-                                                        sortMoveBottomEvent(evntParame, column);
-                                                    }
-                                                })
-                                                : renderEmptyElement$6($xeTable)
-                                        ]
-                                        : [])
-                                    : renderEmptyElement$6($xeTable)
-                            ])
-                        ]),
-                        allowResizable
-                            ? h('td', {
-                                class: 'vxe-table-custom-popup--column-item col--resizable'
-                            }, [
-                                ((column.children && column.children.length) ||
-                                    !(XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable)))
-                                    ? h('span', '-')
-                                    : (VxeUINumberInputComponent
-                                        ? h(VxeUINumberInputComponent, {
-                                            type: 'integer',
-                                            immediate: false,
-                                            disabled: isHidden,
-                                            modelValue: column.renderResizeWidth,
-                                            min: customMinWidth || undefined,
-                                            max: customMaxWidth || undefined,
-                                            'onUpdate:modelValue'(value) {
-                                                const width = Math.max(0, Number(value));
-                                                column.renderResizeWidth = width;
-                                            },
-                                            onChange() {
-                                                changeColumnWidth(column);
-                                            }
-                                        })
-                                        : renderEmptyElement$6($xeTable))
-                            ])
-                            : renderEmptyElement$6($xeTable),
-                        allowFixed
-                            ? h('td', {
-                                class: 'vxe-table-custom-popup--column-item col--fixed'
-                            }, [
-                                parentItem
-                                    ? h('span', '-')
-                                    : (VxeUIRadioGroupComponent
-                                        ? h(VxeUIRadioGroupComponent, {
-                                            modelValue: column.renderFixed || '',
-                                            type: 'button',
-                                            size: 'mini',
-                                            disabled: isHidden,
-                                            options: [
-                                                { label: getI18n$a('vxe.custom.setting.fixedLeft'), value: 'left', disabled: isHidden || isMaxFixedColumn },
-                                                { label: getI18n$a('vxe.custom.setting.fixedUnset'), value: '', disabled: isHidden },
-                                                { label: getI18n$a('vxe.custom.setting.fixedRight'), value: 'right', disabled: isHidden || isMaxFixedColumn }
-                                            ],
-                                            onChange({ label, $event }) {
-                                                changeFixedOption(column, label, $event);
-                                            }
-                                        })
-                                        : renderEmptyElement$6($xeTable))
-                            ])
-                            : renderEmptyElement$6($xeTable)
-                    ]));
+                    }, tdVNs));
                 }
             });
+            return trVNs;
+        };
+        const renderPopupPanel = () => {
+            const $xeGrid = $xeTable.xeGrid;
+            const $xeGantt = $xeTable.xeGantt;
+            const { customStore } = props;
+            const { treeConfig, rowGroupConfig, aggregateConfig } = tableProps;
+            const { isCustomStatus, customColumnList } = tableReactData;
+            const vSize = computeSize.value;
+            const customOpts = computeCustomOpts.value;
+            const aggregateOpts = computeAggregateOpts.value;
+            const { panePopupStyle } = customStore;
+            const { placement: aggPlacement } = aggregateOpts;
+            const { mode, immediate, modalOptions, drawerOptions, allowVisible, allowFixed, allowAlign, allowHeaderAlign, allowFooterAlign, allowResizable } = customOpts;
+            const columnOpts = computeColumnOpts.value;
+            const { maxFixedSize } = columnOpts;
+            const modalOpts = Object.assign({}, modalOptions);
+            const drawerOpts = Object.assign({}, drawerOptions);
+            const slots = customOpts.slots || {};
+            const headerSlot = slots.header;
+            const topSlot = slots.top;
+            const bottomSlot = slots.bottom;
+            const defaultSlot = slots.default;
+            const footerSlot = slots.footer;
+            const isAllChecked = customStore.isAll;
+            const isAllIndeterminate = customStore.isIndeterminate;
+            const isAggRtBmLayout = aggPlacement === 'right' || aggPlacement === 'bottom';
+            const params = {
+                $table: $xeTable,
+                $grid: $xeGrid,
+                $gantt: $xeGantt,
+                columns: customColumnList,
+                isAllChecked,
+                isAllIndeterminate,
+                isCustomStatus
+            };
+            const colVNs = [];
+            const headVNs = [];
+            if (allowVisible) {
+                colVNs.push(h('col', {
+                    key: 'av',
+                    class: 'vxe-table-custom-popup--column-col col--checkbox'
+                }));
+                headVNs.push(h('th', {
+                    key: 'av',
+                    class: 'vxe-table-custom-popup--column-th col--checkbox'
+                }, [
+                    h('div', {
+                        class: ['vxe-table-custom--checkbox-option', {
+                                'is--checked': isAllChecked,
+                                'is--indeterminate': isAllIndeterminate
+                            }],
+                        title: getI18n$a('vxe.table.allTitle'),
+                        onClick: allOptionEvent
+                    }, [
+                        h('span', {
+                            class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon$6().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon$6().TABLE_CHECKBOX_CHECKED : getIcon$6().TABLE_CHECKBOX_UNCHECKED)]
+                        })
+                        // h('span', {
+                        //   class: 'vxe-checkbox--label'
+                        // }, getI18n('vxe.toolbar.customAll'))
+                    ])
+                ]));
+            }
+            colVNs.push(h('col', {
+                key: 'at',
+                class: 'vxe-table-custom-popup--column-col col--title'
+            }));
+            headVNs.push(h('th', {
+                key: 'at',
+                class: 'vxe-table-custom-popup--column-th col--title'
+            }, getI18n$a('vxe.custom.setting.colTitle')));
+            if (allowResizable) {
+                colVNs.push(h('col', {
+                    key: 'aw',
+                    class: 'vxe-table-custom-popup--column-col col--width'
+                }));
+                headVNs.push(h('th', {
+                    key: 'aw',
+                    class: 'vxe-table-custom-popup--column-th col--width'
+                }, getI18n$a('vxe.custom.setting.colResizable')));
+            }
+            if (allowFixed) {
+                colVNs.push(h('col', {
+                    key: 'af',
+                    class: 'vxe-table-custom-popup--column-col col--fixed'
+                }));
+                headVNs.push(h('th', {
+                    key: 'af',
+                    class: 'vxe-table-custom-popup--column-th col--fixed'
+                }, getI18n$a(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize])));
+            }
+            if (allowAlign) {
+                colVNs.push(h('col', {
+                    key: 'aa',
+                    class: 'vxe-table-custom-popup--column-col col--align'
+                }));
+                headVNs.push(h('th', {
+                    key: 'aa',
+                    class: 'vxe-table-custom-popup--column-th col--align'
+                }, getI18n$a('vxe.custom.setting.colAlign')));
+            }
+            if (allowHeaderAlign) {
+                colVNs.push(h('col', {
+                    key: 'aha',
+                    class: 'vxe-table-custom-popup--column-col col--header-align'
+                }));
+                headVNs.push(h('th', {
+                    key: 'aha',
+                    class: 'vxe-table-custom-popup--column-th col--header-align'
+                }, getI18n$a('vxe.custom.setting.colHeadAlign')));
+            }
+            if (allowFooterAlign) {
+                colVNs.push(h('col', {
+                    key: 'afa',
+                    class: 'vxe-table-custom-popup--column-col col--footer-align'
+                }));
+                headVNs.push(h('th', {
+                    key: 'afa',
+                    class: 'vxe-table-custom-popup--column-th col--footer-align'
+                }, getI18n$a('vxe.custom.setting.colFootAlign')));
+            }
             const scopedSlots = {
                 default: () => {
                     return h('div', {
                         ref: refBodyWrapperElem,
-                        class: ['vxe-table-custom-popup--body-wrapper', `agg-layout--${aggPlacement}`]
+                        class: ['vxe-table-custom-popup--body-wrapper', `agg-layout--${aggPlacement}`, {
+                                [`size--${vSize}`]: vSize
+                            }],
+                        style: panePopupStyle
                     }, defaultSlot
                         ? $xeTable.callSlot(defaultSlot, params)
                         : [
@@ -6922,62 +7171,16 @@ var TableCustomPanelComponent = defineVxeComponent({
                                     class: 'vxe-table-custom-popup--table-wrapper'
                                 }, [
                                     h('table', {}, [
-                                        h('colgroup', {}, [
-                                            allowVisible
-                                                ? h('col', {
-                                                    class: 'vxe-table-custom-popup--table-col-seq'
-                                                })
-                                                : renderEmptyElement$6($xeTable),
-                                            h('col', {
-                                                class: 'vxe-table-custom-popup--table-col-title'
-                                            }),
-                                            allowResizable
-                                                ? h('col', {
-                                                    class: 'vxe-table-custom-popup--table-col-width'
-                                                })
-                                                : renderEmptyElement$6($xeTable),
-                                            allowFixed
-                                                ? h('col', {
-                                                    class: 'vxe-table-custom-popup--table-col-fixed'
-                                                })
-                                                : renderEmptyElement$6($xeTable)
-                                        ]),
+                                        h('colgroup', {}, colVNs),
                                         h('thead', {}, [
-                                            h('tr', {}, [
-                                                allowVisible
-                                                    ? h('th', {}, [
-                                                        h('div', {
-                                                            class: ['vxe-table-custom--checkbox-option', {
-                                                                    'is--checked': isAllChecked,
-                                                                    'is--indeterminate': isAllIndeterminate
-                                                                }],
-                                                            title: getI18n$a('vxe.table.allTitle'),
-                                                            onClick: allOptionEvent
-                                                        }, [
-                                                            h('span', {
-                                                                class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon$6().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon$6().TABLE_CHECKBOX_CHECKED : getIcon$6().TABLE_CHECKBOX_UNCHECKED)]
-                                                            }),
-                                                            h('span', {
-                                                                class: 'vxe-checkbox--label'
-                                                            }, getI18n$a('vxe.toolbar.customAll'))
-                                                        ])
-                                                    ])
-                                                    : renderEmptyElement$6($xeTable),
-                                                h('th', {}, getI18n$a('vxe.custom.setting.colTitle')),
-                                                allowResizable
-                                                    ? h('th', {}, getI18n$a('vxe.custom.setting.colResizable'))
-                                                    : renderEmptyElement$6($xeTable),
-                                                allowFixed
-                                                    ? h('th', {}, getI18n$a(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize]))
-                                                    : renderEmptyElement$6($xeTable)
-                                            ])
+                                            h('tr', {}, headVNs)
                                         ]),
                                         h(TransitionGroup, {
                                             class: 'vxe-table-custom--panel-list',
                                             tag: 'tbody',
                                             name: 'vxe-table-custom--list'
                                         }, {
-                                            default: () => trVNs
+                                            default: () => renderPopupBodys()
                                         })
                                     ])
                                 ]),
@@ -7012,6 +7215,7 @@ var TableCustomPanelComponent = defineVxeComponent({
                         immediate
                             ? (VxeUIButtonComponent
                                 ? h(VxeUIButtonComponent, {
+                                    status: 'primary',
                                     content: customOpts.closeButtonText || getI18n$a('vxe.table.customClose'),
                                     onClick: cancelCloseEvent
                                 })
@@ -7063,8 +7267,8 @@ var TableCustomPanelComponent = defineVxeComponent({
                     className: ['vxe-table-custom-modal-wrapper', 'vxe-table--ignore-clear', modalOpts.className || ''].join(' '),
                     modelValue: customStore.visible,
                     title: modalOpts.title || getI18n$a('vxe.custom.cstmTitle'),
-                    width: modalOpts.width || Math.min(880, document.documentElement.clientWidth),
-                    minWidth: modalOpts.minWidth || 700,
+                    width: modalOpts.width || Math.min(1000, document.documentElement.clientWidth),
+                    minWidth: modalOpts.minWidth || 800,
                     height: modalOpts.height || Math.min(680, document.documentElement.clientHeight),
                     minHeight: modalOpts.minHeight || 400,
                     showZoom: modalOpts.showZoom,
@@ -7073,6 +7277,7 @@ var TableCustomPanelComponent = defineVxeComponent({
                     mask: modalOpts.mask,
                     lockView: modalOpts.lockView,
                     resize: modalOpts.resize,
+                    transfer: modalOpts.transfer,
                     escClosable: !!modalOpts.escClosable,
                     maskClosable: !!modalOpts.maskClosable,
                     destroyOnClose: true,
@@ -9695,7 +9900,6 @@ hooks$5.add('tableEditModule', {
                 return handleInsertRowAt(records, targetRowOrRowid, true);
             },
             insertChild(records, parentRowOrParentId) {
-                window.aa = internalData;
                 return handleInsertChildRowAt(records, parentRowOrParentId, null);
             },
             insertChildAt(records, parentRowOrParentId, targetRow) {
@@ -13117,6 +13321,7 @@ hooks$2.add('tableValidatorModule', {
 });
 
 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;
@@ -13130,14 +13335,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;
@@ -13170,24 +13376,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();
         };
@@ -13236,6 +13459,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;
@@ -13264,39 +13490,59 @@ VxeUI.hooks.add('tableCustomModule', {
             }
             return openCustom();
         };
-        const saveCustom = () => {
+        const saveCustom = (isDirectly) => {
             const { customColumnList, aggHandleFields, rowGroupList } = reactData;
             const customOpts = computeCustomOpts.value;
-            const { allowVisible, allowSort, allowFixed, allowResizable, allowGroup, allowValues } = customOpts;
-            XEUtils.eachTree(customColumnList, (column, index, items, path, parentColumn) => {
-                if (parentColumn) {
-                    // 更新子列信息
-                    column.fixed = parentColumn.fixed;
-                }
-                else {
-                    if (allowSort) {
-                        const sortIndex = index + 1;
-                        column.renderSortNumber = sortIndex;
+            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));
+                        }
                     }
-                    if (allowFixed) {
-                        column.fixed = column.renderFixed;
+                });
+            }
+            else {
+                XEUtils.eachTree(customColumnList, (column, index, items, path, parentColumn) => {
+                    if (parentColumn) {
+                        // 更新子列信息
+                        column.fixed = parentColumn.fixed;
                     }
-                }
-                if (allowResizable) {
-                    if (column.renderVisible && (!column.children || !column.children.length)) {
-                        if (column.renderResizeWidth !== column.renderWidth) {
-                            column.resizeWidth = column.renderResizeWidth;
-                            column.renderWidth = column.renderResizeWidth;
+                    else {
+                        if (allowSort) {
+                            const sortIndex = index + 1;
+                            column.renderSortNumber = sortIndex;
+                        }
+                        if (allowFixed) {
+                            column.fixed = column.renderFixed;
                         }
                     }
-                }
-                if (allowVisible) {
-                    column.visible = column.renderVisible;
-                }
-                if (allowGroup && allowValues) {
-                    column.aggFunc = column.renderAggFn;
-                }
-            });
+                    if (allowResizable) {
+                        if (column.renderVisible && (!column.children || !column.children.length)) {
+                            if (column.renderResizeWidth !== column.renderWidth) {
+                                column.resizeWidth = column.renderResizeWidth;
+                                column.renderWidth = column.renderResizeWidth;
+                            }
+                        }
+                    }
+                    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;
+                    }
+                });
+            }
             reactData.isCustomStatus = true;
             if (allowGroup && !!$xeTable.handlePivotTableAggData) {
                 if (rowGroupList.length !== aggHandleFields.length || rowGroupList.some((conf, i) => conf.field !== aggHandleFields[i])) {
@@ -13322,7 +13568,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];
@@ -13341,6 +13587,15 @@ 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;
+                }
             }, { children: 'children' });
             return nextTick();
         };
@@ -13403,7 +13658,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) => {
@@ -13412,6 +13670,7 @@ VxeUI.hooks.add('tableCustomModule', {
                     }
                     if (opts.fixed) {
                         column.fixed = column.defaultFixed;
+                        column.renderFixed = column.defaultFixed;
                     }
                     if (opts.sort) {
                         column.renderSortNumber = column.sortNumber;
@@ -13420,6 +13679,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;
@@ -13478,11 +13749,13 @@ VxeUI.hooks.add('tableCustomModule', {
                 if (customStore.visible) {
                     closeCustom();
                     emitCustomEvent('close', evnt);
+                    $xeTable.dispatchEvent('custom-close', {}, evnt);
                 }
                 else {
                     customStore.btnEl = evnt.target;
                     openCustom();
                     emitCustomEvent('open', evnt);
+                    $xeTable.dispatchEvent('custom-open', {}, evnt);
                 }
             },
             customOpenEvent(evnt) {
@@ -13493,6 +13766,7 @@ VxeUI.hooks.add('tableCustomModule', {
                     customStore.btnEl = evnt.target;
                     $xeTable.openCustom();
                     $xeTable.emitCustomEvent('open', evnt);
+                    $xeTable.dispatchEvent('custom-open', {}, evnt);
                 }
             },
             customCloseEvent(evnt) {
@@ -13502,6 +13776,7 @@ VxeUI.hooks.add('tableCustomModule', {
                     customStore.activeBtn = false;
                     $xeTable.closeCustom();
                     $xeTable.emitCustomEvent('close', evnt);
+                    $xeTable.dispatchEvent('custom-close', {}, evnt);
                 }
             },
             handleUpdateCustomColumn,
@@ -15748,9 +16023,6 @@ var VxeTableComponent = defineVxeComponent({
             internalData.currKeyField = keyField;
             internalData.isCurrDeepKey = hasDeepKey(keyField);
         };
-        const hangleStorageDefaultValue = (value, isAll) => {
-            return XEUtils.isBoolean(value) ? value : isAll;
-        };
         const getNextSortOrder = (column) => {
             const sortOpts = computeSortOpts.value;
             const { orders = [] } = sortOpts;
@@ -16406,19 +16678,18 @@ var VxeTableComponent = defineVxeComponent({
         const handleCustomRestore = (storeData) => {
             const { aggregateConfig, rowGroupConfig } = props;
             const { collectColumn } = internalData;
-            const customOpts = computeCustomOpts.value;
-            const { storage, storeOptions } = customOpts;
-            const isAllCustom = storage === true;
-            const storageOpts = Object.assign({}, isAllCustom ? {} : storage || {}, storeOptions);
-            const isCustomResizable = hangleStorageDefaultValue(storageOpts.resizable, isAllCustom);
-            const isCustomVisible = hangleStorageDefaultValue(storageOpts.visible, isAllCustom);
-            const isCustomFixed = hangleStorageDefaultValue(storageOpts.fixed, isAllCustom);
-            const isCustomSort = hangleStorageDefaultValue(storageOpts.sort, isAllCustom);
-            const isCustomAggGroup = hangleStorageDefaultValue(storageOpts.aggGroup, isAllCustom);
-            const isCustomAggFunc = hangleStorageDefaultValue(storageOpts.aggFunc, isAllCustom);
-            let { resizableData, sortData, visibleData, fixedData, aggGroupData, aggFuncData } = storeData;
+            const { isCustomAlign, isCustomHeaderAlign, isCustomFooterAlign, isCustomResizable, isCustomVisible, isCustomFixed, isCustomSort, isCustomAggGroup, isCustomAggFunc } = handleCustomStoreConfig($xeTable);
+            let { alignData, headerAlignData, footerAlignData, resizableData, sortData, visibleData, fixedData, aggGroupData, aggFuncData } = storeData;
             // 处理还原
-            if ((isCustomResizable && resizableData) || (isCustomSort && sortData) || (isCustomVisible && visibleData) || (isCustomFixed && fixedData) || (isCustomAggGroup && aggGroupData) || (isCustomAggFunc && aggFuncData)) {
+            if ((isCustomAlign && alignData) ||
+                (isCustomHeaderAlign && headerAlignData) ||
+                (isCustomFooterAlign && footerAlignData) ||
+                (isCustomResizable && resizableData) ||
+                (isCustomSort && sortData) ||
+                (isCustomVisible && visibleData) ||
+                (isCustomFixed && fixedData) ||
+                (isCustomAggGroup && aggGroupData) ||
+                (isCustomAggFunc && aggFuncData)) {
                 const sortColMaps = {};
                 if (isCustomSort && sortData) {
                     // 转换兼容老版本数据，即将废弃兼容
@@ -16501,16 +16772,19 @@ var VxeTableComponent = defineVxeComponent({
             const { customConfig } = props;
             const tableId = computeTableId.value;
             const customOpts = computeCustomOpts.value;
-            const { storage, restoreStore, storeOptions } = customOpts;
-            const isAllCustom = storage === true;
-            const storageOpts = Object.assign({}, isAllCustom ? {} : storage || {}, storeOptions);
-            const isCustomResizable = hangleStorageDefaultValue(storageOpts.resizable, isAllCustom);
-            const isCustomVisible = hangleStorageDefaultValue(storageOpts.visible, isAllCustom);
-            const isCustomFixed = hangleStorageDefaultValue(storageOpts.fixed, isAllCustom);
-            const isCustomSort = hangleStorageDefaultValue(storageOpts.sort, isAllCustom);
-            const isCustomAggGroup = hangleStorageDefaultValue(storageOpts.aggGroup, isAllCustom);
-            const isCustomAggFunc = hangleStorageDefaultValue(storageOpts.aggFunc, isAllCustom);
-            if (storage && (customConfig ? isEnableConf(customOpts) : customOpts.enabled) && (isCustomResizable || isCustomVisible || isCustomFixed || isCustomSort || isCustomAggGroup || isCustomAggFunc)) {
+            const { storage, restoreStore } = customOpts;
+            const { isCustomAlign, isCustomHeaderAlign, isCustomFooterAlign, isCustomResizable, isCustomVisible, isCustomFixed, isCustomSort, isCustomAggGroup, isCustomAggFunc } = handleCustomStoreConfig($xeTable);
+            if (storage &&
+                (customConfig ? isEnableConf(customOpts) : customOpts.enabled) &&
+                (isCustomAlign ||
+                    isCustomHeaderAlign ||
+                    isCustomFooterAlign ||
+                    isCustomResizable ||
+                    isCustomVisible ||
+                    isCustomFixed ||
+                    isCustomSort ||
+                    isCustomAggGroup ||
+                    isCustomAggFunc)) {
                 if (!tableId) {
                     errLog$2('vxe.error.reqProp', ['id']);
                     return;
@@ -22894,6 +23168,9 @@ var VxeTableComponent = defineVxeComponent({
                     if (!checkMethod || checkMethod({ $table: $xeTable, column })) {
                         column.visible = column.defaultVisible;
                     }
+                    column.align = column.defaultAlign;
+                    column.headerAlign = column.defaultHeaderAlign;
+                    column.footerAlign = column.defaultFooterAlign;
                     column.aggFunc = column.defaultAggFunc;
                     column.renderAggFn = column.defaultAggFunc;
                     column.renderResizeWidth = column.renderWidth;
@@ -22935,15 +23212,11 @@ var VxeTableComponent = defineVxeComponent({
                 const customOpts = computeCustomOpts.value;
                 const { isRowGroupStatus, rowGroupList } = reactData;
                 const { fullColumnFieldData, collectColumn } = internalData;
-                const { storage, checkMethod, storeOptions } = customOpts;
-                const isAllCustom = storage === true;
-                const storageOpts = Object.assign({}, isAllCustom ? {} : storage || {}, storeOptions);
-                const isCustomResizable = hangleStorageDefaultValue(storageOpts.resizable, isAllCustom);
-                const isCustomVisible = hangleStorageDefaultValue(storageOpts.visible, isAllCustom);
-                const isCustomFixed = hangleStorageDefaultValue(storageOpts.fixed, isAllCustom);
-                const isCustomSort = hangleStorageDefaultValue(storageOpts.sort, isAllCustom);
-                const isCustomAggGroup = hangleStorageDefaultValue(storageOpts.aggGroup, isAllCustom);
-                const isCustomAggFunc = hangleStorageDefaultValue(storageOpts.aggFunc, isAllCustom);
+                const { storage, checkMethod } = customOpts;
+                const { isCustomAlign, isCustomHeaderAlign, isCustomFooterAlign, isCustomResizable, isCustomVisible, isCustomFixed, isCustomSort, isCustomAggGroup, isCustomAggFunc } = handleCustomStoreConfig($xeTable);
+                const alignData = {};
+                const headerAlignData = {};
+                const footerAlignData = {};
                 const resizableData = {};
                 const sortData = [];
                 const visibleData = {};
@@ -22951,6 +23224,9 @@ var VxeTableComponent = defineVxeComponent({
                 const aggGroupData = {};
                 const aggFuncData = {};
                 const storeData = {
+                    alignData: undefined,
+                    headerAlignData: undefined,
+                    footerAlignData: undefined,
                     resizableData: undefined,
                     sortData: undefined,
                     visibleData: undefined,
@@ -22964,6 +23240,9 @@ var VxeTableComponent = defineVxeComponent({
                     }
                     return storeData;
                 }
+                let hasAlign = 0;
+                let hasHeaderAlign = 0;
+                let hasFooterAlign = 0;
                 let hasResizable = 0;
                 let hasSort = 0;
                 let hasFixed = 0;
@@ -23004,6 +23283,18 @@ var VxeTableComponent = defineVxeComponent({
                             fixedData[colKey] = column.fixed;
                         }
                     }
+                    if (isCustomAlign && column.align) {
+                        hasAlign = 1;
+                        alignData[colKey] = column.align;
+                    }
+                    if (isCustomHeaderAlign && column.headerAlign) {
+                        hasHeaderAlign = 1;
+                        headerAlignData[colKey] = column.headerAlign;
+                    }
+                    if (isCustomFooterAlign && column.footerAlign) {
+                        hasFooterAlign = 1;
+                        footerAlignData[colKey] = column.footerAlign;
+                    }
                     if (isCustomResizable && column.resizeWidth) {
                         hasResizable = 1;
                         resizableData[colKey] = column.renderWidth;
@@ -23023,6 +23314,15 @@ var VxeTableComponent = defineVxeComponent({
                         aggFuncData[colKey] = column.aggFunc;
                     }
                 });
+                if (hasAlign) {
+                    storeData.alignData = alignData;
+                }
+                if (hasHeaderAlign) {
+                    storeData.headerAlignData = headerAlignData;
+                }
+                if (hasFooterAlign) {
+                    storeData.footerAlignData = footerAlignData;
+                }
                 if (hasResizable) {
                     storeData.resizableData = resizableData;
                 }
@@ -24064,12 +24364,16 @@ var VxeTableComponent = defineVxeComponent({
                 // 如果为 null 使用默认逻辑
                 if (XEUtils.eqNull(customContent)) {
                     isShow = isOver;
+                    content = cellText;
                 }
                 else if (customContent !== '' && customContent !== false) {
                     // 如果为 '' | false 则不显示
                     isShow = true;
+                    content = customContent;
+                }
+                else {
+                    content = cellText;
                 }
-                content = cellText;
             }
             if (isShow && content) {
                 const tipContent = formatText(content);
@@ -24898,26 +25202,32 @@ var VxeTableComponent = defineVxeComponent({
                 const { customConfig } = props;
                 const tableId = computeTableId.value;
                 const customOpts = computeCustomOpts.value;
-                const { updateStore, storage, storeOptions } = customOpts;
-                const isAllCustom = storage === true;
-                const storageOpts = Object.assign({}, isAllCustom ? {} : storage || {}, storeOptions);
-                const isCustomResizable = hangleStorageDefaultValue(storageOpts.resizable, isAllCustom);
-                const isCustomVisible = hangleStorageDefaultValue(storageOpts.visible, isAllCustom);
-                const isCustomFixed = hangleStorageDefaultValue(storageOpts.fixed, isAllCustom);
-                const isCustomSort = hangleStorageDefaultValue(storageOpts.sort, isAllCustom);
-                const isCustomAggGroup = hangleStorageDefaultValue(storageOpts.aggGroup, isAllCustom);
-                const isCustomAggFunc = hangleStorageDefaultValue(storageOpts.aggFunc, isAllCustom);
+                const { updateStore, storage } = customOpts;
+                const { isCustomAlign, isCustomHeaderAlign, isCustomFooterAlign, isCustomResizable, isCustomVisible, isCustomFixed, isCustomSort, isCustomAggGroup, isCustomAggFunc } = handleCustomStoreConfig($xeTable);
                 if (type !== 'reset') {
                     // fix：修复拖动列宽，重置按钮无法点击的问题
                     reactData.isCustomStatus = true;
                 }
-                if (storage && (customConfig ? isEnableConf(customOpts) : customOpts.enabled) && (isCustomResizable || isCustomVisible || isCustomFixed || isCustomSort || isCustomAggGroup || isCustomAggFunc)) {
+                if (storage &&
+                    (customConfig ? isEnableConf(customOpts) : customOpts.enabled) &&
+                    (isCustomAlign ||
+                        isCustomHeaderAlign ||
+                        isCustomFooterAlign ||
+                        isCustomResizable ||
+                        isCustomVisible ||
+                        isCustomFixed ||
+                        isCustomSort ||
+                        isCustomAggGroup ||
+                        isCustomAggFunc)) {
                     if (!tableId) {
                         errLog$2('vxe.error.reqProp', ['id']);
                         return nextTick();
                     }
                     const storeData = type === 'reset'
                         ? {
+                            alignData: {},
+                            headerAlignData: {},
+                            footerAlignData: {},
                             resizableData: {},
                             sortData: [],
                             visibleData: {},
@@ -32077,10 +32387,16 @@ var zhCN = {
                 colResizable: '列宽（像素）',
                 colVisible: '是否显示',
                 colFixed: '冻结列',
-                colFixedMax: '冻结列（最多 {0} 列）',
-                fixedLeft: '左侧',
-                fixedUnset: '不设置',
-                fixedRight: '右侧',
+                colFixedMax: '冻结列（{0}）',
+                colAlign: '对齐方式',
+                colHeadAlign: '表头对齐方式',
+                colFootAlign: '表尾对齐方式',
+                fixedLeft: '左',
+                fixedUnset: '无',
+                fixedRight: '右',
+                alignLeft: '左',
+                alignCenter: '中',
+                alignRight: '右',
                 moveUp: '上移',
                 moveDn: '下移',
                 putTop: '置顶',
@@ -32088,7 +32404,10 @@ var zhCN = {
                 moveUpTitle: '点击向上移动',
                 moveDnTitle: '点击向下移动',
                 putTopTitle: '点击置顶',
-                putBottomTitle: '点击置尾'
+                putBottomTitle: '点击置尾',
+                anLeftTitle: '左对齐',
+                anCenterTitle: '居中',
+                anRightTitle: '右对齐'
             }
         },
         import: {
@@ -32189,6 +32508,10 @@ var zhCN = {
             fixedRight: '冻结在右侧',
             cancelFixed: '取消冻结列'
         },
+        iconPicker: {
+            search: '搜索',
+            emptyText: '暂无数据'
+        },
         datePicker: {
             yearTitle: '{0} 年'
         },