vxe-table 4.19.21 → 4.19.23

package/lib/table/module/custom/panel.js

@@ -107,13 +107,16 @@ var _default = exports.default = (0, _comp.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
@@ -121,13 +124,17 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       $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
@@ -244,6 +251,22 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }, 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
@@ -761,7 +784,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const customOpts = computeCustomOpts.value;
       const columnDragOpts = computeColumnDragOpts.value;
       const {
-        popupStyle
+        defPopupStyle
       } = customStore;
       const {
         immediate,
@@ -905,7 +928,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             }
           }) : renderEmptyElement($xeTable)] : []) : renderEmptyElement($xeTable), !parentItem && allowFixed ? (0, _vue.h)('div', {
             class: 'vxe-table-custom--fixed-option'
-          }, [VxeUIButtonComponent ? (0, _vue.h)(VxeUIButtonComponent, {
+          }, VxeUIButtonComponent ? [(0, _vue.h)(VxeUIButtonComponent, {
             mode: 'text',
             icon: column.renderFixed === 'left' ? getIcon().TOOLBAR_TOOLS_FIXED_LEFT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_LEFT,
             status: column.renderFixed === 'left' ? 'primary' : '',
@@ -916,7 +939,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             }) => {
               changeFixedOption(column, 'left', $event);
             }
-          }) : renderEmptyElement($xeTable), VxeUIButtonComponent ? (0, _vue.h)(VxeUIButtonComponent, {
+          }), (0, _vue.h)(VxeUIButtonComponent, {
             mode: 'text',
             icon: column.renderFixed === 'right' ? getIcon().TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_RIGHT,
             status: column.renderFixed === 'right' ? 'primary' : '',
@@ -927,7 +950,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             }) => {
               changeFixedOption(column, 'right', $event);
             }
-          }) : renderEmptyElement($xeTable)]) : renderEmptyElement($xeTable)]));
+          })] : []) : renderEmptyElement($xeTable)]));
         }
       });
       return (0, _vue.h)('div', {
@@ -937,7 +960,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           [`size--${vSize}`]: vSize,
           'is--active': customStore.visible
         }],
-        style: popupStyle
+        style: defPopupStyle
       }, customStore.visible ? [(0, _vue.h)('div', {
         ref: refBodyWrapperElem,
         class: 'vxe-table-custom-simple--body-wrapper'
@@ -1003,39 +1026,26 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         onClick: confirmCustomEvent
       }) : renderEmptyElement($xeTable)])]) : null]), renderDragTip()])] : []);
     };
