vxe-table 3.19.39 → 3.20.0-beta.1

package/packages/table/module/custom/panel.ts

@@ -1,4 +1,5 @@
-import { CreateElement, VNode } from 'vue'
+import { CreateElement, VNode, PropType } from 'vue'
+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'
@@ -65,819 +66,12 @@ function hideDropTip ($xeTableCustomPanel: VxeTableCustomPanelConstructor) {
   }
 }
 
-const renderDragTip = (h: CreateElement, $xeTableCustomPanel: VxeTableCustomPanelConstructor) => {
-  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: CreateElement, _vm: any) => {
-  const VxeUIButtonComponent = VxeUI.getComponent('VxeButton')
-
-  const props = _vm
-
-  const $xeTable = _vm.$xeTable as VxeTableConstructor & VxeTablePrivateMethods
-  const tableProps = $xeTable
-  const tableReactData = $xeTable as unknown as TableReactData
-  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: any[] = []
-  const customWrapperOns: any = {}
-  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: MouseEvent) => {
-                  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 }: VxeButtonDefines.ClickEventParams) => {
-                    _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 }: VxeButtonDefines.ClickEventParams) => {
-                    _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: CreateElement, $xeTableCustomPanel: VxeTableCustomPanelConstructor) => {
-  const VxeUIModalComponent = VxeUI.getComponent('VxeModal')
-  const VxeUIDrawerComponent = VxeUI.getComponent('VxeDrawer')
-  const VxeUIButtonComponent = VxeUI.getComponent('VxeButton')
-  const VxeUINumberInputComponent = VxeUI.getComponent('VxeNumberInput')
-
-  const _vm = $xeTableCustomPanel as any
-  const props = $xeTableCustomPanel
-
-  const $xeTable = $xeTableCustomPanel.$xeTable as VxeTableConstructor & VxeTablePrivateMethods
-  const tableProps = $xeTable
-  const tableReactData = $xeTable as unknown as TableReactData
-  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: VNode[] = []
-  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: MouseEvent) => {
-                    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: any) {
-                          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 }: VxeRadioGroupDefines.ChangeEventParams) {
-                      _vm.changeFixedOption(column, label, $event)
-                    }
-                  }
-                })
-            ])
-            : renderEmptyElement($xeTable)
-        ])
-      )
-    }
-  })
-  const scopedSlots: Record<string, any> = {
-    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: any) {
-            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: any) {
-          customStore.visible = value
-        }
-      },
-      scopedSlots
-    })
-    : renderEmptyElement($xeTableCustomPanel)
-}
-
-export default {
+export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxeTableCustomPanel',
   props: {
     customStore: {
-      type: Object,
-      default: () => ({})
+      type: Object as PropType<VxeTableDefines.VxeTableCustomStoreObj>,
+      default: () => ({} as VxeTableDefines.VxeTableCustomStoreObj)
     }
   },
   provide () {
@@ -914,9 +108,12 @@ export default {
     }
   },
   computed: {
+    ...({} as {
+      $xeTable(): VxeTableConstructor & VxeTablePrivateMethods
+    })
   },
   created () {
-    const $xeTableCustomPanel = this as any
+    const $xeTableCustomPanel = this
 
     const VxeUIModalComponent = VxeUI.getComponent('VxeModal')
     const VxeUIDrawerComponent = VxeUI.getComponent('VxeDrawer')
@@ -946,27 +143,18 @@ export default {
       }
     })
   },
