vxe-table 3.10.3 → 3.10.5

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

@@ -21,10 +21,17 @@ function updateDropHint(_vm, evnt) {
 }
 const renderSimplePanel = (h, _vm) => {
     const VxeUIButtonComponent = VxeUI.getComponent('VxeButton');
-    const { _e, $xetable, customStore, dragColumn } = _vm;
-    const { customColumnList, customOpts, isMaxFixedColumn } = $xetable;
+    const $xeTable = _vm.$xeTable;
+    const { _e, customStore, dragColumn } = _vm;
+    const { customColumnList, customOpts, isMaxFixedColumn } = $xeTable;
     const { maxHeight } = customStore;
     const { checkMethod, visibleMethod, allowVisible, allowSort, allowFixed, trigger, placement } = customOpts;
+    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 colVNs = [];
     const customWrapperOns = {};
     // hover 触发
@@ -32,6 +39,15 @@ const renderSimplePanel = (h, _vm) => {
         customWrapperOns.mouseenter = _vm.handleWrapperMouseenterEvent;
         customWrapperOns.mouseleave = _vm.handleWrapperMouseleaveEvent;
     }
+    const isAllChecked = customStore.isAll;
+    const isAllIndeterminate = customStore.isIndeterminate;
+    const params = {
+        $table: $xeTable,
+        $grid: $xeTable.xegrid,
+        columns: customColumnList,
+        isAllChecked,
+        isAllIndeterminate
+    };
     XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
         const isVisible = visibleMethod ? visibleMethod({ column }) : true;
         if (isVisible) {
@@ -155,8 +171,6 @@ const renderSimplePanel = (h, _vm) => {
             ]));
         }
     });
