vxe-table 3.19.39 → 3.20.0-beta.1

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

@@ -1,3 +1,4 @@
+import { defineVxeComponent } from '../../../ui/src/comp';
 import { VxeUI } from '../../../ui';
 import { formatText } from '../../../ui/src/utils';
 import { getTpImg, addClass, removeClass, hasControlKey } from '../../../ui/src/dom';
@@ -58,794 +59,6 @@ function hideDropTip($xeTableCustomPanel) {
         dragLineEl.style.display = '';
     }
 }
-const renderDragTip = (h, $xeTableCustomPanel) => {
-    const $xeTable = $xeTableCustomPanel.$xeTable;
-    const customPanelReactData = $xeTableCustomPanel.reactData;
-    const { dragTipText } = customPanelReactData;
-    const columnDragOpts = $xeTable.computeColumnDragOpts;
-    return h('div', {}, [
-        h('div', {
-            ref: 'refDragLineElem',
-            class: ['vxe-table-custom-popup--drag-line', {
-                    'is--guides': columnDragOpts.showGuidesStatus
-                }]
-        }),
-        h('div', {
-            ref: 'refDragTipElem',
-            class: 'vxe-table-custom-popup--drag-tip'
-        }, [
-            h('div', {
-                class: 'vxe-table-custom-popup--drag-tip-wrapper'
-            }, [
-                h('div', {
-                    class: 'vxe-table-custom-popup--drag-tip-status'
-                }, [
-                    h('span', {
-                        class: ['vxe-table-custom-popup--drag-tip-normal-status', getIcon().TABLE_DRAG_STATUS_ROW]
-                    }),
-                    h('span', {
-                        class: ['vxe-table-custom-popup--drag-tip-sub-status', getIcon().TABLE_DRAG_STATUS_SUB_ROW]
-                    }),
-                    h('span', {
-                        class: ['vxe-table-custom-popup--drag-tip-group-status', getIcon().TABLE_DRAG_STATUS_AGG_GROUP]
-                    }),
-                    h('span', {
-                        class: ['vxe-table-custom-popup--drag-tip-values-status', getIcon().TABLE_DRAG_STATUS_AGG_VALUES]
-                    }),
-                    h('span', {
-                        class: ['vxe-table-custom-popup--drag-tip-disabled-status', getIcon().TABLE_DRAG_DISABLED]
-                    })
-                ]),
-                h('div', {
-                    class: 'vxe-table-custom-popup--drag-tip-content'
-                }, `${dragTipText || ''}`)
-            ])
-        ])
-    ]);
-};
-const renderSimplePanel = (h, _vm) => {
-    const VxeUIButtonComponent = VxeUI.getComponent('VxeButton');
-    const props = _vm;
-    const $xeTable = _vm.$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 customOpts = $xeTable.computeCustomOpts;
-    const { immediate } = customOpts;
-    const columnDragOpts = $xeTable.computeColumnDragOpts;
-    const { maxHeight } = customStore;
-    const { checkMethod, visibleMethod, allowVisible, allowSort, allowFixed, trigger, placement } = customOpts;
-    const isMaxFixedColumn = $xeTable.computeIsMaxFixedColumn;
-    const { isCrossDrag } = 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 colVNs = [];
-    const customWrapperOns = {};
-    const isAllChecked = customStore.isAll;
-    const isAllIndeterminate = customStore.isIndeterminate;
-    // hover 触发
-    if (trigger === 'hover') {
-        customWrapperOns.mouseenter = _vm.handleWrapperMouseenterEvent;
-        customWrapperOns.mouseleave = _vm.handleWrapperMouseleaveEvent;
-    }
-    const params = {
-        $table: $xeTable,
-        $grid: $xeGrid,
-        $gantt: $xeGantt,
-        columns: customColumnList,
-        isAllChecked,
-        isAllIndeterminate,
-        isCustomStatus
-    };
-    XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
-        const isVisible = visibleMethod ? visibleMethod({ $table: $xeTable, column }) : true;
-        if (isVisible) {
-            const isChecked = column.renderVisible;
-            const isIndeterminate = column.halfVisible;
-            const isColGroup = column.children && column.children.length;
-            const colTitle = formatText(column.getTitle(), 1);
-            const isDisabled = checkMethod ? !checkMethod({ $table: $xeTable, column }) : false;
-            const isHidden = !isChecked;
-            colVNs.push(h('li', {
-                key: column.id,
-                attrs: {
-                    colid: column.id
-                },
-                class: ['vxe-table-custom--option', `level--${column.level}`, {
-                        'is--hidden': isDisabled || isHidden,
-                        'is--group': isColGroup
-                    }],
-                on: {
-                    dragstart: _vm.sortDragstartEvent,
-                    dragend: _vm.sortDragendEvent,
-                    dragover: _vm.sortDragoverEvent
-                }
-            }, [
-                allowVisible
-                    ? 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) {
-                                    _vm.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('div', {
-                    class: 'vxe-table-custom--name-option'
-                }, [
-                    allowSort && ((isCrossDrag ? immediate : false) || column.level === 1)
-                        ? h('div', {
-                            class: 'vxe-table-custom--sort-option'
-                        }, [
-                            h('span', {
-                                class: ['vxe-table-custom--sort-btn', {
-                                        'is--disabled': isHidden
-                                    }],
-                                attrs: {
-                                    title: getI18n('vxe.custom.setting.sortHelpTip')
-                                },
-                                on: isHidden
-                                    ? {}
-                                    : {
-                                        mousedown: _vm.sortMousedownEvent,
-                                        mouseup: _vm.sortMouseupEvent
-                                    }
-                            }, [
-                                h('i', {
-                                    class: getIcon().TABLE_CUSTOM_SORT
-                                })
-                            ])
-                        ])
-                        : renderEmptyElement($xeTable),
-                    column.type === 'html'
-                        ? h('div', {
-                            key: '1',
-                            class: 'vxe-table-custom--checkbox-label',
-                            domProps: {
-                                innerHTML: colTitle
-                            }
-                        })
-                        : h('div', {
-                            key: '0',
-                            class: 'vxe-table-custom--checkbox-label',
-                            attrs: {
-                                title: colTitle
-                            }
-                        }, colTitle)
-                ]),
-                !parent && allowFixed
-                    ? h('div', {
-                        class: 'vxe-table-custom--fixed-option'
-                    }, [
-                        h(VxeUIButtonComponent, {
-                            props: {
-                                mode: 'text',
-                                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 }) => {
-                                    _vm.changeFixedOption(column, 'left', $event);
-                                }
-                            }
-                        }),
-                        h(VxeUIButtonComponent, {
-                            props: {
-                                mode: 'text',
-                                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 }) => {
-                                    _vm.changeFixedOption(column, 'right', $event);
-                                }
-                            }
-                        })
-                    ])
-                    : renderEmptyElement($xeTable)
-            ]));
-        }
-    });
-    return h('div', {
-        ref: 'refElem',
-        key: 'simple',
-        class: ['vxe-table-custom-wrapper', `placement--${placement}`, {
-                'is--active': customStore.visible
-            }],
-        style: maxHeight && !['left', 'right'].includes(placement || '')
-            ? {
-                maxHeight: `${maxHeight}px`
-            }
-            : {}
-    }, customStore.visible
-        ? [
-            h('div', {
-                ref: 'refBodyWrapperElem',
-                class: 'vxe-table-custom-simple--body-wrapper'
-            }, [
-                !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregateSimplePanel
-                    ? h($xeTable.getPivotTableAggregateSimplePanel(), {
-                        props: {
-                            customStore
-                        }
-                    })
-                    : renderEmptyElement($xeTable),
-                h('div', {
-                    ref: 'refCustomBodyElem',
-                    class: 'vxe-table-custom--handle-wrapper'
-                }, [
-                    h('div', {
-                        class: 'vxe-table-custom--header'
-                    }, headerSlot
-                        ? $xeTable.callSlot(headerSlot, params, h)
-                        : [
-                            h('ul', {
-                                class: 'vxe-table-custom--panel-list'
-                            }, [
-                                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
-                                            }
-                                        }, [
-                                            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('div', {
-                        class: 'vxe-table-custom--body'
-                    }, [
-                        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)
-                    ]),
-                    customOpts.showFooter
-                        ? h('div', {
-                            class: 'vxe-table-custom--footer'
-                        }, 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'),
-                                            disabled: !isCustomStatus
-                                        },
-                                        on: {
-                                            click: _vm.resetCustomEvent
-                                        }
-                                    }),
-                                    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
-                                            }
-                                        }),
-                                    immediate
-                                        ? renderEmptyElement($xeTable)
-                                        : h(VxeUIButtonComponent, {
-                                            props: {
-                                                mode: 'text',
-                                                status: 'primary',
-                                                content: customOpts.confirmButtonText || getI18n('vxe.table.customConfirm')
-                                            },
-                                            on: {
-                                                click: _vm.confirmCustomEvent
-                                            }
-                                        })
-                                ])
-                            ])
-                        : null
-                ]),
-                renderDragTip(h, _vm)
-            ])
-        ]
-        : []);
-};
-const renderPopupPanel = (h, $xeTableCustomPanel) => {
-    const VxeUIModalComponent = VxeUI.getComponent('VxeModal');
-    const VxeUIDrawerComponent = VxeUI.getComponent('VxeDrawer');
-    const VxeUIButtonComponent = VxeUI.getComponent('VxeButton');
-    const VxeUINumberInputComponent = VxeUI.getComponent('VxeNumberInput');
-    const _vm = $xeTableCustomPanel;
-    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 { immediate } = customOpts;
-    const columnDragOpts = $xeTable.computeColumnDragOpts;
-    const { mode, modalOptions, drawerOptions, allowVisible, allowSort, allowFixed, allowResizable, checkMethod, 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 } = 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 params = {
-        $table: $xeTable,
-        $grid: $xeGrid,
-        $gantt: $xeGantt,
-        columns: customColumnList,
-        isAllChecked,
-        isAllIndeterminate,
-        isCustomStatus
-    };
-    XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
-        const isVisible = visibleMethod ? visibleMethod({ $table: $xeTable, column }) : true;
-        if (isVisible) {
-            // 默认继承调整宽度
-            let customMinWidth = 0;
-            let customMaxWidth = 0;
-            if (allowResizable) {
-                const resizeParams = {
-                    $table: $xeTable,
-                    column,
-                    columnIndex: index,
-                    $columnIndex: index,
-                    $rowIndex: -1
-                };
-                if (reMinWidth) {
-                    customMinWidth = XEUtils.toNumber(XEUtils.isFunction(reMinWidth) ? reMinWidth(resizeParams) : reMinWidth);
-                }
-                if (reMaxWidth) {
-                    customMaxWidth = XEUtils.toNumber(XEUtils.isFunction(reMaxWidth) ? reMaxWidth(resizeParams) : reMaxWidth);
-                }
-            }
-            const isChecked = column.renderVisible;
-            const isIndeterminate = column.halfVisible;
-            const colTitle = formatText(column.getTitle(), 1);
-            const isColGroup = column.children && column.children.length;
-            const isDisabled = checkMethod ? !checkMethod({ $table: $xeTable, column }) : false;
-            const isHidden = !isChecked;
-            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: _vm.sortDragstartEvent,
-                    dragend: _vm.sortDragendEvent,
-                    dragover: _vm.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) {
-                                        _vm.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('div', {
-                        class: 'vxe-table-custom-popup--name'
-                    }, [
-                        allowSort
-                            ? ((isCrossDrag ? immediate : false) || column.level === 1
-                                ? h('div', {
-                                    class: ['vxe-table-custom-popup--column-sort-btn', {
-                                            'is--disabled': isHidden
-                                        }],
-                                    attrs: {
-                                        title: getI18n('vxe.custom.setting.sortHelpTip')
-                                    },
-                                    on: (isHidden
-                                        ? {}
-                                        : {
-                                            mousedown: _vm.sortMousedownEvent,
-                                            mouseup: _vm.sortMouseupEvent
-                                        })
-                                }, [
-                                    h('i', {
-                                        class: getIcon().TABLE_CUSTOM_SORT
-                                    })
-                                ])
-                                : h('div', {
-                                    class: 'vxe-table-custom-popup--column-sort-placeholder'
-                                }))
-                            : renderEmptyElement($xeTable),
-                        column.type === 'html'
-                            ? h('div', {
-                                key: '1',
-                                class: 'vxe-table-custom-popup--title',
-                                domProps: {
-                                    innerHTML: colTitle
-                                }
-                            })
-                            : h('div', {
-                                key: '0',
-                                class: 'vxe-table-custom-popup--title',
-                                attrs: {
-                                    title: colTitle
-                                }
-                            }, colTitle)
-                    ])
-                ]),
-                allowResizable
-                    ? h('td', {
-                        class: 'vxe-table-custom-popup--column-item col--resizable'
-                    }, [
-                        ((column.children && column.children.length) ||
-                            !(XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable)))
-                            ? h('span', '-')
-                            : (VxeUINumberInputComponent
-                                ? h(VxeUINumberInputComponent, {
-                                    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));
-                                        },
-                                        change() {
-                                            _vm.changeColumnWidth(column);
-                                        }
-                                    }
-                                })
-                                : renderEmptyElement($xeTableCustomPanel))
-                    ])
-                    : renderEmptyElement($xeTable),
-                allowFixed
-                    ? h('td', {
-                        class: 'vxe-table-custom-popup--column-item col--fixed'
-                    }, [
-                        parent
-                            ? 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 }
-                                    ]
-                                },
-                                on: {
-                                    change({ label, $event }) {
-                                        _vm.changeFixedOption(column, label, $event);
-                                    }
-                                }
-                            })
-                    ])
-                    : renderEmptyElement($xeTable)
-            ]));
-        }
-    });
-    const scopedSlots = {
-        default: () => {
-            return h('div', {
-                ref: 'refBodyWrapperElem',
-                class: 'vxe-table-custom-popup--body-wrapper'
-            }, defaultSlot
-                ? $xeTable.callSlot(defaultSlot, params, h)
-                : [
-                    h('div', {
-                        ref: 'refCustomBodyElem',
-                        class: 'vxe-table-custom-popup--handle-wrapper'
-                    }, [
-                        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'
-                                        })
-                                        : 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: _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'))
-                                                ])
-                                            ])
-                                            : 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', {
-                                    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),
-                        renderDragTip(h, _vm)
-                    ]),
-                    !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregatePopupPanel
-                        ? h($xeTable.getPivotTableAggregatePopupPanel(), {
-                            props: {
-                                customStore
-                            }
-                        })
-                        : renderEmptyElement($xeTable)
-                ]);
-        },
-        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'),
-                        disabled: !isCustomStatus
-                    },
-                    on: {
-                        click: _vm.resetCustomEvent
-                    }
-                }),
-                immediate
-                    ? h(VxeUIButtonComponent, {
-                        props: {
-                            content: customOpts.resetButtonText || getI18n('vxe.table.customClose')
-                        },
-                        on: {
-                            click: _vm.cancelCloseEvent
-                        }
-                    })
-                    : h(VxeUIButtonComponent, {
-                        props: {
-                            content: customOpts.resetButtonText || getI18n('vxe.custom.cstmCancel')
-                        },
-                        on: {
-                            click: _vm.cancelCustomEvent
-                        }
-                    }),
-                immediate
-                    ? renderEmptyElement($xeTable)
-                    : 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);
-    }
-    if (mode === 'drawer') {
-        return VxeUIDrawerComponent
-            ? h(VxeUIDrawerComponent, {
-                key: 'drawer',
-                props: {
-                    className: ['vxe-table-custom-drawer-wrapper', 'vxe-table--ignore-clear', drawerOpts.className || ''].join(' '),
-                    value: customStore.visible,
-                    title: drawerOpts.title || getI18n('vxe.custom.cstmTitle'),
-                    width: drawerOpts.width || Math.min(880, Math.floor(document.documentElement.clientWidth * 0.6)),
-                    position: drawerOpts.position,
-                    resize: !!drawerOpts.resize,
-                    escClosable: !!drawerOpts.escClosable,
-                    maskClosable: !!drawerOpts.maskClosable,
-                    destroyOnClose: true,
-                    showFooter: true
-                },
-                on: {
-                    input(value) {
-                        customStore.visible = value;
-                    }
-                },
-                scopedSlots
-            })
-            : renderEmptyElement($xeTableCustomPanel);
-    }
-    return VxeUIModalComponent
-        ? h(VxeUIModalComponent, {
-            key: 'modal',
-            props: {
-                className: ['vxe-table-custom-popup-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,
-                height: modalOpts.height || Math.min(680, document.documentElement.clientHeight),
-                minHeight: modalOpts.minHeight || 400,
-                showZoom: modalOpts.showZoom,
-                showMaximize: modalOpts.showMaximize,
-                showMinimize: modalOpts.showMinimize,
-                mask: modalOpts.mask,
-                lockView: modalOpts.lockView,
-                resize: modalOpts.resize,
-                escClosable: !!modalOpts.escClosable,
-                maskClosable: !!modalOpts.maskClosable,
-                destroyOnClose: true,
-                showFooter: true
-            },
-            on: {
-                input(value) {
-                    customStore.visible = value;
-                }
-            },
-            scopedSlots
-        })
-        : renderEmptyElement($xeTableCustomPanel);
-};
 export default {
     name: 'VxeTableCustomPanel',
     props: {
@@ -884,7 +97,7 @@ export default {
             internalData
         };
     },
-    computed: {},
+    computed: Object.assign({}, {}),
     created() {
         const $xeTableCustomPanel = this;
         const VxeUIModalComponent = VxeUI.getComponent('VxeModal');
@@ -913,20 +126,12 @@ export default {
             }
         });
     },
