vxe-table 3.21.21 → 3.21.23

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

@@ -182,7 +182,9 @@ var _default = exports.default = /* define-vxe-component start */(0, _comp.defin
       $xeTable.saveCustom();
       $xeTable.closeCustom();
       $xeTable.emitCustomEvent('confirm', $event);
+      $xeTable.dispatchEvent('custom-confirm', {}, $event);
       $xeTable.emitCustomEvent('close', $event);
+      $xeTable.dispatchEvent('custom-close', {}, $event);
     },
     cancelCloseEvent({
       $event
@@ -191,6 +193,7 @@ var _default = exports.default = /* define-vxe-component start */(0, _comp.defin
       const $xeTable = $xeTableCustomPanel.$xeTable;
       $xeTable.closeCustom();
       $xeTable.emitCustomEvent('close', $event);
+      $xeTable.dispatchEvent('custom-close', {}, $event);
     },
     cancelCustomEvent({
       $event
@@ -200,7 +203,9 @@ var _default = exports.default = /* define-vxe-component start */(0, _comp.defin
       $xeTable.cancelCustom();
       $xeTable.closeCustom();
       $xeTable.emitCustomEvent('cancel', $event);
+      $xeTable.dispatchEvent('custom-cancel', {}, $event);
       $xeTable.emitCustomEvent('close', $event);
+      $xeTable.dispatchEvent('custom-close', {}, $event);
     },
     handleResetCustomEvent(evnt) {
       const $xeTableCustomPanel = this;
@@ -208,7 +213,9 @@ var _default = exports.default = /* define-vxe-component start */(0, _comp.defin
       $xeTable.resetCustom(true);
       $xeTable.closeCustom();
       $xeTable.emitCustomEvent('reset', evnt);
+      $xeTable.dispatchEvent('custom-reset', {}, evnt);
       $xeTable.emitCustomEvent('close', evnt);
+      $xeTable.dispatchEvent('custom-close', {}, evnt);
     },
     resetCustomEvent(evnt) {
       if (_ui.VxeUI.modal) {
@@ -335,6 +342,25 @@ var _default = exports.default = /* define-vxe-component start */(0, _comp.defin
         }, evnt);
       }
     },
+    changeAlignOption(column, targetAlign, colProperty, renderProperty, eName, evnt) {
+      const $xeTableCustomPanel = this;
+      const $xeTable = $xeTableCustomPanel.$xeTable;
+      const tableReactData = $xeTable;
+      const customOpts = $xeTable.computeCustomOpts;
+      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);
+    },
     allOptionEvent(evnt) {
       const $xeTableCustomPanel = this;
       const $xeTable = $xeTableCustomPanel.$xeTable;
@@ -849,7 +875,7 @@ var _default = exports.default = /* define-vxe-component start */(0, _comp.defin
       const customOpts = $xeTable.computeCustomOpts;
       const columnDragOpts = $xeTable.computeColumnDragOpts;
       const {
-        popupStyle
+        defPopupStyle
       } = customStore;
       const {
         immediate,
@@ -1025,7 +1051,7 @@ var _default = exports.default = /* define-vxe-component start */(0, _comp.defin
             }
           }) : renderEmptyElement($xeTable)] : []) : renderEmptyElement($xeTable), !parentItem && allowFixed ? h('div', {
             class: 'vxe-table-custom--fixed-option'
-          }, [h(VxeUIButtonComponent, {
+          }, VxeUIButtonComponent ? [h(VxeUIButtonComponent, {
             props: {
               mode: 'text',
               icon: column.renderFixed === 'left' ? getIcon().TOOLBAR_TOOLS_FIXED_LEFT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_LEFT,
@@ -1055,7 +1081,7 @@ var _default = exports.default = /* define-vxe-component start */(0, _comp.defin
                 $xeTableCustomPanel.changeFixedOption(column, 'right', $event);
               }
             }
-          })]) : renderEmptyElement($xeTable)]));
+          })] : []) : renderEmptyElement($xeTable)]));
         }
       });
       return h('div', {
@@ -1065,7 +1091,7 @@ var _default = exports.default = /* define-vxe-component start */(0, _comp.defin
           [`size--${vSize}`]: vSize,
           'is--active': customStore.visible
         }],
-        style: popupStyle
+        style: defPopupStyle
       }, customStore.visible ? [h('div', {
         ref: 'refBodyWrapperElem',
         class: 'vxe-table-custom-simple--body-wrapper'
@@ -1154,48 +1180,33 @@ var _default = exports.default = /* define-vxe-component start */(0, _comp.defin
         }
       })])]) : null]), $xeTableCustomPanel.renderDragTip(h)])] : []);
     },