-    const isAllChecked = customStore.isAll;
-    const isAllIndeterminate = customStore.isIndeterminate;
     return h('div', {
         key: 'simple',
         class: ['vxe-table-custom-wrapper', `placement--${placement}`, {
@@ -169,49 +183,69 @@ const renderSimplePanel = (h, _vm) => {
             : {}
     }, customStore.visible
         ? [
-            h('ul', {
+            h('div', {
                 class: 'vxe-table-custom--header'
-            }, [
-                h('li', {
-                    class: 'vxe-table-custom--option'
-                }, [
-                    allowVisible
-                        ? h('div', {
-                            class: ['vxe-table-custom--checkbox-option', {
-                                    'is--checked': isAllChecked,
-                                    'is--indeterminate': isAllIndeterminate
-                                }],
-                            attrs: {
-                                title: getI18n('vxe.table.allTitle')
-                            },
-                            on: {
-                                click: _vm.allOptionEvent
-                            }
+            }, headerSlot
+                ? $xeTable.callSlot(headerSlot, params, h)
+                : [
+                    h('ul', {
+                        class: 'vxe-table-custom--panel-list'
+                    }, [
+                        h('li', {
+                            class: 'vxe-table-custom--option'
                         }, [
-                            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'))
+                            allowVisible
+                                ? h('div', {
+                                    class: ['vxe-table-custom--checkbox-option', {
+                                            'is--checked': isAllChecked,
+                                            'is--indeterminate': isAllIndeterminate
+                                        }],
+                                    attrs: {
+                                        title: getI18n('vxe.table.allTitle')
+                                    },
+                                    on: {
+                                        click: _vm.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'))
+                                ])
+                                : h('span', {
+                                    class: 'vxe-checkbox--label'
+                                }, getI18n('vxe.table.customTitle'))
                         ])
-                        : h('span', {
-                            class: 'vxe-checkbox--label'
-                        }, getI18n('vxe.table.customTitle'))
-                ])
-            ]),
+                    ])
+                ]),
             h('div', {
                 ref: 'bodyElemRef',
-                class: 'vxe-table-custom--list-wrapper'
+                class: 'vxe-table-custom--body'
             }, [
-                h('transition-group', {
-                    class: 'vxe-table-custom--body',
-                    props: {
-                        name: 'vxe-table-custom--list',
-                        tag: 'ul'
-                    },
-                    on: customWrapperOns
-                }, colVNs),
+                topSlot
+                    ? h('div', {
+                        class: 'vxe-table-custom--panel-top'
+                    }, $xeTable.callSlot(topSlot, params, h))
+                    : renderEmptyElement($xeTable),
+                defaultSlot
+                    ? h('div', {
+                        class: 'vxe-table-custom--panel-body'
+                    }, $xeTable.callSlot(defaultSlot, params, h))
+                    : h('transition-group', {
+                        class: 'vxe-table-custom--panel-list',
+                        props: {
+                            name: 'vxe-table-custom--list',
+                            tag: 'ul'
+                        },
+                        on: customWrapperOns
+                    }, colVNs),
+                bottomSlot
+                    ? h('div', {
+                        class: 'vxe-table-custom--panel-bottom'
+                    }, $xeTable.callSlot(bottomSlot, params, h))
+                    : renderEmptyElement($xeTable),
                 h('div', {
                     ref: 'dragHintElemRef',
                     class: 'vxe-table-custom-popup--drag-hint'
@@ -220,48 +254,54 @@ const renderSimplePanel = (h, _vm) => {
             customOpts.showFooter
                 ? h('div', {
                     class: 'vxe-table-custom--footer'
-                }, [
-                    h(VxeUIButtonComponent, {
-                        props: {
-                            mode: 'text',
-                            content: customOpts.resetButtonText || getI18n('vxe.table.customRestore')
-                        },
-                        on: {
-                            click: _vm.resetCustomEvent
-                        }
-                    }),
-                    customOpts.immediate
-                        ? h(VxeUIButtonComponent, {
-                            props: {
-                                mode: 'text',
-                                content: customOpts.closeButtonText || getI18n('vxe.table.customClose')
-                            },
-                            on: {
-                                click: _vm.cancelCloseEvent
-                            }
-                        })
-                        : h(VxeUIButtonComponent, {
-                            props: {
-                                mode: 'text',
-                                content: customOpts.resetButtonText || getI18n('vxe.table.customCancel')
-                            },
-                            on: {
-                                click: _vm.cancelCustomEvent
-                            }
-                        }),
-                    customOpts.immediate
-                        ? _e()
-                        : h(VxeUIButtonComponent, {
-                            props: {
-                                mode: 'text',
-                                status: 'primary',
-                                content: customOpts.confirmButtonText || getI18n('vxe.table.customConfirm')
-                            },
-                            on: {
-                                click: _vm.confirmCustomEvent
-                            }
-                        })
-                ])
+                }, footerSlot
+                    ? $xeTable.callSlot(footerSlot, params, h)
+                    : [
+                        h('div', {
+                            class: 'vxe-table-custom--footer-buttons'
+                        }, [
+                            h(VxeUIButtonComponent, {
+                                props: {
+                                    mode: 'text',
+                                    content: customOpts.resetButtonText || getI18n('vxe.table.customRestore')
+                                },
+                                on: {
+                                    click: _vm.resetCustomEvent
+                                }
+                            }),
+                            customOpts.immediate
+                                ? h(VxeUIButtonComponent, {
+                                    props: {
+                                        mode: 'text',
+                                        content: customOpts.closeButtonText || getI18n('vxe.table.customClose')
+                                    },
+                                    on: {
+                                        click: _vm.cancelCloseEvent
+                                    }
+                                })
+                                : h(VxeUIButtonComponent, {
+                                    props: {
+                                        mode: 'text',
+                                        content: customOpts.resetButtonText || getI18n('vxe.table.customCancel')
+                                    },
+                                    on: {
+                                        click: _vm.cancelCustomEvent
+                                    }
+                                }),
+                            customOpts.immediate
+                                ? _e()
+                                : h(VxeUIButtonComponent, {
+                                    props: {
+                                        mode: 'text',
+                                        status: 'primary',
+                                        content: customOpts.confirmButtonText || getI18n('vxe.table.customConfirm')
+                                    },
+                                    on: {
+                                        click: _vm.confirmCustomEvent
+                                    }
+                                })
+                        ])
+                    ])
                 : null
         ]
         : []);
@@ -272,12 +312,28 @@ const renderPopupPanel = (h, _vm) => {
     const VxeUIInputComponent = VxeUI.getComponent('VxeInput');
     const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
     const $xeTableCustomPanel = _vm;
-    const { _e, $xetable, customStore } = _vm;
-    const { customOpts, customColumnList, columnOpts, isMaxFixedColumn } = $xetable;
+    const $xeTable = _vm.$xeTable;
+    const { _e, customStore } = _vm;
+    const { customOpts, customColumnList, columnOpts, isMaxFixedColumn } = $xeTable;
     const { modalOptions, allowVisible, allowSort, allowFixed, allowResizable, checkMethod, visibleMethod } = customOpts;
     const { maxFixedSize } = columnOpts;
     const modalOpts = Object.assign({}, modalOptions);
+    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 params = {
+        $table: $xeTable,
+        $grid: $xeTable.xegrid,
+        columns: customColumnList,
+        isAllChecked,
+        isAllIndeterminate
+    };
     XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
         const isVisible = visibleMethod ? visibleMethod({ column }) : true;
         if (isVisible) {
@@ -424,8 +480,164 @@ const renderPopupPanel = (h, _vm) => {
             ]));
         }
     });
-    const isAllChecked = customStore.isAll;
-    const isAllIndeterminate = customStore.isIndeterminate;
+    const scopedSlots = {
+        default: () => {
+            if (defaultSlot) {
+                return $xeTable.callSlot(defaultSlot, params, h);
+            }
+            return h('div', {
+                ref: 'bodyElemRef',
+                class: 'vxe-table-custom-popup--body'
+            }, [
+                topSlot
+                    ? h('div', {
+                        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'
+                                })
+                                : _e(),
+                            allowSort
+                                ? h('col', {
+                                    class: 'vxe-table-custom-popup--table-col-sort'
+                                })
+                                : _e(),
+                            h('col', {
+                                class: 'vxe-table-custom-popup--table-col-title'
+                            }),
+                            allowResizable
+                                ? h('col', {
+                                    class: 'vxe-table-custom-popup--table-col-width'
+                                })
+                                : _e(),
+                            allowFixed
+                                ? h('col', {
+                                    class: 'vxe-table-custom-popup--table-col-fixed'
+                                })
+                                : _e()
+                        ]),
+                        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: _vm.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'))
+                                        ])
+                                    ])
+                                    : _e(),
+                                allowSort
+                                    ? h('th', {}, [
+                                        h('span', {
+                                            class: 'vxe-table-custom-popup--table-sort-help-title'
+                                        }, getI18n('vxe.custom.setting.colSort')),
+                                        VxeUITooltipComponent
+                                            ? h(VxeUITooltipComponent, {
+                                                props: {
+                                                    enterable: true,
+                                                    content: getI18n('vxe.custom.setting.sortHelpTip'),
+                                                    popupClassName: 'vxe-table--ignore-clear'
+                                                },
+                                                scopedSlots: {
+                                                    default: () => {
+                                                        return h('i', {
+                                                            class: 'vxe-table-custom-popup--table-sort-help-icon vxe-icon-question-circle-fill'
+                                                        });
+                                                    }
+                                                }
+                                            })
+                                            : renderEmptyElement($xeTableCustomPanel)
+                                    ])
+                                    : _e(),
+                                h('th', {}, getI18n('vxe.custom.setting.colTitle')),
+                                allowResizable
+                                    ? h('th', {}, getI18n('vxe.custom.setting.colResizable'))
+                                    : _e(),
+                                allowFixed
+                                    ? h('th', {}, getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize]))
+                                    : _e()
+                            ])
+                        ]),
+                        h('transition-group', {
+                            class: 'vxe-table-custom--panel-list',
+                            props: {
+                                tag: 'tbody',
+                                name: 'vxe-table-custom--list'
+                            }
+                        }, trVNs)
+                    ])
+                ]),
+                bottomSlot
+                    ? h('div', {
+                        class: 'vxe-table-custom-popup--table-bottom'
+                    }, $xeTable.callSlot(bottomSlot, params, h))
+                    : renderEmptyElement($xeTable),
+                h('div', {
+                    ref: 'dragHintElemRef',
+                    class: 'vxe-table-custom-popup--drag-hint'
+                }, getI18n('vxe.custom.cstmDragTarget', [_vm.dragColumn ? _vm.dragColumn.getTitle() : '']))
+            ]);
+        },
+        footer: () => {
+            if (footerSlot) {
+                return $xeTable.callSlot(footerSlot, params, h);
+            }
+            return h('div', {
+                class: 'vxe-table-custom-popup--footer'
+            }, [
+                h(VxeUIButtonComponent, {
+                    props: {
+                        content: customOpts.resetButtonText || getI18n('vxe.custom.cstmRestore')
+                    },
+                    on: {
+                        click: _vm.resetCustomEvent
+                    }
+                }),
+                h(VxeUIButtonComponent, {
+                    props: {
+                        content: customOpts.resetButtonText || getI18n('vxe.custom.cstmCancel')
+                    },
+                    on: {
+                        click: _vm.cancelCustomEvent
+                    }
+                }),
+                h(VxeUIButtonComponent, {
+                    props: {
+                        status: 'primary',
+                        content: customOpts.confirmButtonText || getI18n('vxe.custom.cstmConfirm')
+                    },
+                    on: {
+                        click: _vm.confirmCustomEvent
+                    }
+                })
+            ]);
+        }
+    };
+    if (headerSlot) {
+        scopedSlots.header = () => $xeTable.callSlot(headerSlot, params, h);
+    }
     return VxeUIModalComponent
         ? h(VxeUIModalComponent, {
             key: 'modal',
@@ -437,10 +649,12 @@ const renderPopupPanel = (h, _vm) => {
                 minWidth: modalOpts.minWidth || 700,
                 height: modalOpts.height || Math.min(680, document.documentElement.clientHeight),
                 minHeight: modalOpts.minHeight || 400,
-                showZoom: !!modalOpts.showZoom,
-                mask: !!modalOpts.mask,
-                lockView: !!modalOpts.lockView,
-                resize: !!modalOpts.resize,
+                showZoom: modalOpts.showZoom,
+                showMaximize: modalOpts.showMaximize,
+                showMinimize: modalOpts.showMinimize,
+                mask: modalOpts.mask,
+                lockView: modalOpts.lockView,
+                resize: modalOpts.resize,
                 escClosable: !!modalOpts.escClosable,
                 destroyOnClose: true,
                 showFooter: true
@@ -450,155 +664,7 @@ const renderPopupPanel = (h, _vm) => {
                     customStore.visible = value;
                 }
             },
-            scopedSlots: {
-                default: () => {
-                    return h('div', {
-                        ref: 'bodyElemRef',
-                        class: 'vxe-table-custom-popup--body'
-                    }, [
-                        h('div', {
-                            class: 'vxe-table-custom-popup--table-wrapper'
-                        }, [
-                            h('table', {}, [
-                                h('colgroup', {}, [
-                                    allowVisible
-                                        ? h('col', {
-                                            style: {
-                                                width: '80px'
-                                            }
-                                        })
-                                        : _e(),
-                                    allowSort
-                                        ? h('col', {
-                                            style: {
-                                                width: '80px'
-                                            }
-                                        })
-                                        : _e(),
-                                    h('col', {
-                                        style: {
-                                            minWidth: '120px'
-                                        }
-                                    }),
-                                    allowResizable
-                                        ? h('col', {
-                                            style: {
-                                                width: '140px'
-                                            }
-                                        })
-                                        : _e(),
-                                    allowFixed
-                                        ? h('col', {
-                                            style: {
-                                                width: '200px'
-                                            }
-                                        })
-                                        : _e()
-                                ]),
-                                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: _vm.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'))
-                                                ])
-                                            ])
-                                            : _e(),
-                                        allowSort
-                                            ? h('th', {}, [
-                                                h('span', {
-                                                    class: 'vxe-table-custom-popup--table-sort-help-title'
-                                                }, getI18n('vxe.custom.setting.colSort')),
-                                                VxeUITooltipComponent
-                                                    ? h(VxeUITooltipComponent, {
-                                                        props: {
-                                                            enterable: true,
-                                                            content: getI18n('vxe.custom.setting.sortHelpTip'),
-                                                            popupClassName: 'vxe-table--ignore-clear'
-                                                        },
-                                                        scopedSlots: {
-                                                            default: () => {
-                                                                return h('i', {
-                                                                    class: 'vxe-table-custom-popup--table-sort-help-icon vxe-icon-question-circle-fill'
-                                                                });
-                                                            }
-                                                        }
-                                                    })
-                                                    : renderEmptyElement($xeTableCustomPanel)
-                                            ])
-                                            : _e(),
-                                        h('th', {}, getI18n('vxe.custom.setting.colTitle')),
-                                        allowResizable
-                                            ? h('th', {}, getI18n('vxe.custom.setting.colResizable'))
-                                            : _e(),
-                                        allowFixed
-                                            ? h('th', {}, getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize]))
-                                            : _e()
-                                    ])
-                                ]),
-                                h('transition-group', {
-                                    class: 'vxe-table-custom--body',
-                                    props: {
-                                        tag: 'tbody',
-                                        name: 'vxe-table-custom--list'
-                                    }
-                                }, trVNs)
-                            ])
-                        ]),
-                        h('div', {
-                            ref: 'dragHintElemRef',
-                            class: 'vxe-table-custom-popup--drag-hint'
-                        }, getI18n('vxe.custom.cstmDragTarget', [_vm.dragColumn ? _vm.dragColumn.getTitle() : '']))
-                    ]);
-                },
-                footer: () => {
-                    return h('div', {
-                        class: 'vxe-table-custom-popup--footer'
-                    }, [
-                        h(VxeUIButtonComponent, {
-                            props: {
-                                content: customOpts.resetButtonText || getI18n('vxe.custom.cstmRestore')
-                            },
-                            on: {
-                                click: _vm.resetCustomEvent
-                            }
-                        }),
-                        h(VxeUIButtonComponent, {
-                            props: {
-                                content: customOpts.resetButtonText || getI18n('vxe.custom.cstmCancel')
-                            },
-                            on: {
-                                click: _vm.cancelCustomEvent
-                            }
-                        }),
-                        h(VxeUIButtonComponent, {
-                            props: {
-                                status: 'primary',
-                                content: customOpts.confirmButtonText || getI18n('vxe.custom.cstmConfirm')
-                            },
-                            on: {
-                                click: _vm.confirmCustomEvent
-                            }
-                        })
-                    ]);
-                }
-            }
+            scopedSlots
         })
         : renderEmptyElement($xeTableCustomPanel);
 };
