vxe-table 3.8.24 → 3.9.0-rc.0

package/es/toolbar/src/toolbar.js

@@ -0,0 +1,675 @@
+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';
+const { getConfig, getIcon, getI18n, renderer, commands, createEvent, globalMixins, renderEmptyElement } = VxeUI;
+export default defineVxeComponent({
+    name: 'VxeToolbar',
+    mixins: [
+        globalMixins.sizeMixin
+    ],
+    props: {
+        loading: Boolean,
+        refresh: [Boolean, Object],
+        import: [Boolean, Object],
+        export: [Boolean, Object],
+        print: [Boolean, Object],
+        zoom: [Boolean, Object],
+        custom: [Boolean, Object],
+        buttons: {
+            type: Array,
+            default: () => getConfig().toolbar.buttons
+        },
+        tools: {
+            type: Array,
+            default: () => getConfig().toolbar.tools
+        },
+        perfect: {
+            type: Boolean,
+            default: () => getConfig().toolbar.perfect
+        },
+        size: {
+            type: String,
+            default: () => getConfig().toolbar.size || getConfig().size
+        },
+        className: [String, Function]
+    },
+    inject: {
+        $xeGrid: {
+            default: null
+        }
+    },
+    data() {
+        const xID = XEUtils.uniqueId();
+        const reactData = {
+            isRefresh: false,
+            connectFlag: 0,
+            columns: []
+        };
+        const internalData = {
+            connectTable: null
+        };
+        return {
+            xID,
+            reactData,
+            internalData
+        };
+    },
+    computed: Object.assign(Object.assign({}, {}), { computeRefreshOpts() {
+            const $xeToolbar = this;
+            const props = $xeToolbar;
+            return Object.assign({}, getConfig().toolbar.refresh, props.refresh);
+        },
+        computeImportOpts() {
+            const $xeToolbar = this;
+            const props = $xeToolbar;
+            return Object.assign({}, getConfig().toolbar.import, props.import);
+        },
+        computeExportOpts() {
+            const $xeToolbar = this;
+            const props = $xeToolbar;
+            return Object.assign({}, getConfig().toolbar.export, props.export);
+        },
+        computePrintOpts() {
+            const $xeToolbar = this;
+            const props = $xeToolbar;
+            return Object.assign({}, getConfig().toolbar.print, props.print);
+        },
+        computeZoomOpts() {
+            const $xeToolbar = this;
+            const props = $xeToolbar;
+            return Object.assign({}, getConfig().toolbar.zoom, props.zoom);
+        },
+        computeCustomOpts() {
+            const $xeToolbar = this;
+            const props = $xeToolbar;
+            return Object.assign({}, getConfig().toolbar.custom, props.custom);
+        },
+        computeTableCustomOpts() {
+            const $xeToolbar = this;
+            const reactData = $xeToolbar.reactData;
+            const internalData = $xeToolbar.internalData;
+            const { connectTable } = internalData;
+            const $table = connectTable;
+            if (reactData.connectFlag || $table) {
+                if ($table) {
+                    return $table.computeCustomOpts;
+                }
+            }
+            return { trigger: '' };
+        },
+        computeTrigger() {
+            const $xeToolbar = this;
+            const tableCustomOpts = $xeToolbar.computeTableCustomOpts;
+            return tableCustomOpts.trigger;
+        } }),
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeToolbar = this;
+            $xeToolbar.$emit(type, createEvent(evnt, { $toolbar: $xeToolbar }, params));
+        },
+        fintTable() {
+            const { $children } = this.$parent;
+            const selfIndex = $children.indexOf(this);
+            return XEUtils.find($children, (comp, index) => comp && comp.loadData && index > selfIndex && comp.$vnode.componentOptions.tag === 'vxe-table');
+        },
+        syncUpdate(params) {
+            const $xeToolbar = this;
+            const reactData = $xeToolbar.reactData;
+            const internalData = $xeToolbar.internalData;
+            internalData.connectTable = params.$table;
+            reactData.columns = params.collectColumn;
+            reactData.connectFlag++;
+        },
+        checkTable() {
+            const $xeToolbar = this;
+            const internalData = $xeToolbar.internalData;
+            const { connectTable } = internalData;
+            const $table = connectTable;
+            if ($table) {
+                return true;
+            }
+            errLog('vxe.error.barUnableLink');
+        },
+        handleClickSettingEvent({ $event }) {
+            const $xeToolbar = this;
+            const internalData = $xeToolbar.internalData;
+            const { connectTable } = internalData;
+            const $table = connectTable;
+            if ($table) {
+                if ($table.triggerCustomEvent) {
+                    $table.triggerCustomEvent($event);
+                }
+                else {
+                    errLog('vxe.error.reqModule', ['VxeTableCustomModule']);
+                }
+            }
+        },
+        handleMouseenterSettingEvent({ $event }) {
+            const $xeToolbar = this;
+            const internalData = $xeToolbar.internalData;
+            const { connectTable } = internalData;
+            const $table = connectTable;
+            if ($table) {
+                $table.customOpenEvent($event);
+            }
+            else {
+                errLog('vxe.error.reqModule', ['VxeTableCustomModule']);
+            }
+        },
+        handleMouseleaveSettingEvent({ $event }) {
+            const $xeToolbar = this;
+            const internalData = $xeToolbar.internalData;
+            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);
+            }
+        },
+        refreshEvent({ $event }) {
+            const $xeToolbar = this;
+            const reactData = $xeToolbar.reactData;
+            const $xeGrid = $xeToolbar.$xeGrid;
+            const { isRefresh } = reactData;
+            const refreshOpts = $xeToolbar.computeRefreshOpts;
+            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 ($xeGrid) {
+                    reactData.isRefresh = true;
+                    $xeGrid.triggerToolbarCommitEvent({ code: refreshOpts.code || 'reload' }, $event).catch((e) => e).then(() => {
+                        reactData.isRefresh = false;
+                    });
+                }
+            }
+        },
+        zoomEvent({ $event }) {
+            const $xeToolbar = this;
+            const $xeGrid = $xeToolbar.$xeGrid;
+            if ($xeGrid) {
+                $xeGrid.triggerZoomEvent($event);
+            }
+        },
+        btnEvent(evnt, item) {
+            const $xeToolbar = this;
+            const internalData = $xeToolbar.internalData;
+            const $xeGrid = $xeToolbar.$xeGrid;
+            const { connectTable } = internalData;
+            const $table = connectTable;
+            const { code } = item;
+            if (code) {
+                if ($xeGrid) {
+                    $xeGrid.triggerToolbarBtnEvent(item, evnt);
+                }
+                else {
+                    const gCommandOpts = commands.get(code);
+                    const params = { code, button: item, $table: $table, $grid: $xeGrid, $event: evnt };
+                    if (gCommandOpts) {
+                        const tCommandMethod = gCommandOpts.tableCommandMethod || gCommandOpts.commandMethod;
+                        if (tCommandMethod) {
+                            tCommandMethod(params);
+                        }
+                        else {
+                            if (process.env.NODE_ENV === 'development') {
+                                errLog('vxe.error.notCommands', [code]);
+                            }
+                        }
+                    }
+                    $xeToolbar.dispatchEvent('button-click', params, evnt);
+                }
+            }
+        },
+        tolEvent(evnt, item) {
+            const $xeToolbar = this;
+            const internalData = $xeToolbar.internalData;
+            const $xeGrid = $xeToolbar.$xeGrid;
+            const { connectTable } = internalData;
+            const $table = connectTable;
+            const { code } = item;
+            if (code) {
+                if ($xeGrid) {
+                    $xeGrid.triggerToolbarTolEvent(item, evnt);
+                }
+                else {
+                    const gCommandOpts = commands.get(code);
+                    const params = { code, tool: item, $table: $table, $grid: $xeGrid, $event: evnt };
+                    if (gCommandOpts) {
+                        const tCommandMethod = gCommandOpts.tableCommandMethod || gCommandOpts.commandMethod;
+                        if (tCommandMethod) {
+                            tCommandMethod(params);
+                        }
+                        else {
+                            if (process.env.NODE_ENV === 'development') {
+                                errLog('vxe.error.notCommands', [code]);
+                            }
+                        }
+                    }
+                    $xeToolbar.dispatchEvent('tool-click', params, evnt);
+                }
+            }
+        },
+        importEvent() {
+            const $xeToolbar = this;
+            const internalData = $xeToolbar.internalData;
+            if ($xeToolbar.checkTable()) {
+                const { connectTable } = internalData;
+                const $table = connectTable;
+                if ($table) {
+                    $table.openImport();
+                }
+            }
+        },
+        exportEvent() {
+            const $xeToolbar = this;
+            const internalData = $xeToolbar.internalData;
+            if ($xeToolbar.checkTable()) {
+                const { connectTable } = internalData;
+                const $table = connectTable;
+                if ($table) {
+                    $table.openExport();
+                }
+            }
+        },
+        printEvent() {
+            const $xeToolbar = this;
+            const internalData = $xeToolbar.internalData;
+            if ($xeToolbar.checkTable()) {
+                const { connectTable } = internalData;
+                const $table = connectTable;
+                if ($table) {
+                    $table.openPrint();
+                }
+            }
+        },
+        //
+        // Render
+        //
+        renderDropdowns(h, item, isBtn) {
+            // 使用已安装的组件，如果未安装则不渲染
+            const VxeUIButtonComponent = VxeUI.getComponent('VxeButton');
+            const $xeToolbar = this;
+            const { dropdowns } = item;
+            const downVNs = [];
+            if (dropdowns) {
+                return dropdowns.map((child, index) => {
+                    if (child.visible === false) {
+                        return renderEmptyElement($xeToolbar);
+                    }
+                    return VxeUIButtonComponent
+                        ? h(VxeUIButtonComponent, {
+                            key: index,
+                            props: {
+                                disabled: child.disabled,
+                                loading: child.loading,
+                                type: child.type,
+                                mode: child.mode,
+                                icon: child.icon,
+                                circle: child.circle,
+                                round: child.round,
+                                status: child.status,
+                                content: child.name
+                            },
+                            on: {
+                                click: ({ $event }) => isBtn ? $xeToolbar.btnEvent($event, child) : $xeToolbar.tolEvent($event, child)
+                            }
+                        })
+                        : renderEmptyElement($xeToolbar);
+                });
+            }
+            return downVNs;
+        },
+        /**
+         * 渲染按钮
+         */
+        renderBtns(h) {
+            // 使用已安装的组件，如果未安装则不渲染
+            const VxeUIButtonComponent = VxeUI.getComponent('VxeButton');
+            const $xeToolbar = this;
+            const props = $xeToolbar;
+            const internalData = $xeToolbar.internalData;
+            const $xeGrid = $xeToolbar.$xeGrid;
+            const { buttons } = props;
+            const { connectTable } = internalData;
+            const $table = connectTable;
+            const btnVNs = [];
+            if (buttons) {
+                buttons.forEach((item) => {
+                    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, $table: $table, button: item };
+                            btnVNs.push(h('span', {
+                                class: ['vxe-button--item', toolbarButtonClassName ? (XEUtils.isFunction(toolbarButtonClassName) ? toolbarButtonClassName(params) : toolbarButtonClassName) : '']
+                            }, getSlotVNs(compConf.renderToolbarButton(h, buttonRender, params))));
+                        }
+                        else {
+                            if (VxeUIButtonComponent) {
+                                btnVNs.push(h(VxeUIButtonComponent, {
+                                    props: {
+                                        disabled: item.disabled,
+                                        loading: item.loading,
+                                        type: item.type,
+                                        mode: item.mode,
+                                        icon: item.icon,
+                                        circle: item.circle,
+                                        round: item.round,
+                                        status: item.status,
+                                        content: item.name,
+                                        permissionCode: item.permissionCode,
+                                        destroyOnClose: item.destroyOnClose,
+                                        placement: item.placement,
+                                        transfer: item.transfer
+                                    },
+                                    on: {
+                                        click: ({ $event }) => this.btnEvent($event, item)
+                                    },
+                                    scopedSlots: dropdowns && dropdowns.length
+                                        ? {
+                                            dropdowns: () => this.renderDropdowns(h, item, true)
+                                        }
+                                        : {}
+                                }));
+                            }
+                        }
+                    }
+                });
+            }
+            return btnVNs;
+        },
+        /**
+         * 渲染右侧工具
+         */
+        renderRightTools(h) {
+            // 使用已安装的组件，如果未安装则不渲染
+            const VxeUIButtonComponent = VxeUI.getComponent('VxeButton');
+            const $xeToolbar = this;
+            const props = $xeToolbar;
+            const internalData = $xeToolbar.internalData;
+            const $xeGrid = $xeToolbar.$xeGrid;
+            const { tools } = props;
+            const { connectTable } = internalData;
+            const $table = connectTable;
+            const btnVNs = [];
+            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, $table: $table, tool: item };
+                            btnVNs.push(h('span', {
+                                key: rdName,
+                                class: ['vxe-tool--item', toolbarToolClassName ? (XEUtils.isFunction(toolbarToolClassName) ? toolbarToolClassName(params) : toolbarToolClassName) : '']
+                            }, getSlotVNs(compConf.renderToolbarTool(h, toolRender, params))));
+                        }
+                        else {
+                            if (VxeUIButtonComponent) {
+                                btnVNs.push(h(VxeUIButtonComponent, {
+                                    key: tIndex,
+                                    props: {
+                                        disabled: item.disabled,
+                                        loading: item.loading,
+                                        type: item.type,
+                                        mode: item.mode,
+                                        icon: item.icon,
+                                        circle: item.circle,
+                                        round: item.round,
+                                        status: item.status,
+                                        content: item.name,
+                                        destroyOnClose: item.destroyOnClose,
+                                        placement: item.placement,
+                                        transfer: item.transfer
+                                    },
+                                    on: {
+                                        click: ({ $event }) => $xeToolbar.tolEvent($event, item)
+                                    },
+                                    scopedSlots: dropdowns && dropdowns.length
+                                        ? {
+                                            dropdowns: () => $xeToolbar.renderDropdowns(h, item, false)
+                                        }
+                                        : {}
+                                }));
+                            }
+                        }
+                    }
+                });
+            }
+            return btnVNs;
+        },
+        renderToolImport(h) {
+            // 使用已安装的组件，如果未安装则不渲染
+            const VxeUIButtonComponent = VxeUI.getComponent('VxeButton');
+            const $xeToolbar = this;
+            const importOpts = $xeToolbar.computeImportOpts;
+            return VxeUIButtonComponent
+                ? h(VxeUIButtonComponent, {
+                    key: 'import',
+                    props: {
+                        circle: true,
+                        icon: importOpts.icon || getIcon().TOOLBAR_TOOLS_IMPORT,
+                        title: getI18n('vxe.toolbar.import')
+                    },
+                    on: {
+                        click: $xeToolbar.importEvent
+                    }
+                })
+                : renderEmptyElement($xeToolbar);
+        },
+        renderToolExport(h) {
+            // 使用已安装的组件，如果未安装则不渲染
+            const VxeUIButtonComponent = VxeUI.getComponent('VxeButton');
+            const $xeToolbar = this;
+            const exportOpts = $xeToolbar.computeExportOpts;
+            return VxeUIButtonComponent
+                ? h(VxeUIButtonComponent, {
+                    key: 'export',
+                    props: {
+                        circle: true,
+                        icon: exportOpts.icon || getIcon().TOOLBAR_TOOLS_EXPORT,
+                        title: getI18n('vxe.toolbar.export')
+                    },
+                    on: {
+                        click: $xeToolbar.exportEvent
+                    }
+                })
+                : renderEmptyElement($xeToolbar);
+        },
+        renderToolPrint(h) {
+            // 使用已安装的组件，如果未安装则不渲染
+            const VxeUIButtonComponent = VxeUI.getComponent('VxeButton');
+            const $xeToolbar = this;
+            const printOpts = $xeToolbar.computePrintOpts;
+            return VxeUIButtonComponent
+                ? h(VxeUIButtonComponent, {
+                    key: 'print',
+                    props: {
+                        circle: true,
+                        icon: printOpts.icon || getIcon().TOOLBAR_TOOLS_PRINT,
+                        title: getI18n('vxe.toolbar.print')
+                    },
+                    on: {
+                        click: $xeToolbar.printEvent
+                    }
+                })
+                : renderEmptyElement($xeToolbar);
+        },
+        renderToolRefresh(h) {
+            // 使用已安装的组件，如果未安装则不渲染
+            const VxeUIButtonComponent = VxeUI.getComponent('VxeButton');
+            const $xeToolbar = this;
+            const reactData = $xeToolbar.reactData;
+            const refreshOpts = $xeToolbar.computeRefreshOpts;
+            return VxeUIButtonComponent
+                ? h(VxeUIButtonComponent, {
+                    key: 'refresh',
+                    props: {
+                        circle: true,
+                        icon: reactData.isRefresh ? (refreshOpts.iconLoading || getIcon().TOOLBAR_TOOLS_REFRESH_LOADING) : (refreshOpts.icon || getIcon().TOOLBAR_TOOLS_REFRESH),
+                        title: getI18n('vxe.toolbar.refresh')
+                    },
+                    on: {
+                        click: $xeToolbar.refreshEvent
+                    }
+                })
+                : renderEmptyElement($xeToolbar);
+        },
+        renderToolZoom(h) {
+            // 使用已安装的组件，如果未安装则不渲染
+            const VxeUIButtonComponent = VxeUI.getComponent('VxeButton');
+            const $xeToolbar = this;
+            const $xeGrid = $xeToolbar.$xeGrid;
+            const zoomOpts = $xeToolbar.computeZoomOpts;
+            return $xeGrid && VxeUIButtonComponent
+                ? h(VxeUIButtonComponent, {
+                    key: 'zoom',
+                    props: {
+                        circle: true,
+                        icon: $xeGrid.isMaximized() ? (zoomOpts.iconOut || getIcon().TOOLBAR_TOOLS_MINIMIZE) : (zoomOpts.iconIn || getIcon().TOOLBAR_TOOLS_FULLSCREEN),
+                        title: getI18n(`vxe.toolbar.zoom${$xeGrid.isMaximized() ? 'Out' : 'In'}`)
+                    },
+                    on: {
+                        click: $xeToolbar.zoomEvent
+                    }
+                })
+                : renderEmptyElement($xeToolbar);
+        },
+        renderToolCustom(h) {
+            // 使用已安装的组件，如果未安装则不渲染
+            const VxeUIButtonComponent = VxeUI.getComponent('VxeButton');
+            const $xeToolbar = this;
+            const customOpts = $xeToolbar.computeCustomOpts;
+            const btnTrigger = $xeToolbar.computeTrigger;
+            const customBtnOns = {};
+            if (btnTrigger === 'manual') {
+                // 手动触发
+            }
+            else if (btnTrigger === 'hover') {
+                // hover 触发
+                customBtnOns.mouseenter = $xeToolbar.handleMouseenterSettingEvent;
+                customBtnOns.mouseleave = $xeToolbar.handleMouseleaveSettingEvent;
+            }
+            else {
+                // 点击触发
+                customBtnOns.click = $xeToolbar.handleClickSettingEvent;
+            }
+            return VxeUIButtonComponent
+                ? h(VxeUIButtonComponent, {
+                    key: 'custom',
+                    props: {
+                        circle: true,
+                        icon: customOpts.icon || getIcon().TOOLBAR_TOOLS_CUSTOM,
+                        title: getI18n('vxe.toolbar.custom'),
+                        className: 'vxe-toolbar-custom-target'
+                    },
+                    on: customBtnOns
+                })
+                : renderEmptyElement($xeToolbar);
+        },
+        renderVN(h) {
+            const $xeToolbar = this;
+            const props = $xeToolbar;
+            const slots = $xeToolbar.$scopedSlots;
+            const internalData = $xeToolbar.internalData;
+            const $xeGrid = $xeToolbar.$xeGrid;
+            const { perfect, loading, refresh, zoom, custom, className } = props;
+            const { connectTable } = internalData;
+            const $table = connectTable;
+            const toolsSlot = slots.tools;
+            const buttonsSlot = slots.buttons;
+            const vSize = $xeToolbar.computeSize;
+            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'
+                }, buttonsSlot ? buttonsSlot({ $grid: $xeGrid, $table: $table }) : $xeToolbar.renderBtns(h)),
+                h('div', {
+                    class: 'vxe-tools--wrapper'
+                }, toolsSlot ? toolsSlot({ $grid: $xeGrid, $table: $table }) : $xeToolbar.renderRightTools(h)),
+                h('div', {
+                    class: 'vxe-tools--operate'
+                }, [
+                    props.import ? $xeToolbar.renderToolImport(h) : renderEmptyElement($xeToolbar),
+                    props.export ? $xeToolbar.renderToolExport(h) : renderEmptyElement($xeToolbar),
+                    props.print ? $xeToolbar.renderToolPrint(h) : renderEmptyElement($xeToolbar),
+                    refresh ? $xeToolbar.renderToolRefresh(h) : renderEmptyElement($xeToolbar),
+                    zoom && $xeGrid ? $xeToolbar.renderToolZoom(h) : renderEmptyElement($xeToolbar),
+                    custom ? $xeToolbar.renderToolCustom(h) : renderEmptyElement($xeToolbar)
+                ])
+            ]);
+        }
+    },
+    created() {
+        const $xeToolbar = this;
+        const props = $xeToolbar;
+        const $xeGrid = $xeToolbar.$xeGrid;
+        $xeToolbar.$nextTick(() => {
+            const { refresh } = props;
+            const refreshOpts = $xeToolbar.computeRefreshOpts;
+            const $xetable = this.fintTable();
+            const queryMethod = refreshOpts.queryMethod || refreshOpts.query;
+            if (refresh && !$xeGrid && !queryMethod) {
+                warnLog('vxe.error.notFunc', ['queryMethod']);
+            }
+            if ($xetable) {
+                $xetable.connect(this);
+            }
+            const customOpts = $xeToolbar.computeCustomOpts;
+            if (process.env.NODE_ENV === 'development') {
+                if (customOpts.isFooter) {
+                    warnLog('vxe.error.delProp', ['toolbar.custom.isFooter', 'table.custom-config.showFooter']);
+                }
+                if (customOpts.showFooter) {
+                    warnLog('vxe.error.delProp', ['toolbar.custom.showFooter', 'table.custom-config.showFooter']);
+                }
+                if (customOpts.immediate) {
+                    warnLog('vxe.error.delProp', ['toolbar.custom.immediate', 'table.custom-config.immediate']);
+                }
+                if (customOpts.trigger) {
+                    warnLog('vxe.error.delProp', ['toolbar.custom.trigger', 'table.custom-config.trigger']);
+                }
+            }
+        });
+        if (process.env.NODE_ENV === 'development') {
+            // 使用已安装的组件，如果未安装则不渲染
+            const VxeUIButtonComponent = VxeUI.getComponent('VxeButton');
+            if (props.refresh || props.import || props.export || props.print || props.zoom) {
+                if (!VxeUIButtonComponent) {
+                    errLog('vxe.error.reqComp', ['vxe-button']);
+                }
+            }
+        }
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+});