-    const renderPopupPanel = () => {
-      const $xeGrid = $xeTable.xeGrid;
-      const $xeGantt = $xeTable.xeGantt;
-      const {
-        customStore
-      } = props;
+    const renderPopupBodys = () => {
       const {
-        treeConfig,
-        rowGroupConfig,
-        aggregateConfig,
         resizable: allResizable
       } = tableProps;
       const {
-        isCustomStatus,
         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,
+        allowAlign,
+        allowHeaderAlign,
+        allowFooterAlign,
         allowResizable,
         allowGroup,
         allowValues,
@@ -1043,40 +1053,17 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         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.default.eachTree(customColumnList, (column, index, items, path, parentItem) => {
         const isVisible = visibleMethod ? visibleMethod({
           $table: $xeTable,
@@ -1114,33 +1101,46 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           }) : false;
           const isHidden = !isChecked;
           const showSortBtn = (isCrossDrag || isPeerDrag ? immediate : false) || column.level === 1;
-          trVNs.push((0, _vue.h)('tr', {
-            key: column.id,
-            colid: column.id,
-            class: [`vxe-table-custom-popup--row level--${column.level}`, {
-              'is--group': isColGroup
-            }],
-            onDragstart: sortDragstartEvent,
-            onDragend: sortDragendEvent,
-            onDragover: sortDragoverEvent
-          }, [allowVisible ? (0, _vue.h)('td', {
-            class: 'vxe-table-custom-popup--column-item col--visible'
-          }, [(0, _vue.h)('div', {
-            class: ['vxe-table-custom--checkbox-option', {
-              'is--checked': isChecked,
-              'is--indeterminate': isIndeterminate,
-              'is--disabled': isDisabled
-            }],
-            title: getI18n('vxe.custom.setting.colVisible'),
-            onClick: evnt => {
-              if (!isDisabled) {
-                changeCheckboxOption(column, evnt);
+          const alignList = [{
+            icon: getIcon().TABLE_CUSTOM_ALIGN_LEFT,
+            value: 'left',
+            title: getI18n('vxe.custom.setting.anLeftTitle'),
+            disabled: isHidden
+          }, {
+            icon: getIcon().TABLE_CUSTOM_ALIGN_CENTER,
+            value: 'center',
+            title: getI18n('vxe.custom.setting.anCenterTitle'),
+            disabled: isHidden
+          }, {
+            icon: getIcon().TABLE_CUSTOM_ALIGN_RIGHT,
+            value: 'right',
+            title: getI18n('vxe.custom.setting.anRightTitle'),
+            disabled: isHidden
+          }];
+          const tdVNs = [];
+          if (allowVisible) {
+            tdVNs.push((0, _vue.h)('td', {
+              key: 'av',
+              class: 'vxe-table-custom-popup--column-td col--visible'
+            }, [(0, _vue.h)('div', {
+              class: ['vxe-table-custom--checkbox-option', {
+                'is--checked': isChecked,
+                'is--indeterminate': isIndeterminate,
+                'is--disabled': isDisabled
+              }],
+              title: getI18n('vxe.custom.setting.colVisible'),
+              onClick: evnt => {
+                if (!isDisabled) {
+                  changeCheckboxOption(column, evnt);
+                }
               }
-            }
-          }, [(0, _vue.h)('span', {
-            class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
-          })])]) : renderEmptyElement($xeTable), (0, _vue.h)('td', {
-            class: 'vxe-table-custom-popup--column-item col--name'
+            }, [(0, _vue.h)('span', {
+              class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
+            })])]));
+          }
+          tdVNs.push((0, _vue.h)('td', {
+            key: 'at',
+            class: 'vxe-table-custom-popup--column-td col--name'
           }, [(0, _vue.h)('div', {
             class: 'vxe-table-custom-popup--name'
           }, [allowSort && showSortDragButton || allowGroup || allowValues ? showSortBtn || (allowGroup || allowValues) && !isColGroup ? (0, _vue.h)('div', Object.assign({
@@ -1167,7 +1167,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             class: 'vxe-table-custom-popup--move-btn'
           }, VxeUIButtonComponent ? [showSortMoveButton ? (0, _vue.h)(VxeUIButtonComponent, {
             mode: 'text',
-            content: getI18n('vxe.custom.setting.moveUp'),
+            icon: 'vxe-icon-arrows-up',
             title: getI18n('vxe.custom.setting.moveUpTitle'),
             disabled: index <= 0,
             onClick(evntParame) {
@@ -1175,7 +1175,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             }
           }) : renderEmptyElement($xeTable), showSortMoveButton ? (0, _vue.h)(VxeUIButtonComponent, {
             mode: 'text',
-            content: getI18n('vxe.custom.setting.moveDn'),
+            icon: 'vxe-icon-arrows-down',
             title: getI18n('vxe.custom.setting.moveDnTitle'),
             disabled: index >= items.length - 1,
             onClick(evntParame) {
@@ -1183,7 +1183,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             }
           }) : renderEmptyElement($xeTable), showSortPutButton && !parentItem ? (0, _vue.h)(VxeUIButtonComponent, {
             mode: 'text',
-            content: getI18n('vxe.custom.setting.putTop'),
+            icon: 'vxe-icon-top',
             title: getI18n('vxe.custom.setting.putTopTitle'),
             disabled: index <= 0,
             onClick(evntParame) {
@@ -1191,62 +1191,278 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             }
           }) : renderEmptyElement($xeTable), showSortPutButton && !parentItem ? (0, _vue.h)(VxeUIButtonComponent, {
             mode: 'text',
-            content: getI18n('vxe.custom.setting.putBottom'),
+            icon: 'vxe-icon-bottom',
             title: getI18n('vxe.custom.setting.putBottomTitle'),
             disabled: index >= items.length - 1,
             onClick(evntParame) {
               sortMoveBottomEvent(evntParame, column);
             }
-          }) : renderEmptyElement($xeTable)] : []) : renderEmptyElement($xeTable)])]), allowResizable ? (0, _vue.h)('td', {
-            class: 'vxe-table-custom-popup--column-item col--resizable'
-          }, [column.children && column.children.length || !(_xeUtils.default.isBoolean(column.resizable) ? column.resizable : columnOpts.resizable || allResizable) ? (0, _vue.h)('span', '-') : VxeUINumberInputComponent ? (0, _vue.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($xeTable)]) : renderEmptyElement($xeTable), allowFixed ? (0, _vue.h)('td', {
-            class: 'vxe-table-custom-popup--column-item col--fixed'
-          }, [parentItem ? (0, _vue.h)('span', '-') : VxeUIRadioGroupComponent ? (0, _vue.h)(VxeUIRadioGroupComponent, {
-            modelValue: column.renderFixed || '',
-            type: 'button',
-            size: 'mini',
-            disabled: isHidden,
-            options: [{
-              label: getI18n('vxe.custom.setting.fixedLeft'),
-              value: 'left',
-              disabled: isHidden || isMaxFixedColumn
-            }, {
-              label: getI18n('vxe.custom.setting.fixedUnset'),
-              value: '',
-              disabled: isHidden
-            }, {
-              label: getI18n('vxe.custom.setting.fixedRight'),
-              value: 'right',
-              disabled: isHidden || isMaxFixedColumn
+          }) : renderEmptyElement($xeTable)] : []) : renderEmptyElement($xeTable)])]));
+          if (allowResizable) {
+            tdVNs.push((0, _vue.h)('td', {
+              key: 'aw',
+              class: 'vxe-table-custom-popup--column-td col--resizable'
+            }, [column.children && column.children.length || !(_xeUtils.default.isBoolean(column.resizable) ? column.resizable : columnOpts.resizable || allResizable) ? (0, _vue.h)('span', '-') : VxeUINumberInputComponent ? (0, _vue.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($xeTable)]));
+          }
+          if (allowFixed) {
+            tdVNs.push((0, _vue.h)('td', {
+              key: 'af',
+              class: 'vxe-table-custom-popup--column-td col--fixed'
+            }, parentItem ? [(0, _vue.h)('span', '-')] : VxeUIRadioGroupComponent ? [(0, _vue.h)(VxeUIButtonComponent, {
+              icon: column.renderFixed === 'left' ? getIcon().TOOLBAR_TOOLS_FIXED_LEFT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_LEFT,
+              status: column.renderFixed === 'left' ? 'primary' : '',
+              disabled: isHidden || isMaxFixedColumn && !column.renderFixed,
+              title: getI18n(column.renderFixed === 'left' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedLeft'),
+              onClick: ({
+                $event
+              }) => {
+                changeFixedOption(column, 'left', $event);
+              }
+            }), (0, _vue.h)(VxeUIButtonComponent, {
+              icon: column.renderFixed === 'right' ? getIcon().TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_RIGHT,
+              status: column.renderFixed === 'right' ? 'primary' : '',
+              disabled: isHidden || isMaxFixedColumn && !column.renderFixed,
+              title: getI18n(column.renderFixed === 'right' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedRight'),
+              onClick: ({
+                $event
+              }) => {
+                changeFixedOption(column, 'right', $event);
+              }
+            })] : []));
+          }
+          if (allowAlign) {
+            tdVNs.push((0, _vue.h)('td', {
+              key: 'aa',
+              class: 'vxe-table-custom-popup--column-td col--align'
+            }, VxeUIRadioGroupComponent ? [(0, _vue.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((0, _vue.h)('td', {
+              key: 'aha',
+              class: 'vxe-table-custom-popup--column-td col--header-align'
+            }, isColGroup ? [(0, _vue.h)('span', '-')] : VxeUIRadioGroupComponent ? [(0, _vue.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((0, _vue.h)('td', {
+              key: 'afa',
+              class: 'vxe-table-custom-popup--column-td col--footer-align'
+            }, isColGroup ? [(0, _vue.h)('span', '-')] : VxeUIRadioGroupComponent ? [(0, _vue.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((0, _vue.h)('tr', {
+            key: column.id,
+            colid: column.id,
+            class: [`vxe-table-custom-popup--row level--${column.level}`, {
+              'is--group': isColGroup
             }],
-            onChange({
-              label,
-              $event
-            }) {
-              changeFixedOption(column, label, $event);
-            }
-          }) : renderEmptyElement($xeTable)]) : renderEmptyElement($xeTable)]));
+            onDragstart: sortDragstartEvent,
+            onDragend: sortDragendEvent,
+            onDragover: sortDragoverEvent
+          }, 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((0, _vue.h)('col', {
+          key: 'av',
+          class: 'vxe-table-custom-popup--column-col col--checkbox'
+        }));
+        headVNs.push((0, _vue.h)('th', {
+          key: 'av',
+          class: 'vxe-table-custom-popup--column-th col--checkbox'
+        }, [(0, _vue.h)('div', {
+          class: ['vxe-table-custom--checkbox-option', {
+            'is--checked': isAllChecked,
+            'is--indeterminate': isAllIndeterminate
+          }],
+          title: getI18n('vxe.table.allTitle'),
+          onClick: allOptionEvent
+        }, [(0, _vue.h)('span', {
+          class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
+        })
+        // h('span', {
+        //   class: 'vxe-checkbox--label'
+        // }, getI18n('vxe.toolbar.customAll'))
+        ])]));
+      }
+      colVNs.push((0, _vue.h)('col', {
+        key: 'at',
+        class: 'vxe-table-custom-popup--column-col col--title'
+      }));
+      headVNs.push((0, _vue.h)('th', {
+        key: 'at',
+        class: 'vxe-table-custom-popup--column-th col--title'
+      }, getI18n('vxe.custom.setting.colTitle')));
+      if (allowResizable) {
+        colVNs.push((0, _vue.h)('col', {
+          key: 'aw',
+          class: 'vxe-table-custom-popup--column-col col--width'
+        }));
+        headVNs.push((0, _vue.h)('th', {
+          key: 'aw',
+          class: 'vxe-table-custom-popup--column-th col--width'
+        }, getI18n('vxe.custom.setting.colResizable')));
+      }
+      if (allowFixed) {
+        colVNs.push((0, _vue.h)('col', {
+          key: 'af',
+          class: 'vxe-table-custom-popup--column-col col--fixed'
+        }));
+        headVNs.push((0, _vue.h)('th', {
+          key: 'af',
+          class: 'vxe-table-custom-popup--column-th col--fixed'
+        }, getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize])));
+      }
+      if (allowAlign) {
+        colVNs.push((0, _vue.h)('col', {
+          key: 'aa',
+          class: 'vxe-table-custom-popup--column-col col--align'
+        }));
+        headVNs.push((0, _vue.h)('th', {
+          key: 'aa',
+          class: 'vxe-table-custom-popup--column-th col--align'
+        }, getI18n('vxe.custom.setting.colAlign')));
+      }
+      if (allowHeaderAlign) {
+        colVNs.push((0, _vue.h)('col', {
+          key: 'aha',
+          class: 'vxe-table-custom-popup--column-col col--header-align'
+        }));
+        headVNs.push((0, _vue.h)('th', {
+          key: 'aha',
+          class: 'vxe-table-custom-popup--column-th col--header-align'
+        }, getI18n('vxe.custom.setting.colHeadAlign')));
+      }
+      if (allowFooterAlign) {
+        colVNs.push((0, _vue.h)('col', {
+          key: 'afa',
+          class: 'vxe-table-custom-popup--column-col col--footer-align'
+        }));
+        headVNs.push((0, _vue.h)('th', {
+          key: 'afa',
+          class: 'vxe-table-custom-popup--column-th col--footer-align'
+        }, getI18n('vxe.custom.setting.colFootAlign')));
+      }
       const scopedSlots = {
         default: () => {
           return (0, _vue.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) : [!isAggRtBmLayout && !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregatePopupPanel ? (0, _vue.h)($xeTable.getPivotTableAggregatePopupPanel(), {
             customStore
           }) : renderEmptyElement($xeTable), (0, _vue.h)('div', {
@@ -1256,31 +1472,12 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             class: 'vxe-table-custom-popup--table-top'
           }, $xeTable.callSlot(topSlot, params)) : renderEmptyElement($xeTable), (0, _vue.h)('div', {
             class: 'vxe-table-custom-popup--table-wrapper'
-          }, [(0, _vue.h)('table', {}, [(0, _vue.h)('colgroup', {}, [allowVisible ? (0, _vue.h)('col', {
-            class: 'vxe-table-custom-popup--table-col-seq'
-          }) : renderEmptyElement($xeTable), (0, _vue.h)('col', {
-            class: 'vxe-table-custom-popup--table-col-title'
-          }), allowResizable ? (0, _vue.h)('col', {
-            class: 'vxe-table-custom-popup--table-col-width'
-          }) : renderEmptyElement($xeTable), allowFixed ? (0, _vue.h)('col', {
-            class: 'vxe-table-custom-popup--table-col-fixed'
-          }) : renderEmptyElement($xeTable)]), (0, _vue.h)('thead', {}, [(0, _vue.h)('tr', {}, [allowVisible ? (0, _vue.h)('th', {}, [(0, _vue.h)('div', {
-            class: ['vxe-table-custom--checkbox-option', {
-              'is--checked': isAllChecked,
-              'is--indeterminate': isAllIndeterminate
-            }],
-            title: getI18n('vxe.table.allTitle'),
-            onClick: allOptionEvent
-          }, [(0, _vue.h)('span', {
-            class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
-          }), (0, _vue.h)('span', {
-            class: 'vxe-checkbox--label'
-          }, getI18n('vxe.toolbar.customAll'))])]) : renderEmptyElement($xeTable), (0, _vue.h)('th', {}, getI18n('vxe.custom.setting.colTitle')), allowResizable ? (0, _vue.h)('th', {}, getI18n('vxe.custom.setting.colResizable')) : renderEmptyElement($xeTable), allowFixed ? (0, _vue.h)('th', {}, getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize])) : renderEmptyElement($xeTable)])]), (0, _vue.h)(_vue.TransitionGroup, {
+          }, [(0, _vue.h)('table', {}, [(0, _vue.h)('colgroup', {}, colVNs), (0, _vue.h)('thead', {}, [(0, _vue.h)('tr', {}, headVNs)]), (0, _vue.h)(_vue.TransitionGroup, {
             class: 'vxe-table-custom--panel-list',
             tag: 'tbody',
             name: 'vxe-table-custom--list'
           }, {
-            default: () => trVNs
+            default: () => renderPopupBodys()
           })])]), bottomSlot ? (0, _vue.h)('div', {
             class: 'vxe-table-custom-popup--table-bottom'
           }, $xeTable.callSlot(bottomSlot, params)) : renderEmptyElement($xeTable), renderDragTip()]), isAggRtBmLayout && !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregatePopupPanel ? (0, _vue.h)($xeTable.getPivotTableAggregatePopupPanel(), {
@@ -1298,6 +1495,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             disabled: !isCustomStatus,
             onClick: resetCustomEvent
           }) : renderEmptyElement($xeTable), immediate ? VxeUIButtonComponent ? (0, _vue.h)(VxeUIButtonComponent, {
+            status: 'primary',
             content: customOpts.closeButtonText || getI18n('vxe.table.customClose'),
             onClick: cancelCloseEvent
           }) : renderEmptyElement($xeTable) : VxeUIButtonComponent ? (0, _vue.h)(VxeUIButtonComponent, {
@@ -1336,8 +1534,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         className: ['vxe-table-custom-modal-wrapper', 'vxe-table--ignore-clear', modalOpts.className || ''].join(' '),
         modelValue: customStore.visible,
         title: modalOpts.title || getI18n('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,
@@ -1346,6 +1544,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         mask: modalOpts.mask,
         lockView: modalOpts.lockView,
         resize: modalOpts.resize,
+        transfer: modalOpts.transfer,
         escClosable: !!modalOpts.escClosable,
         maskClosable: !!modalOpts.maskClosable,
         destroyOnClose: true,