@@ -611,6 +677,9 @@ export default {
         }
     },
     inject: {
+        $xeTable: {
+            default: null
+        },
         $xetable: {
             default: null
         }
@@ -673,82 +742,33 @@ export default {
             customStore.activeWrapper = false;
             setTimeout(() => {
                 if (!customStore.activeBtn && !customStore.activeWrapper) {
-                    $xetable.customColseEvent(evnt);
+                    $xetable.customCloseEvent(evnt);
                 }
             }, 300);
         },
         getStoreData() {
             return {};
         },
-        confirmCustomEvent(evnt) {
-            const { $xetable } = this;
-            const { customOpts, customColumnList } = $xetable;
-            const { allowVisible, allowSort, allowFixed, allowResizable } = customOpts;
-            XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
-                if (parent) {
-                    // 更新子列信息
-                    column.fixed = parent.fixed;
-                }
-                else {
-                    if (allowSort) {
-                        const sortIndex = index + 1;
-                        column.renderSortNumber = sortIndex;
-                    }
-                    if (allowFixed) {
-                        column.fixed = column.renderFixed;
-                    }
-                }
-                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;
-                }
-            });
-            $xetable.closeCustom();
-            $xetable.emitCustomEvent('confirm', evnt);
-            $xetable.saveCustomStore('confirm');
+        confirmCustomEvent({ $event }) {
+            const $xeTable = this.$xeTable;
+            $xeTable.saveCustom();
+            $xeTable.closeCustom();
+            $xeTable.emitCustomEvent('confirm', $event);
         },
         cancelCloseEvent({ $event }) {
-            const { $xetable } = this;
-            $xetable.closeCustom();
-            $xetable.emitCustomEvent('cancel', $event);
+            const $xeTable = this.$xeTable;
+            $xeTable.closeCustom();
+            $xeTable.emitCustomEvent('close', $event);
         },