-  render (h: CreateElement) {
-    const $xeTableCustomPanel = this as unknown as VxeTableCustomPanelConstructor
-    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: any) {
-      const $xeTableCustomPanel = this as unknown as VxeTableCustomPanelConstructor
+      const $xeTableCustomPanel = this
+      const props = $xeTableCustomPanel
       const $xeTable = $xeTableCustomPanel.$xeTable
 
-      const { customStore } = this
+      const { customStore } = props
       customStore.activeWrapper = true
       $xeTable.customOpenEvent(evnt)
     },
     handleWrapperMouseleaveEvent  (evnt: any) {
-      const $xeTableCustomPanel = this as unknown as VxeTableCustomPanelConstructor
+      const $xeTableCustomPanel = this
       const $xeTable = $xeTableCustomPanel.$xeTable
       const props = $xeTableCustomPanel
 
@@ -982,7 +170,7 @@ export default {
       return {}
     },
     confirmCustomEvent ({ $event }: VxeButtonDefines.ClickEventParams) {
-      const $xeTableCustomPanel = this as unknown as VxeTableCustomPanelConstructor
+      const $xeTableCustomPanel = this
       const $xeTable = $xeTableCustomPanel.$xeTable
       const tableReactData = $xeTable as unknown as TableReactData
 
@@ -993,14 +181,14 @@ export default {
       $xeTable.emitCustomEvent('close', $event)
     },
     cancelCloseEvent ({ $event }: VxeButtonDefines.ClickEventParams) {
-      const $xeTableCustomPanel = this as unknown as VxeTableCustomPanelConstructor
+      const $xeTableCustomPanel = this
       const $xeTable = $xeTableCustomPanel.$xeTable
 
       $xeTable.closeCustom()
       $xeTable.emitCustomEvent('close', $event)
     },
     cancelCustomEvent ({ $event }: VxeButtonDefines.ClickEventParams) {
-      const $xeTableCustomPanel = this as unknown as VxeTableCustomPanelConstructor
+      const $xeTableCustomPanel = this
       const $xeTable = $xeTableCustomPanel.$xeTable
 
       $xeTable.cancelCustom()
@@ -1009,7 +197,7 @@ export default {
       $xeTable.emitCustomEvent('close', $event)
     },
     handleResetCustomEvent (evnt: Event) {
-      const $xeTableCustomPanel = this as unknown as VxeTableCustomPanelConstructor
+      const $xeTableCustomPanel = this
       const $xeTable = $xeTableCustomPanel.$xeTable
 
       $xeTable.resetCustom(true)
@@ -1033,7 +221,7 @@ export default {
       }
     },
     handleOptionCheck (column: VxeTableDefines.ColumnInfo) {
-      const $xeTableCustomPanel = this as unknown as VxeTableCustomPanelConstructor
+      const $xeTableCustomPanel = this
       const $xeTable = $xeTableCustomPanel.$xeTable
       const tableReactData = $xeTable as unknown as TableReactData
 
@@ -1049,7 +237,7 @@ export default {
       }
     },
     changeCheckboxOption (column: VxeTableDefines.ColumnInfo, evnt: MouseEvent) {
-      const $xeTableCustomPanel = this as unknown as VxeTableCustomPanelConstructor
+      const $xeTableCustomPanel = this
       const $xeTable = $xeTableCustomPanel.$xeTable
       const tableReactData = $xeTable as unknown as TableReactData
 
@@ -1075,7 +263,7 @@ export default {
       $xeTable.dispatchEvent('custom-visible-change', { column, checked: isChecked }, evnt)
     },
     changeColumnWidth (column: VxeTableDefines.ColumnInfo) {
-      const $xeTableCustomPanel = this as unknown as VxeTableCustomPanelConstructor
+      const $xeTableCustomPanel = this
       const $xeTable = $xeTableCustomPanel.$xeTable
       const tableReactData = $xeTable as unknown as TableReactData
 
@@ -1091,7 +279,7 @@ export default {
       }
     },
     changeFixedOption  (column: VxeTableDefines.ColumnInfo, colFixed: VxeColumnPropTypes.Fixed, evnt: Event) {
-      const $xeTableCustomPanel = this as unknown as VxeTableCustomPanelConstructor
+      const $xeTableCustomPanel = this
       const $xeTable = $xeTableCustomPanel.$xeTable
       const tableReactData = $xeTable as unknown as TableReactData
 
@@ -1137,7 +325,7 @@ export default {
       }
     },
     allOptionEvent (evnt: MouseEvent) {
-      const $xeTableCustomPanel = this as unknown as VxeTableCustomPanelConstructor
+      const $xeTableCustomPanel = this
       const $xeTable = $xeTableCustomPanel.$xeTable
       const tableReactData = $xeTable as unknown as TableReactData
 
@@ -1147,7 +335,7 @@ export default {
       $xeTable.dispatchEvent('custom-visible-all', { checked: isAll }, evnt)
     },
     updateColDropTipContent () {
-      const $xeTableCustomPanel = this as unknown as VxeTableCustomPanelConstructor
+      const $xeTableCustomPanel = this
       const $xeTable = $xeTableCustomPanel.$xeTable
       const customPanelReactData = $xeTableCustomPanel.reactData
 
@@ -1167,7 +355,7 @@ export default {
       customPanelReactData.dragTipText = tipContent
     },
     sortMousedownEvent (evnt: MouseEvent) {
-      const $xeTableCustomPanel = this as unknown as VxeTableCustomPanelConstructor
+      const $xeTableCustomPanel = this
       const $xeTable = $xeTableCustomPanel.$xeTable
       const customPanelReactData = $xeTableCustomPanel.reactData
 
@@ -1200,7 +388,7 @@ export default {
       removeClass(trEl, 'active--drag-origin')
     },
     sortDragstartEvent (evnt: any) {
-      const $xeTableCustomPanel = this as unknown as VxeTableCustomPanelConstructor
+      const $xeTableCustomPanel = this
       const customPanelInternalData = $xeTableCustomPanel.internalData
 
       if (evnt.dataTransfer) {
@@ -1446,6 +634,825 @@ export default {
         customPanelInternalData.prevDragPos = dragPos
         showDropTip($xeTableCustomPanel, evnt, optEl, true, dragPos)
       }
+    },
+
+    renderDragTip (h: CreateElement) {
+      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: CreateElement) {
+      const VxeUIButtonComponent = VxeUI.getComponent('VxeButton')
+
+      const $xeTableCustomPanel = this
+      const props = $xeTableCustomPanel
+      const $xeTable = $xeTableCustomPanel.$xeTable
+
+      const tableProps = $xeTable
+      const tableReactData = $xeTable as unknown as TableReactData
+      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: any[] = []
+      const customWrapperOns: any = {}
+      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: MouseEvent) => {
+                      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 }: VxeButtonDefines.ClickEventParams) => {
+                        $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 }: VxeButtonDefines.ClickEventParams) => {
+                        $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: CreateElement) {
+      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 as unknown as TableReactData
+      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: VNode[] = []
+      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: MouseEvent) => {
+                        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: any) {
+                              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 }: VxeRadioGroupDefines.ChangeEventParams) {
+                          $xeTableCustomPanel.changeFixedOption(column, label, $event)
+                        }
+                      }
+                    })
+                ])
+                : renderEmptyElement($xeTable)
+            ])
+          )
+        }
+      })
+      const scopedSlots: Record<string, any> = {
+        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: any) {
+                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: any) {
+              customStore.visible = value
+            }
+          },
+          scopedSlots
+        })
+        : renderEmptyElement($xeTableCustomPanel)
+    },
+    renderVN (h: CreateElement) {
+      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)
     }
-  } as any
-}
+  },
+  render (h: CreateElement) {
+    return (this as any).renderVN(h)
+  }
+}) /* define-vxe-component end */