-    renderPopupPanel(h) {
-      const VxeUIModalComponent = _ui.VxeUI.getComponent('VxeModal');
-      const VxeUIDrawerComponent = _ui.VxeUI.getComponent('VxeDrawer');
+    renderPopupBodys(h) {
       const VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
       const VxeUINumberInputComponent = _ui.VxeUI.getComponent('VxeNumberInput');
+      const VxeUIRadioGroupComponent = _ui.VxeUI.getComponent('VxeRadioGroup');
       const $xeTableCustomPanel = this;
-      const props = $xeTableCustomPanel;
       const $xeTable = $xeTableCustomPanel.$xeTable;
       const tableProps = $xeTable;
       const tableReactData = $xeTable;
-      const $xeGrid = $xeTable.$xeGrid;
-      const $xeGantt = $xeTable.$xeGantt;
       const {
-        customStore
-      } = props;
-      const {
-        treeConfig,
-        rowGroupConfig,
-        aggregateConfig,
         resizable: allResizable
       } = tableProps;
       const {
-        isCustomStatus,
         customColumnList
       } = tableReactData;
       const customOpts = $xeTable.computeCustomOpts;
       const columnDragOpts = $xeTable.computeColumnDragOpts;
-      const aggregateOpts = $xeTable.computeAggregateOpts;
-      const {
-        placement: aggPlacement
-      } = aggregateOpts;
       const {
-        mode,
         immediate,
         showSortDragButton,
         showSortMoveButton,
         showSortPutButton,
-        modalOptions,
-        drawerOptions,
         allowVisible,
         allowSort,
         allowFixed,
+        allowAlign,
+        allowHeaderAlign,
+        allowFooterAlign,
         allowResizable,
         allowGroup,
         allowValues,
@@ -1203,40 +1214,17 @@ var _default = exports.default = /* define-vxe-component start */(0, _comp.defin
         visibleMethod
       } = customOpts;
       const columnOpts = $xeTable.computeColumnOpts;
-      const {
-        maxFixedSize
-      } = columnOpts;
       const resizableOpts = $xeTable.computeResizableOpts;
       const {
         minWidth: reMinWidth,
         maxWidth: reMaxWidth
       } = resizableOpts;
-      const modalOpts = Object.assign({}, modalOptions);
-      const drawerOpts = Object.assign({}, drawerOptions);
       const isMaxFixedColumn = $xeTable.computeIsMaxFixedColumn;
       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,
@@ -1274,41 +1262,50 @@ var _default = exports.default = /* define-vxe-component start */(0, _comp.defin
           }) : false;
           const isHidden = !isChecked;
           const showSortBtn = (isCrossDrag || isPeerDrag ? immediate : false) || column.level === 1;
-          trVNs.push(h('tr', {
-            key: column.id,
-            attrs: {
-              colid: column.id
-            },
-            class: [`vxe-table-custom-popup--row level--${column.level}`, {
-              'is--group': isColGroup
-            }],
-            on: {
-              dragstart: $xeTableCustomPanel.sortDragstartEvent,
-              dragend: $xeTableCustomPanel.sortDragendEvent,
-              dragover: $xeTableCustomPanel.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
-            }],
-            attrs: {
-              title: getI18n('vxe.custom.setting.colVisible')
-            },
-            on: {
-              click: evnt => {
-                if (!isDisabled) {
-                  $xeTableCustomPanel.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(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
+              }],
+              attrs: {
+                title: getI18n('vxe.custom.setting.colVisible')
+              },
+              on: {
+                click: evnt => {
+                  if (!isDisabled) {
+                    $xeTableCustomPanel.changeCheckboxOption(column, evnt);
+                  }
                 }
               }
-            }
-          }, [h('span', {
-            class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
-          })])]) : renderEmptyElement($xeTable), h('td', {
-            class: 'vxe-table-custom-popup--column-item col--name'
+            }, [h('span', {
+              class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().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', {
@@ -1343,7 +1340,7 @@ var _default = exports.default = /* define-vxe-component start */(0, _comp.defin
           }, VxeUIButtonComponent ? [showSortMoveButton ? h(VxeUIButtonComponent, {
             props: {
               mode: 'text',
-              content: getI18n('vxe.custom.setting.moveUp'),
+              icon: 'vxe-icon-arrows-up',
               title: getI18n('vxe.custom.setting.moveUpTitle'),
               disabled: index <= 0
             },
@@ -1355,7 +1352,7 @@ var _default = exports.default = /* define-vxe-component start */(0, _comp.defin
           }) : renderEmptyElement($xeTable), showSortMoveButton ? h(VxeUIButtonComponent, {
             props: {
               mode: 'text',
-              content: getI18n('vxe.custom.setting.moveDn'),
+              icon: 'vxe-icon-arrows-down',
               title: getI18n('vxe.custom.setting.moveDnTitle'),
               disabled: index >= items.length - 1
             },
@@ -1367,7 +1364,7 @@ var _default = exports.default = /* define-vxe-component start */(0, _comp.defin
           }) : renderEmptyElement($xeTable), showSortPutButton && !parentItem ? h(VxeUIButtonComponent, {
             props: {
               mode: 'text',
-              content: getI18n('vxe.custom.setting.putTop'),
+              icon: 'vxe-icon-top',
               title: getI18n('vxe.custom.setting.putTopTitle'),
               disabled: index <= 0
             },
@@ -1379,7 +1376,7 @@ var _default = exports.default = /* define-vxe-component start */(0, _comp.defin
           }) : renderEmptyElement($xeTable), showSortPutButton && !parentItem ? h(VxeUIButtonComponent, {
             props: {
               mode: 'text',
-              content: getI18n('vxe.custom.setting.putBottom'),
+              icon: 'vxe-icon-bottom',
               title: getI18n('vxe.custom.setting.putBottomTitle'),
               disabled: index >= items.length - 1
             },
@@ -1388,63 +1385,312 @@ var _default = exports.default = /* define-vxe-component start */(0, _comp.defin
                 $xeTableCustomPanel.sortMoveBottomEvent(evntParame, column);
               }
             }
-          }) : renderEmptyElement($xeTable)] : []) : renderEmptyElement($xeTable)])]), allowResizable ? 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) ? h('span', '-') : VxeUINumberInputComponent ? h(VxeUINumberInputComponent, {
-            props: {
-              type: 'integer',
-              immediate: false,
-              disabled: isHidden,
-              value: column.renderResizeWidth,
-              min: customMinWidth || undefined,
-              max: customMaxWidth || undefined
-            },
-            on: {
-              modelValue(value) {
-                column.renderResizeWidth = Math.max(0, Number(value));
+          }) : renderEmptyElement($xeTable)] : []) : renderEmptyElement($xeTable)])]));
+          if (allowResizable) {
+            tdVNs.push(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) ? h('span', '-') : VxeUINumberInputComponent ? h(VxeUINumberInputComponent, {
+              props: {
+                type: 'integer',
+                immediate: false,
+                disabled: isHidden,
+                value: column.renderResizeWidth,
+                min: customMinWidth || undefined,
+                max: customMaxWidth || undefined
               },
-              change() {
-                $xeTableCustomPanel.changeColumnWidth(column);
+              on: {
+                modelValue(value) {
+                  const width = Math.max(0, Number(value));
+                  column.renderResizeWidth = width;
+                },
+                change() {
+                  $xeTableCustomPanel.changeColumnWidth(column);
+                }
               }
-            }
-          }) : renderEmptyElement($xeTableCustomPanel)]) : renderEmptyElement($xeTable), allowFixed ? h('td', {
-            class: 'vxe-table-custom-popup--column-item col--fixed'
-          }, [parentItem ? h('span', '-') : h('vxe-radio-group', {
-            props: {
-              value: 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)]));
+          }
+          if (allowFixed) {
+            tdVNs.push(h('td', {
+              key: 'af',
+              class: 'vxe-table-custom-popup--column-td col--fixed'
+            }, parentItem ? [h('span', '-')] : VxeUIRadioGroupComponent ? [h(VxeUIButtonComponent, {
+              props: {
+                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')
+              },
+              on: {
+                click: ({
+                  $event
+                }) => {
+                  $xeTableCustomPanel.changeFixedOption(column, 'left', $event);
+                }
+              }
+            }), h(VxeUIButtonComponent, {
+              props: {
+                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')
+              },
+              on: {
+                click: ({
+                  $event
+                }) => {
+                  $xeTableCustomPanel.changeFixedOption(column, 'right', $event);
+                }
+              }
+            })] : []));
+          }
+          if (allowAlign) {
+            tdVNs.push(h('td', {
+              key: 'aa',
+              class: 'vxe-table-custom-popup--column-td col--align'
+            }, VxeUIRadioGroupComponent ? [h(VxeUIRadioGroupComponent, {
+              props: {
+                value: column.renderAlign || '',
+                type: 'button',
+                strict: false,
+                disabled: isHidden,
+                options: alignList
+              },
+              on: {
+                change({
+                  value,
+                  $event
+                }) {
+                  $xeTableCustomPanel.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, {
+              props: {
+                value: column.renderHeaderAlign || '',
+                type: 'button',
+                strict: false,
+                disabled: isHidden,
+                options: alignList
+              },
+              on: {
+                change({
+                  value,
+                  $event
+                }) {
+                  $xeTableCustomPanel.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, {
+              props: {
+                value: column.renderFooterAlign || '',
+                type: 'button',
+                strict: false,
+                disabled: isHidden,
+                options: alignList
+              },
+              on: {
+                change({
+                  value,
+                  $event
+                }) {
+                  $xeTableCustomPanel.changeAlignOption(column, value, 'footerAlign', 'renderFooterAlign', 'custom-footer-align-change', $event);
+                }
+              }
+            })] : []));
+          }
+          trVNs.push(h('tr', {
+            key: column.id,
+            attrs: {
+              colid: column.id
             },
+            class: [`vxe-table-custom-popup--row level--${column.level}`, {
+              'is--group': isColGroup
+            }],
             on: {
-              change({
-                label,
-                $event
-              }) {
-                $xeTableCustomPanel.changeFixedOption(column, label, $event);
-              }
+              dragstart: $xeTableCustomPanel.sortDragstartEvent,
+              dragend: $xeTableCustomPanel.sortDragendEvent,
+              dragover: $xeTableCustomPanel.sortDragoverEvent
             }
-          })]) : renderEmptyElement($xeTable)]));
+          }, tdVNs));
         }
       });