-        cancelCustomEvent(evnt) {
-            const { $xetable } = this;
-            const { customStore, customOpts, customColumnList } = $xetable;
-            const { oldSortMaps, oldFixedMaps, oldVisibleMaps } = customStore;
-            const { allowVisible, allowSort, allowFixed, allowResizable } = customOpts;
-            XEUtils.eachTree(customColumnList, column => {
-                const colid = column.getKey();
-                const visible = !!oldVisibleMaps[colid];
-                const fixed = oldFixedMaps[colid] || '';
-                if (allowVisible) {
-                    column.renderVisible = visible;
-                    column.visible = visible;
-                }
-                if (allowFixed) {
-                    column.renderFixed = fixed;
-                    column.fixed = fixed;
-                }
-                if (allowSort) {
-                    column.renderSortNumber = oldSortMaps[colid] || 0;
-                }
-                if (allowResizable) {
-                    column.renderResizeWidth = column.renderWidth;
-                }
-            }, { children: 'children' });
-            $xetable.closeCustom();
-            $xetable.emitCustomEvent('cancel', evnt);
+        cancelCustomEvent({ $event }) {
+            const $xeTable = this.$xeTable;
+            $xeTable.cancelCustom();
+            $xeTable.closeCustom();
+            $xeTable.emitCustomEvent('cancel', $event);
         },
         handleResetCustomEvent(evnt) {
             const { $xetable } = this;
-            $xetable.resetColumn(true);
+            $xetable.resetCustom(true);
             $xetable.closeCustom();
             $xetable.emitCustomEvent('reset', evnt);
         },
@@ -856,40 +876,8 @@ export default {
             }
         },
         allOptionEvent() {
-            const { $xetable, customStore } = this;
-            const { customColumnList, customOpts } = $xetable;
-            const { checkMethod, visibleMethod } = customOpts;
-            const isAll = !customStore.isAll;
-            if (customOpts.immediate) {
-                XEUtils.eachTree(customColumnList, (column) => {
-                    if (visibleMethod && !visibleMethod({ column })) {
-                        return;
-                    }
-                    if (checkMethod && !checkMethod({ column })) {
-                        return;
-                    }
-                    column.visible = isAll;
-                    column.renderVisible = isAll;
-                    column.halfVisible = false;
-                });
-                customStore.isAll = isAll;
-                $xetable.handleCustom();
-                $xetable.saveCustomStore('update:visible');
-            }
-            else {
-                XEUtils.eachTree(customColumnList, (column) => {
-                    if (visibleMethod && !visibleMethod({ column })) {
-                        return;
-                    }
-                    if (checkMethod && !checkMethod({ column })) {
-                        return;
-                    }
-                    column.renderVisible = isAll;
-                    column.halfVisible = false;
-                });
-                customStore.isAll = isAll;
-            }
-            $xetable.checkCustomStatus();
+            const { $xetable } = this;
+            $xetable.toggleCustomAllCheckbox();
         },
         sortMousedownEvent(evnt) {
             const { $xetable } = this;
@@ -901,6 +889,7 @@ export default {
             trEl.draggable = true;
             this.dragColumn = column;
             addClass(trEl, 'active--drag-origin');
+            updateDropHint(this, evnt);
         },
         sortMouseupEvent(evnt) {
             const btnEl = evnt.currentTarget;