vxe-table 4.18.5 → 4.18.7

package/packages/toolbar/src/toolbar.ts

@@ -1,701 +1,701 @@
-import { h, ref, computed, inject, createCommentVNode, VNode, reactive, nextTick, PropType, onBeforeUnmount } from 'vue'
-import { defineVxeComponent } from '../../ui/src/comp'
-import XEUtils from 'xe-utils'
-import { VxeUI } from '../../ui'
-import { getSlotVNs } from '../../ui/src/vn'
-import { warnLog, errLog } from '../../ui/src/log'
-
-import type { ValueOf, VxeButtonEvents, VxeComponentSlotType, VxeButtonDefines } from 'vxe-pc-ui'
-import type { VxeGridConstructor, GridPrivateMethods, ToolbarMethods, ToolbarInternalData, VxeToolbarConstructor, VxeToolbarEmits, VxeToolbarPropTypes, ToolbarPrivateRef, ToolbarReactData, VxeTableConstructor, VxeTablePrivateMethods } from '../../../types'
-
-const { getConfig, getIcon, getI18n, renderer, commands, createEvent, useFns } = VxeUI
-
-function createReactData (): ToolbarReactData {
-  return {
-    isRefresh: false,
-    connectFlag: 0,
-    columns: []
-  }
-}
-
-function createInternalData (): ToolbarInternalData {
-  return {
-    connectTable: null
-  }
-}
-
-export default defineVxeComponent({
-  name: 'VxeToolbar',
-  props: {
-    loading: Boolean,
-    refresh: [Boolean, Object] as PropType<VxeToolbarPropTypes.Refresh>,
-    refreshOptions: Object as PropType<VxeToolbarPropTypes.RefreshOptions>,
-    import: [Boolean, Object] as PropType<VxeToolbarPropTypes.Import>,
-    importOptions: Object as PropType<VxeToolbarPropTypes.ImportOptions>,
-    export: [Boolean, Object] as PropType<VxeToolbarPropTypes.Export>,
-    exportOptions: Object as PropType<VxeToolbarPropTypes.ExportOptions>,
-    print: [Boolean, Object] as PropType<VxeToolbarPropTypes.Print>,
-    printOptions: Object as PropType<VxeToolbarPropTypes.PrintOptions>,
-    zoom: [Boolean, Object] as PropType< VxeToolbarPropTypes.Zoom>,
-    zoomOptions: Object as PropType< VxeToolbarPropTypes.ZoomOptions>,
-    custom: [Boolean, Object] as PropType<VxeToolbarPropTypes.Custom>,
-    customOptions: Object as PropType<VxeToolbarPropTypes.CustomOptions>,
-    buttons: {
-      type: Array as PropType<VxeToolbarPropTypes.Buttons>,
-      default: () => getConfig().toolbar.buttons
-    },
-    tools: {
-      type: Array as PropType<VxeToolbarPropTypes.Tools>,
-      default: () => getConfig().toolbar.tools
-    },
-    perfect: {
-      type: Boolean as PropType<VxeToolbarPropTypes.Perfect>,
-      default: () => getConfig().toolbar.perfect
-    },
-    size: {
-      type: String as PropType<VxeToolbarPropTypes.Size>,
-      default: () => getConfig().toolbar.size || getConfig().size
-    },
-    className: [String, Function] as PropType<VxeToolbarPropTypes.ClassName>
-  },
-  emits: [
-    'button-click',
-    'tool-click'
-  ] as VxeToolbarEmits,
-  setup (props, context) {
-    const { slots, emit } = context
-
-    const xID = XEUtils.uniqueId()
-
-    // 使用已安装的组件，如果未安装则不渲染
-    const VxeUIButtonComponent = VxeUI.getComponent('VxeButton')
-
-    const $xeGrid = inject<(VxeGridConstructor & GridPrivateMethods) | null>('$xeGrid', null)
-    const $xeGantt = inject('$xeGantt', null)
-    const $xeGGWrapper = $xeGrid || $xeGantt
-
-    const { computeSize } = useFns.useSize(props)
-
-    const reactData = reactive(createReactData())
-
-    const internalData = createInternalData()
-
-    const refElem = ref<HTMLDivElement>()
-
-    const refMaps: ToolbarPrivateRef = {
-      refElem
-    }
-
-    const $xeToolbar = {
-      xID,
-      props,
-      context,
-      reactData,
-      internalData,
-      getRefMaps: () => refMaps
-    } as unknown as VxeToolbarConstructor
-
-    let toolbarMethods = {} as ToolbarMethods
-
-    const computeRefreshOpts = computed(() => {
-      return Object.assign({}, XEUtils.clone(getConfig().toolbar.refresh, true), props.refreshOptions, props.refresh) as VxeToolbarPropTypes.RefreshOptions
-    })
-
-    const computeImportOpts = computed(() => {
-      return Object.assign({}, XEUtils.clone(getConfig().toolbar.import, true), props.importOptions, props.import) as VxeToolbarPropTypes.ImportOptions
-    })
-
-    const computeExportOpts = computed(() => {
-      return Object.assign({}, XEUtils.clone(getConfig().toolbar.export, true), props.exportOptions, props.export) as VxeToolbarPropTypes.ExportOptions
-    })
-
-    const computePrintOpts = computed(() => {
-      return Object.assign({}, XEUtils.clone(getConfig().toolbar.print, true), props.printOptions, props.print) as VxeToolbarPropTypes.PrintOptions
-    })
-
-    const computeZoomOpts = computed(() => {
-      return Object.assign({}, XEUtils.clone(getConfig().toolbar.zoom, true), props.zoomOptions, props.zoom) as VxeToolbarPropTypes.ZoomOptions
-    })
-
-    const computeCustomOpts = computed(() => {
-      return Object.assign({}, XEUtils.clone(getConfig().toolbar.custom, true), props.customOptions, props.custom) as VxeToolbarPropTypes.CustomOptions
-    })
-
-    const computeTableCustomOpts = computed(() => {
-      const { connectTable } = internalData
-      const $table = connectTable
-      if (reactData.connectFlag || $table) {
-        if ($table) {
-          const { computeCustomOpts } = $table.getComputeMaps()
-          return computeCustomOpts.value
-        }
-      }
-      return { trigger: '' }
-    })
-
-    const computeTrigger = computed(() => {
-      const tableCustomOpts = computeTableCustomOpts.value
-      return tableCustomOpts.trigger
-    })
-
-    const checkTable = () => {
-      const { connectTable } = internalData
-      const $table = connectTable
-      if ($table) {
-        return true
-      }
-      errLog('vxe.error.barUnableLink')
-    }
-
-    const handleClickSettingEvent = ({ $event }: any) => {
-      const { connectTable } = internalData
-      const $table = connectTable
-      if ($table) {
-        if ($table.triggerCustomEvent) {
-          $table.triggerCustomEvent($event)
-        }
-      }
-    }
-
-    const handleMouseenterSettingEvent = ({ $event }: any) => {
-      const { connectTable } = internalData
-      const $table = connectTable
-      if ($table) {
-        $table.customOpenEvent($event)
-      }
-    }
-
-    const handleMouseleaveSettingEvent = ({ $event }: any) => {
-      const { connectTable } = internalData
-      const $table = connectTable
-      if ($table) {
-        const { customStore } = $table.reactData
-        customStore.activeBtn = false
-        setTimeout(() => {
-          if (!customStore.activeBtn && !customStore.activeWrapper) {
-            $table.customCloseEvent($event)
-          }
-        }, 350)
-      }
-    }
-
-    const refreshEvent: VxeButtonEvents.Click = ({ $event }) => {
-      const { isRefresh } = reactData
-      const refreshOpts = computeRefreshOpts.value
-      if (!isRefresh) {
-        const queryMethod = refreshOpts.queryMethod || refreshOpts.query
-        if (queryMethod) {
-          reactData.isRefresh = true
-          try {
-            Promise.resolve(queryMethod({})).catch((e) => e).then(() => {
-              reactData.isRefresh = false
-            })
-          } catch (e) {
-            reactData.isRefresh = false
-          }
-        } else if ($xeGGWrapper) {
-          reactData.isRefresh = true
-          $xeGGWrapper.triggerToolbarCommitEvent({ code: refreshOpts.code || 'reload' }, $event).catch(() => {}).then(() => {
-            reactData.isRefresh = false
-          })
-        }
-      }
-    }
-
-    const zoomEvent: VxeButtonEvents.Click = ({ $event }) => {
-      if ($xeGGWrapper) {
-        $xeGGWrapper.triggerZoomEvent($event)
-      } else {
-        warnLog('vxe.error.notProp', ['[toolbar] zoom'])
-      }
-    }
-
-    const importEvent = () => {
-      if (checkTable()) {
-        const { connectTable } = internalData
-        const $table = connectTable
-        if ($table) {
-          $table.importData()
-        }
-      }
-    }
-
-    const openImportEvent = () => {
-      if (checkTable()) {
-        const { connectTable } = internalData
-        const $table = connectTable
-        if ($table) {
-          $table.openImport()
-        }
-      }
-    }
-
-    const exportEvent = () => {
-      if (checkTable()) {
-        const { connectTable } = internalData
-        const $table = connectTable
-        if ($table) {
-          $table.exportData()
-        }
-      }
-    }
-
-    const openExportEvent = () => {
-      if (checkTable()) {
-        const { connectTable } = internalData
-        const $table = connectTable
-        if ($table) {
-          $table.openExport()
-        }
-      }
-    }
-
-    const printEvent = () => {
-      if (checkTable()) {
-        const { connectTable } = internalData
-        const $table = connectTable
-        if ($table) {
-          $table.print()
-        }
-      }
-    }
-
-    const openPrintEvent = () => {
-      if (checkTable()) {
-        const { connectTable } = internalData
-        const $table = connectTable
-        if ($table) {
-          $table.openPrint()
-        }
-      }
-    }
-
-    const handleDefaultCodeEvent = (eventParams: VxeButtonDefines.ClickEventParams, item: VxeToolbarPropTypes.ButtonConfig | VxeToolbarPropTypes.ToolConfig, cb: () => void) => {
-      switch (item.code) {
-        case 'print':
-          printEvent()
-          break
-        case 'open_print':
-          openPrintEvent()
-          break
-        case 'custom':
-          handleClickSettingEvent(eventParams)
-          break
-        case 'export':
-          exportEvent()
-          break
-        case 'open_export':
-          openExportEvent()
-          break
-        case 'import':
-          importEvent()
-          break
-        case 'open_import':
-          openImportEvent()
-          break
-        case 'zoom':
-          zoomEvent(eventParams)
-          break
-        case 'refresh':
-          refreshEvent(eventParams)
-          break
-        default:
-          cb()
-          break
-      }
-    }
-
-    const btnEvent = (eventParams: VxeButtonDefines.ClickEventParams, item: VxeToolbarPropTypes.ButtonConfig) => {
-      const { $event } = eventParams
-      const { connectTable } = internalData
-      const $table = connectTable
-      const { code } = item
-      if (code) {
-        handleDefaultCodeEvent(eventParams, item, () => {
-          if ($xeGGWrapper) {
-            $xeGGWrapper.triggerToolbarBtnEvent(item, $event)
-          } else {
-            const gCommandOpts = commands.get(code)
-            const params = { code, button: item, $table: $table as VxeTableConstructor, $grid: $xeGrid, $gantt: $xeGantt, $event }
-            if (gCommandOpts) {
-              const tCommandMethod = gCommandOpts.tableCommandMethod || gCommandOpts.commandMethod
-              if (tCommandMethod) {
-                tCommandMethod(params)
-              } else {
-                errLog('vxe.error.notCommands', [`[toolbar] ${code}`])
-              }
-            }
-            $xeToolbar.dispatchEvent('button-click', params, $event)
-          }
-        })
-      }
-    }
-
-    const tolEvent = (eventParams: VxeButtonDefines.ClickEventParams, item: VxeToolbarPropTypes.ToolConfig) => {
-      const { $event } = eventParams
-      const { connectTable } = internalData
-      const $table = connectTable
-      const { code } = item
-      if (code) {
-        handleDefaultCodeEvent(eventParams, item, () => {
-          if ($xeGGWrapper) {
-            $xeGGWrapper.triggerToolbarTolEvent(item, $event)
-          } else {
-            const gCommandOpts = commands.get(code)
-            const params = { code, button: null, tool: item, $table: $table as VxeTableConstructor, $grid: $xeGrid, $gantt: $xeGantt, $event }
-            if (gCommandOpts) {
-              const tCommandMethod = gCommandOpts.tableCommandMethod || gCommandOpts.commandMethod
-              if (tCommandMethod) {
-                tCommandMethod(params)
-              } else {
-                errLog('vxe.error.notCommands', [`[toolbar] ${code}`])
-              }
-            }
-            $xeToolbar.dispatchEvent('tool-click', params, $event)
-          }
-        })
-      }
-    }
-
-    const dispatchEvent = (type: ValueOf<VxeToolbarEmits>, params: Record<string, any>, evnt: Event | null) => {
-      emit(type, createEvent(evnt, { $toolbar: $xeToolbar }, params))
-    }
-
-    toolbarMethods = {
-      dispatchEvent,
-      syncUpdate (params) {
-        internalData.connectTable = params.$table as (VxeTableConstructor & VxeTablePrivateMethods)
-        reactData.columns = params.collectColumn
-        reactData.connectFlag++
-      }
-    }
-
-    Object.assign($xeToolbar, toolbarMethods)
-
-    const renderDropdowns = (item: VxeToolbarPropTypes.ButtonConfig, isBtn: boolean) => {
-      const { dropdowns } = item
-      const downVNs: VNode[] = []
-      if (dropdowns) {
-        return dropdowns.map((child, index) => {
-          if (child.visible === false) {
-            return createCommentVNode()
-          }
-          return VxeUIButtonComponent
-            ? h(VxeUIButtonComponent, {
-              key: index,
-              ...Object.assign({}, child, {
-                content: child.content || child.name,
-                options: undefined
-              }),
-              onClick: (eventParams) => isBtn ? btnEvent(eventParams, child) : tolEvent(eventParams, child)
-            })
-            : createCommentVNode()
-        })
-      }
-      return downVNs
-    }
-
-    /**
-     * 渲染按钮
-     */
-    const renderLeftBtns = () => {
-      const { buttons } = props
-      const { connectTable } = internalData
-      const $table = connectTable
-      const buttonsSlot = slots.buttons
-      const buttonPrefixSlot = slots.buttonPrefix || slots['button-prefix']
-      const buttonSuffixSlot = slots.buttonSuffix || slots['button-suffix']
-      const btnVNs: VxeComponentSlotType[] = []
-      if (buttons) {
-        buttons.forEach((item, index) => {
-          const { dropdowns, buttonRender } = item
-          if (item.visible !== false) {
-            const compConf = buttonRender ? renderer.get(buttonRender.name) : null
-            if (buttonRender && compConf && compConf.renderToolbarButton) {
-              const toolbarButtonClassName = compConf.toolbarButtonClassName
-              const params = { $grid: $xeGrid, $gantt: $xeGantt, $table: $table!, button: item }
-              btnVNs.push(
-                h('span', {
-                  key: `br${item.code || index}`,
-                  class: ['vxe-button--item', toolbarButtonClassName ? (XEUtils.isFunction(toolbarButtonClassName) ? toolbarButtonClassName(params) : toolbarButtonClassName) : '']
-                }, getSlotVNs(compConf.renderToolbarButton(buttonRender, params)))
-              )
-            } else {
-              if (VxeUIButtonComponent) {
-                btnVNs.push(
-                  h(VxeUIButtonComponent, {
-                    key: `bd${item.code || index}`,
-                    ...Object.assign({}, item, {
-                      content: item.content || item.name,
-                      options: undefined
-                    }),
-                    onClick: (eventParams) => btnEvent(eventParams, item)
-                  }, dropdowns && dropdowns.length
-                    ? {
-                        dropdowns: () => renderDropdowns(item, true)
-                      }
-                    : {})
-                )
-              }
-            }
-          }
-        })
-      }
-      return [
-        h('div', {
-          class: 'vxe-button--prefix-wrapper'
-        }, buttonPrefixSlot ? getSlotVNs(buttonPrefixSlot({ buttons: buttons || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })) : []),
-        h('div', {
-          class: 'vxe-button--item-wrapper'
-        }, buttonsSlot ? getSlotVNs(buttonsSlot({ buttons: buttons || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })) : btnVNs),
-        h('div', {
-          class: 'vxe-button--suffix-wrapper'
-        }, buttonSuffixSlot ? getSlotVNs(buttonSuffixSlot({ buttons: buttons || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })) : [])
-      ]
-    }
-
-    /**
-     * 渲染右侧工具
-     */
-    const renderRightTools = () => {
-      const { tools } = props
-      const { connectTable } = internalData
-      const $table = connectTable
-      const toolsSlot = slots.tools
-      const toolPrefixSlot = slots.toolPrefix || slots['tool-prefix']
-      const toolSuffixSlot = slots.toolSuffix || slots['tool-suffix']
-      const btnVNs: VxeComponentSlotType[] = []
-      if (tools) {
-        tools.forEach((item, tIndex) => {
-          const { dropdowns, toolRender } = item
-          if (item.visible !== false) {
-            const rdName = toolRender ? toolRender.name : null
-            const compConf = toolRender ? renderer.get(rdName) : null
-            if (toolRender && compConf && compConf.renderToolbarTool) {
-              const toolbarToolClassName = compConf.toolbarToolClassName
-              const params = { $grid: $xeGrid, $gantt: $xeGantt, $table: $table!, tool: item }
-              btnVNs.push(
-                h('span', {
-                  key: rdName as string,
-                  class: ['vxe-tool--item', toolbarToolClassName ? (XEUtils.isFunction(toolbarToolClassName) ? toolbarToolClassName(params) : toolbarToolClassName) : '']
-                }, getSlotVNs(compConf.renderToolbarTool(toolRender, params)))
-              )
-            } else {
-              if (VxeUIButtonComponent) {
-                btnVNs.push(
-                  h(VxeUIButtonComponent, {
-                    key: tIndex,
-                    ...Object.assign({}, item, {
-                      content: item.content || item.name,
-                      options: undefined
-                    }),
-                    onClick: (eventParams) => tolEvent(eventParams, item)
-                  }, dropdowns && dropdowns.length
-                    ? {
-                        dropdowns: () => renderDropdowns(item, false)
-                      }
-                    : {})
-                )
-              }
-            }
-          }
-        })
-      }
-      return [
-        h('div', {
-          class: 'vxe-tool--prefix-wrapper'
-        }, toolPrefixSlot ? getSlotVNs(toolPrefixSlot({ tools: tools || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })) : []),
-        h('div', {
-          class: 'vxe-tool--item-wrapper'
-        }, toolsSlot ? getSlotVNs(toolsSlot({ tools: tools || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })) : btnVNs),
-        h('div', {
-          class: 'vxe-tool--suffix-wrapper'
-        }, toolSuffixSlot ? getSlotVNs(toolSuffixSlot({ tools: tools || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })) : [])
-      ]
-    }
-
-    const renderToolImport = () => {
-      const importOpts = computeImportOpts.value
-      return VxeUIButtonComponent
-        ? h(VxeUIButtonComponent, {
-          key: 'import',
-          circle: true,
-          icon: importOpts.icon || getIcon().TOOLBAR_TOOLS_IMPORT,
-          title: getI18n('vxe.toolbar.import'),
-          onClick: openImportEvent
-        })
-        : createCommentVNode()
-    }
-
-    const renderToolExport = () => {
-      const exportOpts = computeExportOpts.value
-      return VxeUIButtonComponent
-        ? h(VxeUIButtonComponent, {
-          key: 'export',
-          circle: true,
-          icon: exportOpts.icon || getIcon().TOOLBAR_TOOLS_EXPORT,
-          title: getI18n('vxe.toolbar.export'),
-          onClick: openExportEvent
-        })
-        : createCommentVNode()
-    }
-
-    const renderToolPrint = () => {
-      const printOpts = computePrintOpts.value
-      return VxeUIButtonComponent
-        ? h(VxeUIButtonComponent, {
-          key: 'print',
-          circle: true,
-          icon: printOpts.icon || getIcon().TOOLBAR_TOOLS_PRINT,
-          title: getI18n('vxe.toolbar.print'),
-          onClick: openPrintEvent
-        })
-        : createCommentVNode()
-    }
-
-    const renderToolRefresh = () => {
-      const refreshOpts = computeRefreshOpts.value
-      return VxeUIButtonComponent
-        ? h(VxeUIButtonComponent, {
-          key: 'refresh',
-          circle: true,
-          icon: reactData.isRefresh ? (refreshOpts.iconLoading || getIcon().TOOLBAR_TOOLS_REFRESH_LOADING) : (refreshOpts.icon || getIcon().TOOLBAR_TOOLS_REFRESH),
-          title: getI18n('vxe.toolbar.refresh'),
-          onClick: refreshEvent
-        })
-        : createCommentVNode()
-    }
-
-    const renderToolZoom = () => {
-      const zoomOpts = computeZoomOpts.value
-      return $xeGGWrapper && VxeUIButtonComponent
-        ? h(VxeUIButtonComponent, {
-          key: 'zoom',
-          circle: true,
-          icon: $xeGGWrapper.isMaximized() ? (zoomOpts.iconOut || getIcon().TOOLBAR_TOOLS_MINIMIZE) : (zoomOpts.iconIn || getIcon().TOOLBAR_TOOLS_FULLSCREEN),
-          title: getI18n(`vxe.toolbar.zoom${$xeGGWrapper.isMaximized() ? 'Out' : 'In'}`),
-          onClick: zoomEvent
-        })
-        : createCommentVNode()
-    }
-
-    const renderToolCustom = () => {
-      const customOpts = computeCustomOpts.value
-      const btnTrigger = computeTrigger.value
-      const customBtnOns: {
-        onClick?: typeof handleClickSettingEvent;
-        onMouseenter?: typeof handleMouseenterSettingEvent;
-        onMouseleave?: typeof handleMouseleaveSettingEvent;
-      } = {}
-      if (btnTrigger === 'manual') {
-        // 手动触发
-      } else if (btnTrigger === 'hover') {
-        // hover 触发
-        customBtnOns.onMouseenter = handleMouseenterSettingEvent
-        customBtnOns.onMouseleave = handleMouseleaveSettingEvent
-      } else {
-        // 点击触发
-        customBtnOns.onClick = handleClickSettingEvent
-      }
-      return VxeUIButtonComponent
-        ? h(VxeUIButtonComponent, {
-          key: 'custom',
-          circle: true,
-          icon: customOpts.icon || getIcon().TOOLBAR_TOOLS_CUSTOM,
-          title: getI18n('vxe.toolbar.custom'),
-          className: 'vxe-toolbar-custom-target',
-          ...customBtnOns
-        })
-        : createCommentVNode()
-    }
-
-    const renderVN = () => {
-      const { perfect, loading, refresh, zoom, custom, className } = props
-      const vSize = computeSize.value
-
-      return h('div', {
-        ref: refElem,
-        class: ['vxe-toolbar', className ? (XEUtils.isFunction(className) ? className({ $toolbar: $xeToolbar }) : className) : '', {
-          [`size--${vSize}`]: vSize,
-          'is--perfect': perfect,
-          'is--loading': loading
-        }]
-      }, [
-        h('div', {
-          class: 'vxe-buttons--wrapper'
-        }, renderLeftBtns()),
-        h('div', {
-          class: 'vxe-tools--wrapper'
-        }, renderRightTools()),
-        h('div', {
-          class: 'vxe-tools--operate'
-        }, [
-          props.import ? renderToolImport() : createCommentVNode(),
-          props.export ? renderToolExport() : createCommentVNode(),
-          props.print ? renderToolPrint() : createCommentVNode(),
-          refresh ? renderToolRefresh() : createCommentVNode(),
-          zoom && $xeGGWrapper ? renderToolZoom() : createCommentVNode(),
-          custom ? renderToolCustom() : createCommentVNode()
-        ])
-      ])
-    }
-
-    $xeToolbar.renderVN = renderVN
-
-    nextTick(() => {
-      const refreshOpts = computeRefreshOpts.value
-      const queryMethod = refreshOpts.queryMethod || refreshOpts.query
-      if (props.refresh && !$xeGGWrapper && !queryMethod) {
-        warnLog('vxe.error.notFunc', ['[toolbar] queryMethod'])
-      }
-
-      if (XEUtils.isPlainObject(props.custom)) {
-        warnLog('vxe.error.delProp', ['[toolbar] custom={...}', 'custom=boolean & custom-options={...}'])
-      }
-      if (XEUtils.isPlainObject(props.print)) {
-        warnLog('vxe.error.delProp', ['[toolbar] print={...}', 'print=boolean & print-options={...}'])
-      }
-      if (XEUtils.isPlainObject(props.export)) {
-        warnLog('vxe.error.delProp', ['[toolbar] export={...}', 'export=boolean & export-options={...}'])
-      }
-      if (XEUtils.isPlainObject(props.import)) {
-        warnLog('vxe.error.delProp', ['[toolbar] import={...}', 'import=boolean & import-options={...}'])
-      }
-      if (XEUtils.isPlainObject(props.refresh)) {
-        warnLog('vxe.error.delProp', ['[toolbar] refresh={...}', 'refresh=boolean & refresh-options={...}'])
-      }
-      if (XEUtils.isPlainObject(props.refresh)) {
-        warnLog('vxe.error.delProp', ['[toolbar] zoom={...}', 'zoom=boolean & zoom-options={...}'])
-      }
-
-      const customOpts = computeCustomOpts.value
-      if (customOpts.isFooter) {
-        warnLog('vxe.error.delProp', ['[toolbar] toolbar.custom.isFooter', 'table.custom-config.showFooter'])
-      }
-      if (customOpts.showFooter) {
-        warnLog('vxe.error.delProp', ['[toolbar] toolbar.custom.showFooter', 'table.custom-config.showFooter'])
-      }
-      if (customOpts.immediate) {
-        warnLog('vxe.error.delProp', ['[toolbar] toolbar.custom.immediate', 'table.custom-config.immediate'])
-      }
-      if (customOpts.trigger) {
-        warnLog('vxe.error.delProp', ['[toolbar] toolbar.custom.trigger', 'table.custom-config.trigger'])
-      }
-      if (props.refresh || props.import || props.export || props.print || props.zoom) {
-        if (!VxeUIButtonComponent) {
-          errLog('vxe.error.reqComp', ['vxe-button'])
-        }
-      }
-    })
-
-    onBeforeUnmount(() => {
-      XEUtils.assign(reactData, createReactData())
-      XEUtils.assign(internalData, createInternalData())
-    })
-
-    return $xeToolbar
-  },
-  render () {
-    return this.renderVN()
-  }
-})
+import { h, ref, computed, inject, createCommentVNode, VNode, reactive, nextTick, PropType, onBeforeUnmount } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import XEUtils from 'xe-utils'
+import { VxeUI } from '../../ui'
+import { getSlotVNs } from '../../ui/src/vn'
+import { warnLog, errLog } from '../../ui/src/log'
+
+import type { ValueOf, VxeButtonEvents, VxeComponentSlotType, VxeButtonDefines } from 'vxe-pc-ui'
+import type { VxeGridConstructor, GridPrivateMethods, ToolbarMethods, ToolbarInternalData, VxeToolbarConstructor, VxeToolbarEmits, VxeToolbarPropTypes, ToolbarPrivateRef, ToolbarReactData, VxeTableConstructor, VxeTablePrivateMethods } from '../../../types'
+
+const { getConfig, getIcon, getI18n, renderer, commands, createEvent, useFns } = VxeUI
+
+function createReactData (): ToolbarReactData {
+  return {
+    isRefresh: false,
+    connectFlag: 0,
+    columns: []
+  }
+}
+
+function createInternalData (): ToolbarInternalData {
+  return {
+    connectTable: null
+  }
+}
+
+export default defineVxeComponent({
+  name: 'VxeToolbar',
+  props: {
+    loading: Boolean,
+    refresh: [Boolean, Object] as PropType<VxeToolbarPropTypes.Refresh>,
+    refreshOptions: Object as PropType<VxeToolbarPropTypes.RefreshOptions>,
+    import: [Boolean, Object] as PropType<VxeToolbarPropTypes.Import>,
+    importOptions: Object as PropType<VxeToolbarPropTypes.ImportOptions>,
+    export: [Boolean, Object] as PropType<VxeToolbarPropTypes.Export>,
+    exportOptions: Object as PropType<VxeToolbarPropTypes.ExportOptions>,
+    print: [Boolean, Object] as PropType<VxeToolbarPropTypes.Print>,
+    printOptions: Object as PropType<VxeToolbarPropTypes.PrintOptions>,
+    zoom: [Boolean, Object] as PropType< VxeToolbarPropTypes.Zoom>,
+    zoomOptions: Object as PropType< VxeToolbarPropTypes.ZoomOptions>,
+    custom: [Boolean, Object] as PropType<VxeToolbarPropTypes.Custom>,
+    customOptions: Object as PropType<VxeToolbarPropTypes.CustomOptions>,
+    buttons: {
+      type: Array as PropType<VxeToolbarPropTypes.Buttons>,
+      default: () => getConfig().toolbar.buttons
+    },
+    tools: {
+      type: Array as PropType<VxeToolbarPropTypes.Tools>,
+      default: () => getConfig().toolbar.tools
+    },
+    perfect: {
+      type: Boolean as PropType<VxeToolbarPropTypes.Perfect>,
+      default: () => getConfig().toolbar.perfect
+    },
+    size: {
+      type: String as PropType<VxeToolbarPropTypes.Size>,
+      default: () => getConfig().toolbar.size || getConfig().size
+    },
+    className: [String, Function] as PropType<VxeToolbarPropTypes.ClassName>
+  },
+  emits: [
+    'button-click',
+    'tool-click'
+  ] as VxeToolbarEmits,
+  setup (props, context) {
+    const { slots, emit } = context
+
+    const xID = XEUtils.uniqueId()
+
+    // 使用已安装的组件，如果未安装则不渲染
+    const VxeUIButtonComponent = VxeUI.getComponent('VxeButton')
+
+    const $xeGrid = inject<(VxeGridConstructor & GridPrivateMethods) | null>('$xeGrid', null)
+    const $xeGantt = inject('$xeGantt', null)
+    const $xeGGWrapper = $xeGrid || $xeGantt
+
+    const { computeSize } = useFns.useSize(props)
+
+    const reactData = reactive(createReactData())
+
+    const internalData = createInternalData()
+
+    const refElem = ref<HTMLDivElement>()
+
+    const refMaps: ToolbarPrivateRef = {
+      refElem
+    }
+
+    const $xeToolbar = {
+      xID,
+      props,
+      context,
+      reactData,
+      internalData,
+      getRefMaps: () => refMaps
+    } as unknown as VxeToolbarConstructor
+
+    let toolbarMethods = {} as ToolbarMethods
+
+    const computeRefreshOpts = computed(() => {
+      return Object.assign({}, XEUtils.clone(getConfig().toolbar.refresh, true), props.refreshOptions, props.refresh) as VxeToolbarPropTypes.RefreshOptions
+    })
+
+    const computeImportOpts = computed(() => {
+      return Object.assign({}, XEUtils.clone(getConfig().toolbar.import, true), props.importOptions, props.import) as VxeToolbarPropTypes.ImportOptions
+    })
+
+    const computeExportOpts = computed(() => {
+      return Object.assign({}, XEUtils.clone(getConfig().toolbar.export, true), props.exportOptions, props.export) as VxeToolbarPropTypes.ExportOptions
+    })
+
+    const computePrintOpts = computed(() => {
+      return Object.assign({}, XEUtils.clone(getConfig().toolbar.print, true), props.printOptions, props.print) as VxeToolbarPropTypes.PrintOptions
+    })
+
+    const computeZoomOpts = computed(() => {
+      return Object.assign({}, XEUtils.clone(getConfig().toolbar.zoom, true), props.zoomOptions, props.zoom) as VxeToolbarPropTypes.ZoomOptions
+    })
+
+    const computeCustomOpts = computed(() => {
+      return Object.assign({}, XEUtils.clone(getConfig().toolbar.custom, true), props.customOptions, props.custom) as VxeToolbarPropTypes.CustomOptions
+    })
+
+    const computeTableCustomOpts = computed(() => {
+      const { connectTable } = internalData
+      const $table = connectTable
+      if (reactData.connectFlag || $table) {
+        if ($table) {
+          const { computeCustomOpts } = $table.getComputeMaps()
+          return computeCustomOpts.value
+        }
+      }
+      return { trigger: '' }
+    })
+
+    const computeTrigger = computed(() => {
+      const tableCustomOpts = computeTableCustomOpts.value
+      return tableCustomOpts.trigger
+    })
+
+    const checkTable = () => {
+      const { connectTable } = internalData
+      const $table = connectTable
+      if ($table) {
+        return true
+      }
+      errLog('vxe.error.barUnableLink')
+    }
+
+    const handleClickSettingEvent = ({ $event }: any) => {
+      const { connectTable } = internalData
+      const $table = connectTable
+      if ($table) {
+        if ($table.triggerCustomEvent) {
+          $table.triggerCustomEvent($event)
+        }
+      }
+    }
+
+    const handleMouseenterSettingEvent = ({ $event }: any) => {
+      const { connectTable } = internalData
+      const $table = connectTable
+      if ($table) {
+        $table.customOpenEvent($event)
+      }
+    }
+
+    const handleMouseleaveSettingEvent = ({ $event }: any) => {
+      const { connectTable } = internalData
+      const $table = connectTable
+      if ($table) {
+        const { customStore } = $table.reactData
+        customStore.activeBtn = false
+        setTimeout(() => {
+          if (!customStore.activeBtn && !customStore.activeWrapper) {
+            $table.customCloseEvent($event)
+          }
+        }, 350)
+      }
+    }
+
+    const refreshEvent: VxeButtonEvents.Click = ({ $event }) => {
+      const { isRefresh } = reactData
+      const refreshOpts = computeRefreshOpts.value
+      if (!isRefresh) {
+        const queryMethod = refreshOpts.queryMethod || refreshOpts.query
+        if (queryMethod) {
+          reactData.isRefresh = true
+          try {
+            Promise.resolve(queryMethod({})).catch((e) => e).then(() => {
+              reactData.isRefresh = false
+            })
+          } catch (e) {
+            reactData.isRefresh = false
+          }
+        } else if ($xeGGWrapper) {
+          reactData.isRefresh = true
+          $xeGGWrapper.triggerToolbarCommitEvent({ code: refreshOpts.code || 'reload' }, $event).catch(() => {}).then(() => {
+            reactData.isRefresh = false
+          })
+        }
+      }
+    }
+
+    const zoomEvent: VxeButtonEvents.Click = ({ $event }) => {
+      if ($xeGGWrapper) {
+        $xeGGWrapper.triggerZoomEvent($event)
+      } else {
+        warnLog('vxe.error.notProp', ['[toolbar] zoom'])
+      }
+    }
+
+    const importEvent = () => {
+      if (checkTable()) {
+        const { connectTable } = internalData
+        const $table = connectTable
+        if ($table) {
+          $table.importData()
+        }
+      }
+    }
+
+    const openImportEvent = () => {
+      if (checkTable()) {
+        const { connectTable } = internalData
+        const $table = connectTable
+        if ($table) {
+          $table.openImport()
+        }
+      }
+    }
+
+    const exportEvent = () => {
+      if (checkTable()) {
+        const { connectTable } = internalData
+        const $table = connectTable
+        if ($table) {
+          $table.exportData()
+        }
+      }
+    }
+
+    const openExportEvent = () => {
+      if (checkTable()) {
+        const { connectTable } = internalData
+        const $table = connectTable
+        if ($table) {
+          $table.openExport()
+        }
+      }
+    }
+
+    const printEvent = () => {
+      if (checkTable()) {
+        const { connectTable } = internalData
+        const $table = connectTable
+        if ($table) {
+          $table.print()
+        }
+      }
+    }
+
+    const openPrintEvent = () => {
+      if (checkTable()) {
+        const { connectTable } = internalData
+        const $table = connectTable
+        if ($table) {
+          $table.openPrint()
+        }
+      }
+    }
+
+    const handleDefaultCodeEvent = (eventParams: VxeButtonDefines.ClickEventParams, item: VxeToolbarPropTypes.ButtonConfig | VxeToolbarPropTypes.ToolConfig, cb: () => void) => {
+      switch (item.code) {
+        case 'print':
+          printEvent()
+          break
+        case 'open_print':
+          openPrintEvent()
+          break
+        case 'custom':
+          handleClickSettingEvent(eventParams)
+          break
+        case 'export':
+          exportEvent()
+          break
+        case 'open_export':
+          openExportEvent()
+          break
+        case 'import':
+          importEvent()
+          break
+        case 'open_import':
+          openImportEvent()
+          break
+        case 'zoom':
+          zoomEvent(eventParams)
+          break
+        case 'refresh':
+          refreshEvent(eventParams)
+          break
+        default:
+          cb()
+          break
+      }
+    }
+
+    const btnEvent = (eventParams: VxeButtonDefines.ClickEventParams, item: VxeToolbarPropTypes.ButtonConfig) => {
+      const { $event } = eventParams
+      const { connectTable } = internalData
+      const $table = connectTable
+      const { code } = item
+      if (code) {
+        handleDefaultCodeEvent(eventParams, item, () => {
+          if ($xeGGWrapper) {
+            $xeGGWrapper.triggerToolbarBtnEvent(item, $event)
+          } else {
+            const gCommandOpts = commands.get(code)
+            const params = { code, button: item, $table: $table as VxeTableConstructor, $grid: $xeGrid, $gantt: $xeGantt, $event }
+            if (gCommandOpts) {
+              const tCommandMethod = gCommandOpts.tableCommandMethod || gCommandOpts.commandMethod
+              if (tCommandMethod) {
+                tCommandMethod(params)
+              } else {
+                errLog('vxe.error.notCommands', [`[toolbar] ${code}`])
+              }
+            }
+            $xeToolbar.dispatchEvent('button-click', params, $event)
+          }
+        })
+      }
+    }
+
+    const tolEvent = (eventParams: VxeButtonDefines.ClickEventParams, item: VxeToolbarPropTypes.ToolConfig) => {
+      const { $event } = eventParams
+      const { connectTable } = internalData
+      const $table = connectTable
+      const { code } = item
+      if (code) {
+        handleDefaultCodeEvent(eventParams, item, () => {
+          if ($xeGGWrapper) {
+            $xeGGWrapper.triggerToolbarTolEvent(item, $event)
+          } else {
+            const gCommandOpts = commands.get(code)
+            const params = { code, button: null, tool: item, $table: $table as VxeTableConstructor, $grid: $xeGrid, $gantt: $xeGantt, $event }
+            if (gCommandOpts) {
+              const tCommandMethod = gCommandOpts.tableCommandMethod || gCommandOpts.commandMethod
+              if (tCommandMethod) {
+                tCommandMethod(params)
+              } else {
+                errLog('vxe.error.notCommands', [`[toolbar] ${code}`])
+              }
+            }
+            $xeToolbar.dispatchEvent('tool-click', params, $event)
+          }
+        })
+      }
+    }
+
+    const dispatchEvent = (type: ValueOf<VxeToolbarEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $toolbar: $xeToolbar }, params))
+    }
+
+    toolbarMethods = {
+      dispatchEvent,
+      syncUpdate (params) {
+        internalData.connectTable = params.$table as (VxeTableConstructor & VxeTablePrivateMethods)
+        reactData.columns = params.collectColumn
+        reactData.connectFlag++
+      }
+    }
+
+    Object.assign($xeToolbar, toolbarMethods)
+
+    const renderDropdowns = (item: VxeToolbarPropTypes.ButtonConfig, isBtn: boolean) => {
+      const { dropdowns } = item
+      const downVNs: VNode[] = []
+      if (dropdowns) {
+        return dropdowns.map((child, index) => {
+          if (child.visible === false) {
+            return createCommentVNode()
+          }
+          return VxeUIButtonComponent
+            ? h(VxeUIButtonComponent, {
+              key: index,
+              ...Object.assign({}, child, {
+                content: child.content || child.name,
+                options: undefined
+              }),
+              onClick: (eventParams) => isBtn ? btnEvent(eventParams, child) : tolEvent(eventParams, child)
+            })
+            : createCommentVNode()
+        })
+      }
+      return downVNs
+    }
+
+    /**
+     * 渲染按钮
+     */
+    const renderLeftBtns = () => {
+      const { buttons } = props
+      const { connectTable } = internalData
+      const $table = connectTable
+      const buttonsSlot = slots.buttons
+      const buttonPrefixSlot = slots.buttonPrefix || slots['button-prefix']
+      const buttonSuffixSlot = slots.buttonSuffix || slots['button-suffix']
+      const btnVNs: VxeComponentSlotType[] = []
+      if (buttons) {
+        buttons.forEach((item, index) => {
+          const { dropdowns, buttonRender } = item
+          if (item.visible !== false) {
+            const compConf = buttonRender ? renderer.get(buttonRender.name) : null
+            if (buttonRender && compConf && compConf.renderToolbarButton) {
+              const toolbarButtonClassName = compConf.toolbarButtonClassName
+              const params = { $grid: $xeGrid, $gantt: $xeGantt, $table: $table!, button: item }
+              btnVNs.push(
+                h('span', {
+                  key: `br${item.code || index}`,
+                  class: ['vxe-button--item', toolbarButtonClassName ? (XEUtils.isFunction(toolbarButtonClassName) ? toolbarButtonClassName(params) : toolbarButtonClassName) : '']
+                }, getSlotVNs(compConf.renderToolbarButton(buttonRender, params)))
+              )
+            } else {
+              if (VxeUIButtonComponent) {
+                btnVNs.push(
+                  h(VxeUIButtonComponent, {
+                    key: `bd${item.code || index}`,
+                    ...Object.assign({}, item, {
+                      content: item.content || item.name,
+                      options: undefined
+                    }),
+                    onClick: (eventParams) => btnEvent(eventParams, item)
+                  }, dropdowns && dropdowns.length
+                    ? {
+                        dropdowns: () => renderDropdowns(item, true)
+                      }
+                    : {})
+                )
+              }
+            }
+          }
+        })
+      }
+      return [
+        h('div', {
+          class: 'vxe-button--prefix-wrapper'
+        }, buttonPrefixSlot ? getSlotVNs(buttonPrefixSlot({ buttons: buttons || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })) : []),
+        h('div', {
+          class: 'vxe-button--item-wrapper'
+        }, buttonsSlot ? getSlotVNs(buttonsSlot({ buttons: buttons || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })) : btnVNs),
+        h('div', {
+          class: 'vxe-button--suffix-wrapper'
+        }, buttonSuffixSlot ? getSlotVNs(buttonSuffixSlot({ buttons: buttons || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })) : [])
+      ]
+    }
+
+    /**
+     * 渲染右侧工具
+     */
+    const renderRightTools = () => {
+      const { tools } = props
+      const { connectTable } = internalData
+      const $table = connectTable
+      const toolsSlot = slots.tools
+      const toolPrefixSlot = slots.toolPrefix || slots['tool-prefix']
+      const toolSuffixSlot = slots.toolSuffix || slots['tool-suffix']
+      const btnVNs: VxeComponentSlotType[] = []
+      if (tools) {
+        tools.forEach((item, tIndex) => {
+          const { dropdowns, toolRender } = item
+          if (item.visible !== false) {
+            const rdName = toolRender ? toolRender.name : null
+            const compConf = toolRender ? renderer.get(rdName) : null
+            if (toolRender && compConf && compConf.renderToolbarTool) {
+              const toolbarToolClassName = compConf.toolbarToolClassName
+              const params = { $grid: $xeGrid, $gantt: $xeGantt, $table: $table!, tool: item }
+              btnVNs.push(
+                h('span', {
+                  key: rdName as string,
+                  class: ['vxe-tool--item', toolbarToolClassName ? (XEUtils.isFunction(toolbarToolClassName) ? toolbarToolClassName(params) : toolbarToolClassName) : '']
+                }, getSlotVNs(compConf.renderToolbarTool(toolRender, params)))
+              )
+            } else {
+              if (VxeUIButtonComponent) {
+                btnVNs.push(
+                  h(VxeUIButtonComponent, {
+                    key: tIndex,
+                    ...Object.assign({}, item, {
+                      content: item.content || item.name,
+                      options: undefined
+                    }),
+                    onClick: (eventParams) => tolEvent(eventParams, item)
+                  }, dropdowns && dropdowns.length
+                    ? {
+                        dropdowns: () => renderDropdowns(item, false)
+                      }
+                    : {})
+                )
+              }
+            }
+          }
+        })
+      }
+      return [
+        h('div', {
+          class: 'vxe-tool--prefix-wrapper'
+        }, toolPrefixSlot ? getSlotVNs(toolPrefixSlot({ tools: tools || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })) : []),
+        h('div', {
+          class: 'vxe-tool--item-wrapper'
+        }, toolsSlot ? getSlotVNs(toolsSlot({ tools: tools || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })) : btnVNs),
+        h('div', {
+          class: 'vxe-tool--suffix-wrapper'
+        }, toolSuffixSlot ? getSlotVNs(toolSuffixSlot({ tools: tools || [], $grid: $xeGrid, $gantt: $xeGantt, $table: $table })) : [])
+      ]
+    }
+
+    const renderToolImport = () => {
+      const importOpts = computeImportOpts.value
+      return VxeUIButtonComponent
+        ? h(VxeUIButtonComponent, {
+          key: 'import',
+          circle: true,
+          icon: importOpts.icon || getIcon().TOOLBAR_TOOLS_IMPORT,
+          title: getI18n('vxe.toolbar.import'),
+          onClick: openImportEvent
+        })
+        : createCommentVNode()
+    }
+
+    const renderToolExport = () => {
+      const exportOpts = computeExportOpts.value
+      return VxeUIButtonComponent
+        ? h(VxeUIButtonComponent, {
+          key: 'export',
+          circle: true,
+          icon: exportOpts.icon || getIcon().TOOLBAR_TOOLS_EXPORT,
+          title: getI18n('vxe.toolbar.export'),
+          onClick: openExportEvent
+        })
+        : createCommentVNode()
+    }
+
+    const renderToolPrint = () => {
+      const printOpts = computePrintOpts.value
+      return VxeUIButtonComponent
+        ? h(VxeUIButtonComponent, {
+          key: 'print',
+          circle: true,
+          icon: printOpts.icon || getIcon().TOOLBAR_TOOLS_PRINT,
+          title: getI18n('vxe.toolbar.print'),
+          onClick: openPrintEvent
+        })
+        : createCommentVNode()
+    }
+
+    const renderToolRefresh = () => {
+      const refreshOpts = computeRefreshOpts.value
+      return VxeUIButtonComponent
+        ? h(VxeUIButtonComponent, {
+          key: 'refresh',
+          circle: true,
+          icon: reactData.isRefresh ? (refreshOpts.iconLoading || getIcon().TOOLBAR_TOOLS_REFRESH_LOADING) : (refreshOpts.icon || getIcon().TOOLBAR_TOOLS_REFRESH),
+          title: getI18n('vxe.toolbar.refresh'),
+          onClick: refreshEvent
+        })
+        : createCommentVNode()
+    }
+
+    const renderToolZoom = () => {
+      const zoomOpts = computeZoomOpts.value
+      return $xeGGWrapper && VxeUIButtonComponent
+        ? h(VxeUIButtonComponent, {
+          key: 'zoom',
+          circle: true,
+          icon: $xeGGWrapper.isMaximized() ? (zoomOpts.iconOut || getIcon().TOOLBAR_TOOLS_MINIMIZE) : (zoomOpts.iconIn || getIcon().TOOLBAR_TOOLS_FULLSCREEN),
+          title: getI18n(`vxe.toolbar.zoom${$xeGGWrapper.isMaximized() ? 'Out' : 'In'}`),
+          onClick: zoomEvent
+        })
+        : createCommentVNode()
+    }
+
+    const renderToolCustom = () => {
+      const customOpts = computeCustomOpts.value
+      const btnTrigger = computeTrigger.value
+      const customBtnOns: {
+        onClick?: typeof handleClickSettingEvent;
+        onMouseenter?: typeof handleMouseenterSettingEvent;
+        onMouseleave?: typeof handleMouseleaveSettingEvent;
+      } = {}
+      if (btnTrigger === 'manual') {
+        // 手动触发
+      } else if (btnTrigger === 'hover') {
+        // hover 触发
+        customBtnOns.onMouseenter = handleMouseenterSettingEvent
+        customBtnOns.onMouseleave = handleMouseleaveSettingEvent
+      } else {
+        // 点击触发
+        customBtnOns.onClick = handleClickSettingEvent
+      }
+      return VxeUIButtonComponent
+        ? h(VxeUIButtonComponent, {
+          key: 'custom',
+          circle: true,
+          icon: customOpts.icon || getIcon().TOOLBAR_TOOLS_CUSTOM,
+          title: getI18n('vxe.toolbar.custom'),
+          className: 'vxe-toolbar-custom-target',
+          ...customBtnOns
+        })
+        : createCommentVNode()
+    }
+
+    const renderVN = () => {
+      const { perfect, loading, refresh, zoom, custom, className } = props
+      const vSize = computeSize.value
+
+      return h('div', {
+        ref: refElem,
+        class: ['vxe-toolbar', className ? (XEUtils.isFunction(className) ? className({ $toolbar: $xeToolbar }) : className) : '', {
+          [`size--${vSize}`]: vSize,
+          'is--perfect': perfect,
+          'is--loading': loading
+        }]
+      }, [
+        h('div', {
+          class: 'vxe-buttons--wrapper'
+        }, renderLeftBtns()),
+        h('div', {
+          class: 'vxe-tools--wrapper'
+        }, renderRightTools()),
+        h('div', {
+          class: 'vxe-tools--operate'
+        }, [
+          props.import ? renderToolImport() : createCommentVNode(),
+          props.export ? renderToolExport() : createCommentVNode(),
+          props.print ? renderToolPrint() : createCommentVNode(),
+          refresh ? renderToolRefresh() : createCommentVNode(),
+          zoom && $xeGGWrapper ? renderToolZoom() : createCommentVNode(),
+          custom ? renderToolCustom() : createCommentVNode()
+        ])
+      ])
+    }
+
+    $xeToolbar.renderVN = renderVN
+
+    nextTick(() => {
+      const refreshOpts = computeRefreshOpts.value
+      const queryMethod = refreshOpts.queryMethod || refreshOpts.query
+      if (props.refresh && !$xeGGWrapper && !queryMethod) {
+        warnLog('vxe.error.notFunc', ['[toolbar] queryMethod'])
+      }
+
+      if (XEUtils.isPlainObject(props.custom)) {
+        warnLog('vxe.error.delProp', ['[toolbar] custom={...}', 'custom=boolean & custom-options={...}'])
+      }
+      if (XEUtils.isPlainObject(props.print)) {
+        warnLog('vxe.error.delProp', ['[toolbar] print={...}', 'print=boolean & print-options={...}'])
+      }
+      if (XEUtils.isPlainObject(props.export)) {
+        warnLog('vxe.error.delProp', ['[toolbar] export={...}', 'export=boolean & export-options={...}'])
+      }
+      if (XEUtils.isPlainObject(props.import)) {
+        warnLog('vxe.error.delProp', ['[toolbar] import={...}', 'import=boolean & import-options={...}'])
+      }
+      if (XEUtils.isPlainObject(props.refresh)) {
+        warnLog('vxe.error.delProp', ['[toolbar] refresh={...}', 'refresh=boolean & refresh-options={...}'])
+      }
+      if (XEUtils.isPlainObject(props.refresh)) {
+        warnLog('vxe.error.delProp', ['[toolbar] zoom={...}', 'zoom=boolean & zoom-options={...}'])
+      }
+
+      const customOpts = computeCustomOpts.value
+      if (customOpts.isFooter) {
+        warnLog('vxe.error.delProp', ['[toolbar] toolbar.custom.isFooter', 'table.custom-config.showFooter'])
+      }
+      if (customOpts.showFooter) {
+        warnLog('vxe.error.delProp', ['[toolbar] toolbar.custom.showFooter', 'table.custom-config.showFooter'])
+      }
+      if (customOpts.immediate) {
+        warnLog('vxe.error.delProp', ['[toolbar] toolbar.custom.immediate', 'table.custom-config.immediate'])
+      }
+      if (customOpts.trigger) {
+        warnLog('vxe.error.delProp', ['[toolbar] toolbar.custom.trigger', 'table.custom-config.trigger'])
+      }
+      if (props.refresh || props.import || props.export || props.print || props.zoom) {
+        if (!VxeUIButtonComponent) {
+          errLog('vxe.error.reqComp', ['vxe-button'])
+        }
+      }
+    })
+
+    onBeforeUnmount(() => {
+      XEUtils.assign(reactData, createReactData())
+      XEUtils.assign(internalData, createInternalData())
+    })
+
+    return $xeToolbar
+  },
+  render () {
+    return this.renderVN()
+  }
+})