+      return trVNs;
+    },
+    renderPopupPanel(h) {
+      const VxeUIModalComponent = _ui.VxeUI.getComponent('VxeModal');
+      const VxeUIDrawerComponent = _ui.VxeUI.getComponent('VxeDrawer');
+      const VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
+      const $xeTableCustomPanel = this;
+      const props = $xeTableCustomPanel;
+      const $xeTable = $xeTableCustomPanel.$xeTable;
+      const tableProps = $xeTable;
+      const tableReactData = $xeTable;
+      const $xeGrid = $xeTable.$xeGrid;
+      const $xeGantt = $xeTable.$xeGantt;
+      const {
+        customStore
+      } = props;
+      const {
+        treeConfig,
+        rowGroupConfig,
+        aggregateConfig
+      } = tableProps;
+      const {
+        isCustomStatus,
+        customColumnList
+      } = tableReactData;
+      const vSize = $xeTable.computeSize;
+      const customOpts = $xeTable.computeCustomOpts;
+      const aggregateOpts = $xeTable.computeAggregateOpts;
+      const {
+        panePopupStyle
+      } = customStore;
+      const {
+        placement: aggPlacement
+      } = aggregateOpts;
+      const {
+        mode,
+        immediate,
+        modalOptions,
+        drawerOptions,
+        allowVisible,
+        allowFixed,
+        allowAlign,
+        allowHeaderAlign,
+        allowFooterAlign,
+        allowResizable
+      } = customOpts;
+      const columnOpts = $xeTable.computeColumnOpts;
+      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
+          }],
+          attrs: {
+            title: getI18n('vxe.table.allTitle')
+          },
+          on: {
+            click: $xeTableCustomPanel.allOptionEvent
+          }
+        }, [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(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('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('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(`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('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('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('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, h) : [!isAggRtBmLayout && !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregatePopupPanel ? h($xeTable.getPivotTableAggregatePopupPanel(), {
             props: {
               customStore
@@ -1456,36 +1702,13 @@ var _default = exports.default = /* define-vxe-component start */(0, _comp.defin
             class: 'vxe-table-custom-popup--table-top'
           }, $xeTable.callSlot(topSlot, params, h)) : renderEmptyElement($xeTable), h('div', {
             class: 'vxe-table-custom-popup--table-wrapper'
-          }, [h('table', {}, [h('colgroup', {}, [allowVisible ? h('col', {
-            class: 'vxe-table-custom-popup--table-col-seq'
-          }) : renderEmptyElement($xeTable), h('col', {
-            class: 'vxe-table-custom-popup--table-col-title'
-          }), allowResizable ? h('col', {
-            class: 'vxe-table-custom-popup--table-col-width'
-          }) : renderEmptyElement($xeTable), allowFixed ? h('col', {
-            class: 'vxe-table-custom-popup--table-col-fixed'
-          }) : renderEmptyElement($xeTable)]), h('thead', {}, [h('tr', {}, [allowVisible ? h('th', {}, [h('div', {
-            class: ['vxe-table-custom--checkbox-option', {
-              'is--checked': isAllChecked,
-              'is--indeterminate': isAllIndeterminate
-            }],
-            attrs: {
-              title: getI18n('vxe.table.allTitle')
-            },
-            on: {
-              click: $xeTableCustomPanel.allOptionEvent
-            }
-          }, [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'))])]) : renderEmptyElement($xeTable), h('th', {}, getI18n('vxe.custom.setting.colTitle')), allowResizable ? h('th', {}, getI18n('vxe.custom.setting.colResizable')) : renderEmptyElement($xeTable), allowFixed ? h('th', {}, getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize])) : renderEmptyElement($xeTable)])]), h('transition-group', {
+          }, [h('table', {}, [h('colgroup', {}, colVNs), h('thead', {}, [h('tr', {}, headVNs)]), h('transition-group', {
             class: 'vxe-table-custom--panel-list',
             props: {
               tag: 'tbody',
               name: 'vxe-table-custom--list'
             }
-          }, trVNs)])]), bottomSlot ? h('div', {
+          }, $xeTableCustomPanel.renderPopupBodys(h))])]), bottomSlot ? h('div', {
             class: 'vxe-table-custom-popup--table-bottom'
           }, $xeTable.callSlot(bottomSlot, params, h)) : renderEmptyElement($xeTable), $xeTableCustomPanel.renderDragTip(h)]), isAggRtBmLayout && !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregatePopupPanel ? h($xeTable.getPivotTableAggregatePopupPanel(), {
             props: {
@@ -1509,6 +1732,7 @@ var _default = exports.default = /* define-vxe-component start */(0, _comp.defin
             }
           }), immediate ? h(VxeUIButtonComponent, {
             props: {
+              status: 'primary',
               content: customOpts.resetButtonText || getI18n('vxe.table.customClose')
             },
             on: {
@@ -1561,11 +1785,11 @@ var _default = exports.default = /* define-vxe-component start */(0, _comp.defin
       return VxeUIModalComponent ? h(VxeUIModalComponent, {
         key: 'modal',
         props: {
-          className: ['vxe-table-custom-popup-wrapper', 'vxe-table--ignore-clear', modalOpts.className || ''].join(' '),
+          className: ['vxe-table-custom-modal-wrapper', 'vxe-table--ignore-clear', modalOpts.className || ''].join(' '),
           value: 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,
@@ -1574,6 +1798,7 @@ var _default = exports.default = /* define-vxe-component start */(0, _comp.defin
           mask: modalOpts.mask,
           lockView: modalOpts.lockView,
           resize: modalOpts.resize,
+          transfer: modalOpts.transfer,
           escClosable: !!modalOpts.escClosable,
           maskClosable: !!modalOpts.maskClosable,
           destroyOnClose: true,