-    render(h) {
-        const $xeTableCustomPanel = this;
-        const $xeTable = $xeTableCustomPanel.$xeTable;
-        const customOpts = $xeTable.computeCustomOpts;
-        if (['modal', 'drawer', 'popup'].includes(`${customOpts.mode}`)) {
-            return renderPopupPanel(h, $xeTableCustomPanel);
-        }
-        return renderSimplePanel(h, $xeTableCustomPanel);
-    },
     methods: {
         handleWrapperMouseenterEvent(evnt) {
             const $xeTableCustomPanel = this;
+            const props = $xeTableCustomPanel;
             const $xeTable = $xeTableCustomPanel.$xeTable;
-            const { customStore } = this;
+            const { customStore } = props;
             customStore.activeWrapper = true;
             $xeTable.customOpenEvent(evnt);
         },
@@ -1387,6 +592,808 @@ export default {
                 customPanelInternalData.prevDragPos = dragPos;
                 showDropTip($xeTableCustomPanel, evnt, optEl, true, dragPos);
             }
+        },
+        renderDragTip(h) {
+            const $xeTableCustomPanel = this;
+            const $xeTable = $xeTableCustomPanel.$xeTable;
+            const customPanelReactData = $xeTableCustomPanel.reactData;
+            const { dragTipText } = customPanelReactData;
+            const columnDragOpts = $xeTable.computeColumnDragOpts;
+            return h('div', {}, [
+                h('div', {
+                    ref: 'refDragLineElem',
+                    class: ['vxe-table-custom-popup--drag-line', {
+                            'is--guides': columnDragOpts.showGuidesStatus
+                        }]
+                }),
+                h('div', {
+                    ref: 'refDragTipElem',
+                    class: 'vxe-table-custom-popup--drag-tip'
+                }, [
+                    h('div', {
+                        class: 'vxe-table-custom-popup--drag-tip-wrapper'
+                    }, [
+                        h('div', {
+                            class: 'vxe-table-custom-popup--drag-tip-status'
+                        }, [
+                            h('span', {
+                                class: ['vxe-table-custom-popup--drag-tip-normal-status', getIcon().TABLE_DRAG_STATUS_ROW]
+                            }),
+                            h('span', {
+                                class: ['vxe-table-custom-popup--drag-tip-sub-status', getIcon().TABLE_DRAG_STATUS_SUB_ROW]
+                            }),
+                            h('span', {
+                                class: ['vxe-table-custom-popup--drag-tip-group-status', getIcon().TABLE_DRAG_STATUS_AGG_GROUP]
+                            }),
+                            h('span', {
+                                class: ['vxe-table-custom-popup--drag-tip-values-status', getIcon().TABLE_DRAG_STATUS_AGG_VALUES]
+                            }),
+                            h('span', {
+                                class: ['vxe-table-custom-popup--drag-tip-disabled-status', getIcon().TABLE_DRAG_DISABLED]
+                            })
+                        ]),
+                        h('div', {
+                            class: 'vxe-table-custom-popup--drag-tip-content'
+                        }, `${dragTipText || ''}`)
+                    ])
+                ])
+            ]);
+        },
+        renderSimplePanel(h) {
+            const VxeUIButtonComponent = 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 customOpts = $xeTable.computeCustomOpts;
+            const { immediate } = customOpts;
+            const columnDragOpts = $xeTable.computeColumnDragOpts;
+            const { maxHeight } = customStore;
+            const { checkMethod, visibleMethod, allowVisible, allowSort, allowFixed, trigger, placement } = customOpts;
+            const isMaxFixedColumn = $xeTable.computeIsMaxFixedColumn;
+            const { isCrossDrag } = 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 colVNs = [];
+            const customWrapperOns = {};
+            const isAllChecked = customStore.isAll;
+            const isAllIndeterminate = customStore.isIndeterminate;
+            // hover 触发
+            if (trigger === 'hover') {
+                customWrapperOns.mouseenter = $xeTableCustomPanel.handleWrapperMouseenterEvent;
+                customWrapperOns.mouseleave = $xeTableCustomPanel.handleWrapperMouseleaveEvent;
+            }
+            const params = {
+                $table: $xeTable,
+                $grid: $xeGrid,
+                $gantt: $xeGantt,
+                columns: customColumnList,
+                isAllChecked,
+                isAllIndeterminate,
+                isCustomStatus
+            };
+            XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
+                const isVisible = visibleMethod ? visibleMethod({ $table: $xeTable, column }) : true;
+                if (isVisible) {
+                    const isChecked = column.renderVisible;
+                    const isIndeterminate = column.halfVisible;
+                    const isColGroup = column.children && column.children.length;
+                    const colTitle = formatText(column.getTitle(), 1);
+                    const isDisabled = checkMethod ? !checkMethod({ $table: $xeTable, column }) : false;
+                    const isHidden = !isChecked;
+                    colVNs.push(h('li', {
+                        key: column.id,
+                        attrs: {
+                            colid: column.id
+                        },
+                        class: ['vxe-table-custom--option', `level--${column.level}`, {
+                                'is--hidden': isDisabled || isHidden,
+                                'is--group': isColGroup
+                            }],
+                        on: {
+                            dragstart: $xeTableCustomPanel.sortDragstartEvent,
+                            dragend: $xeTableCustomPanel.sortDragendEvent,
+                            dragover: $xeTableCustomPanel.sortDragoverEvent
+                        }
+                    }, [
+                        allowVisible
+                            ? 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('div', {
+                            class: 'vxe-table-custom--name-option'
+                        }, [
+                            allowSort && ((isCrossDrag ? immediate : false) || column.level === 1)
+                                ? h('div', {
+                                    class: 'vxe-table-custom--sort-option'
+                                }, [
+                                    h('span', {
+                                        class: ['vxe-table-custom--sort-btn', {
+                                                'is--disabled': isHidden
+                                            }],
+                                        attrs: {
+                                            title: getI18n('vxe.custom.setting.sortHelpTip')
+                                        },
+                                        on: isHidden
+                                            ? {}
+                                            : {
+                                                mousedown: $xeTableCustomPanel.sortMousedownEvent,
+                                                mouseup: $xeTableCustomPanel.sortMouseupEvent
+                                            }
+                                    }, [
+                                        h('i', {
+                                            class: getIcon().TABLE_CUSTOM_SORT
+                                        })
+                                    ])
+                                ])
+                                : renderEmptyElement($xeTable),
+                            column.type === 'html'
+                                ? h('div', {
+                                    key: '1',
+                                    class: 'vxe-table-custom--checkbox-label',
+                                    domProps: {
+                                        innerHTML: colTitle
+                                    }
+                                })
+                                : h('div', {
+                                    key: '0',
+                                    class: 'vxe-table-custom--checkbox-label',
+                                    attrs: {
+                                        title: colTitle
+                                    }
+                                }, colTitle)
+                        ]),
+                        !parent && allowFixed
+                            ? h('div', {
+                                class: 'vxe-table-custom--fixed-option'
+                            }, [
+                                h(VxeUIButtonComponent, {
+                                    props: {
+                                        mode: 'text',
+                                        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: {
+                                        mode: 'text',
+                                        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);
+                                        }
+                                    }
+                                })
+                            ])
+                            : renderEmptyElement($xeTable)
+                    ]));
+                }
+            });
+            return h('div', {
+                ref: 'refElem',
+                key: 'simple',
+                class: ['vxe-table-custom-wrapper', `placement--${placement}`, {
+                        'is--active': customStore.visible
+                    }],
+                style: maxHeight && !['left', 'right'].includes(placement || '')
+                    ? {
+                        maxHeight: `${maxHeight}px`
+                    }
+                    : {}
+            }, customStore.visible
+                ? [
+                    h('div', {
+                        ref: 'refBodyWrapperElem',
+                        class: 'vxe-table-custom-simple--body-wrapper'
+                    }, [
+                        !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregateSimplePanel
+                            ? h($xeTable.getPivotTableAggregateSimplePanel(), {
+                                props: {
+                                    customStore
+                                }
+                            })
+                            : renderEmptyElement($xeTable),
+                        h('div', {
+                            ref: 'refCustomBodyElem',
+                            class: 'vxe-table-custom--handle-wrapper'
+                        }, [
+                            h('div', {
+                                class: 'vxe-table-custom--header'
+                            }, headerSlot
+                                ? $xeTable.callSlot(headerSlot, params, h)
+                                : [
+                                    h('ul', {
+                                        class: 'vxe-table-custom--panel-list'
+                                    }, [
+                                        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: $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'))
+                                                ])
+                                                : h('span', {
+                                                    class: 'vxe-checkbox--label'
+                                                }, getI18n('vxe.table.customTitle'))
+                                        ])
+                                    ])
+                                ]),
+                            h('div', {
+                                class: 'vxe-table-custom--body'
+                            }, [
+                                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)
+                            ]),
+                            customOpts.showFooter
+                                ? h('div', {
+                                    class: 'vxe-table-custom--footer'
+                                }, 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'),
+                                                    disabled: !isCustomStatus
+                                                },
+                                                on: {
+                                                    click: $xeTableCustomPanel.resetCustomEvent
+                                                }
+                                            }),
+                                            immediate
+                                                ? h(VxeUIButtonComponent, {
+                                                    props: {
+                                                        mode: 'text',
+                                                        content: customOpts.closeButtonText || getI18n('vxe.table.customClose')
+                                                    },
+                                                    on: {
+                                                        click: $xeTableCustomPanel.cancelCloseEvent
+                                                    }
+                                                })
+                                                : h(VxeUIButtonComponent, {
+                                                    props: {
+                                                        mode: 'text',
+                                                        content: customOpts.resetButtonText || getI18n('vxe.table.customCancel')
+                                                    },
+                                                    on: {
+                                                        click: $xeTableCustomPanel.cancelCustomEvent
+                                                    }
+                                                }),
+                                            immediate
+                                                ? renderEmptyElement($xeTable)
+                                                : h(VxeUIButtonComponent, {
+                                                    props: {
+                                                        mode: 'text',
+                                                        status: 'primary',
+                                                        content: customOpts.confirmButtonText || getI18n('vxe.table.customConfirm')
+                                                    },
+                                                    on: {
+                                                        click: $xeTableCustomPanel.confirmCustomEvent
+                                                    }
+                                                })
+                                        ])
+                                    ])
+                                : null
+                        ]),
+                        $xeTableCustomPanel.renderDragTip(h)
+                    ])
+                ]
+                : []);
+        },
+        renderPopupPanel(h) {
+            const VxeUIModalComponent = VxeUI.getComponent('VxeModal');
+            const VxeUIDrawerComponent = VxeUI.getComponent('VxeDrawer');
+            const VxeUIButtonComponent = VxeUI.getComponent('VxeButton');
+            const VxeUINumberInputComponent = VxeUI.getComponent('VxeNumberInput');
+            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 { immediate } = customOpts;
+            const columnDragOpts = $xeTable.computeColumnDragOpts;
+            const { mode, modalOptions, drawerOptions, allowVisible, allowSort, allowFixed, allowResizable, checkMethod, 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 } = 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 params = {
+                $table: $xeTable,
+                $grid: $xeGrid,
+                $gantt: $xeGantt,
+                columns: customColumnList,
+                isAllChecked,
+                isAllIndeterminate,
+                isCustomStatus
+            };
+            XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
+                const isVisible = visibleMethod ? visibleMethod({ $table: $xeTable, column }) : true;
+                if (isVisible) {
+                    // 默认继承调整宽度
+                    let customMinWidth = 0;
+                    let customMaxWidth = 0;
+                    if (allowResizable) {
+                        const resizeParams = {
+                            $table: $xeTable,
+                            column,
+                            columnIndex: index,
+                            $columnIndex: index,
+                            $rowIndex: -1
+                        };
+                        if (reMinWidth) {
+                            customMinWidth = XEUtils.toNumber(XEUtils.isFunction(reMinWidth) ? reMinWidth(resizeParams) : reMinWidth);
+                        }
+                        if (reMaxWidth) {
+                            customMaxWidth = XEUtils.toNumber(XEUtils.isFunction(reMaxWidth) ? reMaxWidth(resizeParams) : reMaxWidth);
+                        }
+                    }
+                    const isChecked = column.renderVisible;
+                    const isIndeterminate = column.halfVisible;
+                    const colTitle = formatText(column.getTitle(), 1);
+                    const isColGroup = column.children && column.children.length;
+                    const isDisabled = checkMethod ? !checkMethod({ $table: $xeTable, column }) : false;
+                    const isHidden = !isChecked;
+                    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);
+                                            }
+                                        }
+                                    }
+                                }, [
+                                    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('div', {
+                                class: 'vxe-table-custom-popup--name'
+                            }, [
+                                allowSort
+                                    ? ((isCrossDrag ? immediate : false) || column.level === 1
+                                        ? h('div', {
+                                            class: ['vxe-table-custom-popup--column-sort-btn', {
+                                                    'is--disabled': isHidden
+                                                }],
+                                            attrs: {
+                                                title: getI18n('vxe.custom.setting.sortHelpTip')
+                                            },
+                                            on: (isHidden
+                                                ? {}
+                                                : {
+                                                    mousedown: $xeTableCustomPanel.sortMousedownEvent,
+                                                    mouseup: $xeTableCustomPanel.sortMouseupEvent
+                                                })
+                                        }, [
+                                            h('i', {
+                                                class: getIcon().TABLE_CUSTOM_SORT
+                                            })
+                                        ])
+                                        : h('div', {
+                                            class: 'vxe-table-custom-popup--column-sort-placeholder'
+                                        }))
+                                    : renderEmptyElement($xeTable),
+                                column.type === 'html'
+                                    ? h('div', {
+                                        key: '1',
+                                        class: 'vxe-table-custom-popup--title',
+                                        domProps: {
+                                            innerHTML: colTitle
+                                        }
+                                    })
+                                    : h('div', {
+                                        key: '0',
+                                        class: 'vxe-table-custom-popup--title',
+                                        attrs: {
+                                            title: colTitle
+                                        }
+                                    }, colTitle)
+                            ])
+                        ]),
+                        allowResizable
+                            ? h('td', {
+                                class: 'vxe-table-custom-popup--column-item col--resizable'
+                            }, [
+                                ((column.children && column.children.length) ||
+                                    !(XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable)))
+                                    ? h('span', '-')
+                                    : (VxeUINumberInputComponent
+                                        ? h(VxeUINumberInputComponent, {
+                                            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));
+                                                },
+                                                change() {
+                                                    $xeTableCustomPanel.changeColumnWidth(column);
+                                                }
+                                            }
+                                        })
+                                        : renderEmptyElement($xeTableCustomPanel))
+                            ])
+                            : renderEmptyElement($xeTable),
+                        allowFixed
+                            ? h('td', {
+                                class: 'vxe-table-custom-popup--column-item col--fixed'
+                            }, [
+                                parent
+                                    ? 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 }
+                                            ]
+                                        },
+                                        on: {
+                                            change({ label, $event }) {
+                                                $xeTableCustomPanel.changeFixedOption(column, label, $event);
+                                            }
+                                        }
+                                    })
+                            ])
+                            : renderEmptyElement($xeTable)
+                    ]));
+                }
+            });
+            const scopedSlots = {
+                default: () => {
+                    return h('div', {
+                        ref: 'refBodyWrapperElem',
+                        class: 'vxe-table-custom-popup--body-wrapper'
+                    }, defaultSlot
+                        ? $xeTable.callSlot(defaultSlot, params, h)
+                        : [
+                            h('div', {
+                                ref: 'refCustomBodyElem',
+                                class: 'vxe-table-custom-popup--handle-wrapper'
+                            }, [
+                                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'
+                                                })
+                                                : 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', {
+                                            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),
+                                $xeTableCustomPanel.renderDragTip(h)
+                            ]),
+                            !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregatePopupPanel
+                                ? h($xeTable.getPivotTableAggregatePopupPanel(), {
+                                    props: {
+                                        customStore
+                                    }
+                                })
+                                : renderEmptyElement($xeTable)
+                        ]);
+                },
+                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'),
+                                disabled: !isCustomStatus
+                            },
+                            on: {
+                                click: $xeTableCustomPanel.resetCustomEvent
+                            }
+                        }),
+                        immediate
+                            ? h(VxeUIButtonComponent, {
+                                props: {
+                                    content: customOpts.resetButtonText || getI18n('vxe.table.customClose')
+                                },
+                                on: {
+                                    click: $xeTableCustomPanel.cancelCloseEvent
+                                }
+                            })
+                            : h(VxeUIButtonComponent, {
+                                props: {
+                                    content: customOpts.resetButtonText || getI18n('vxe.custom.cstmCancel')
+                                },
+                                on: {
+                                    click: $xeTableCustomPanel.cancelCustomEvent
+                                }
+                            }),
+                        immediate
+                            ? renderEmptyElement($xeTable)
+                            : h(VxeUIButtonComponent, {
+                                props: {
+                                    status: 'primary',
+                                    content: customOpts.confirmButtonText || getI18n('vxe.custom.cstmConfirm')
+                                },
+                                on: {
+                                    click: $xeTableCustomPanel.confirmCustomEvent
+                                }
+                            })
+                    ]);
+                }
+            };
+            if (headerSlot) {
+                scopedSlots.header = () => $xeTable.callSlot(headerSlot, params, h);
+            }
+            if (mode === 'drawer') {
+                return VxeUIDrawerComponent
+                    ? h(VxeUIDrawerComponent, {
+                        key: 'drawer',
+                        props: {
+                            className: ['vxe-table-custom-drawer-wrapper', 'vxe-table--ignore-clear', drawerOpts.className || ''].join(' '),
+                            value: customStore.visible,
+                            title: drawerOpts.title || getI18n('vxe.custom.cstmTitle'),
+                            width: drawerOpts.width || Math.min(880, Math.floor(document.documentElement.clientWidth * 0.6)),
+                            position: drawerOpts.position,
+                            resize: !!drawerOpts.resize,
+                            escClosable: !!drawerOpts.escClosable,
+                            maskClosable: !!drawerOpts.maskClosable,
+                            destroyOnClose: true,
+                            showFooter: true
+                        },
+                        on: {
+                            input(value) {
+                                customStore.visible = value;
+                            }
+                        },
+                        scopedSlots
+                    })
+                    : renderEmptyElement($xeTableCustomPanel);
+            }
+            return VxeUIModalComponent
+                ? h(VxeUIModalComponent, {
+                    key: 'modal',
+                    props: {
+                        className: ['vxe-table-custom-popup-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,
+                        height: modalOpts.height || Math.min(680, document.documentElement.clientHeight),
+                        minHeight: modalOpts.minHeight || 400,
+                        showZoom: modalOpts.showZoom,
+                        showMaximize: modalOpts.showMaximize,
+                        showMinimize: modalOpts.showMinimize,
+                        mask: modalOpts.mask,
+                        lockView: modalOpts.lockView,
+                        resize: modalOpts.resize,
+                        escClosable: !!modalOpts.escClosable,
+                        maskClosable: !!modalOpts.maskClosable,
+                        destroyOnClose: true,
+                        showFooter: true
+                    },
+                    on: {
+                        input(value) {
+                            customStore.visible = value;
+                        }
+                    },
+                    scopedSlots
+                })
+                : renderEmptyElement($xeTableCustomPanel);
+        },
+        renderVN(h) {
+            const $xeTableCustomPanel = this;
+            const $xeTable = $xeTableCustomPanel.$xeTable;
+            const customOpts = $xeTable.computeCustomOpts;
+            if (['modal', 'drawer', 'popup'].includes(`${customOpts.mode}`)) {
+                return $xeTableCustomPanel.renderPopupPanel(h);
+            }
+            return $xeTableCustomPanel.renderSimplePanel(h);
         }
+    },
+    render(h) {
+        return this.renderVN(h);
     }
 };