vxe-table 3.12.0-beta.10 → 3.12.0-beta.12

package/es/table/module/export/mixin.js

@@ -2,7 +2,6 @@ import XEUtils from 'xe-utils';
 import { VxeUI } from '../../../ui';
 import { isColumnInfo, mergeBodyMethod, getCellValue } from '../../src/util';
 import { parseFile, formatText, eqEmptyValue } from '../../../ui/src/utils';
-import { browse } from '../../../ui/src/dom';
 import { createHtmlPage, getExportBlobByContent } from './util';
 import { warnLog, errLog } from '../../../ui/src/log';
 const { getI18n, renderer } = VxeUI;
@@ -10,15 +9,8 @@ let htmlCellElem;
 // 导入
 let fileForm;
 let fileInput;
-// 打印
-let printFrame;
 const csvBOM = '\ufeff';
 const enterSymbol = '\r\n';
-function createFrame() {
-    const frame = document.createElement('iframe');
-    frame.className = 'vxe-table--print-frame';
-    return frame;
-}
 function hasTreeChildren($xetable, row) {
     const treeOpts = $xetable.treeOpts;
     const childrenField = treeOpts.children || treeOpts.childrenField;
@@ -583,24 +575,25 @@ function clearColumnConvert(columns) {
         delete column.childNodes;
     }, { children: 'children' });
 }
-function handleExport($xetable, opts) {
+function handleExport($xeTable, opts) {
+    const $xeGrid = $xeTable.$xeGrid;
     const { remote, columns, colgroups, exportMethod, afterExportMethod } = opts;
     return new Promise(resolve => {
         if (remote) {
-            const params = { options: opts, $table: $xetable, $grid: $xetable.$xegrid };
+            const params = { options: opts, $table: $xeTable, $grid: $xeGrid };
             resolve(exportMethod ? exportMethod(params) : params);
         }
         else {
-            const datas = getExportData($xetable, opts);
-            resolve($xetable.preventEvent(null, 'event.export', { options: opts, columns, colgroups, datas }, () => {
-                return downloadFile($xetable, opts, getContent($xetable, opts, columns, datas));
+            const datas = getExportData($xeTable, opts);
+            resolve($xeTable.preventEvent(null, 'event.export', { options: opts, columns, colgroups, datas }, () => {
+                return downloadFile($xeTable, opts, getContent($xeTable, opts, columns, datas));
             }));
         }
     }).then((params) => {
         clearColumnConvert(columns);
         if (!opts.print) {
             if (afterExportMethod) {
-                afterExportMethod({ status: true, options: opts, $table: $xetable, $grid: $xetable.$xegrid });
+                afterExportMethod({ status: true, options: opts, $table: $xeTable, $grid: $xeGrid });
             }
         }
         return Object.assign({ status: true }, params);
@@ -608,7 +601,7 @@ function handleExport($xetable, opts) {
         clearColumnConvert(columns);
         if (!opts.print) {
             if (afterExportMethod) {
-                afterExportMethod({ status: false, options: opts, $table: $xetable, $grid: $xetable.$xegrid });
+                afterExportMethod({ status: false, options: opts, $table: $xeTable, $grid: $xeGrid });
             }
         }
         const params = { status: false };
@@ -948,58 +941,11 @@ export function readLocalFile(options = {}) {
         fileInput.click();
     });
 }
-function removePrintFrame() {
-    if (printFrame) {
-        if (printFrame.parentNode) {
-            try {
-                printFrame.contentDocument.write('');
-            }
-            catch (e) { }
-            printFrame.parentNode.removeChild(printFrame);
-        }
-        printFrame = null;
-    }
-}
-function appendPrintFrame() {
-    if (!printFrame.parentNode) {
-        document.body.appendChild(printFrame);
-    }
-}
-function afterPrintEvent() {
-    requestAnimationFrame(removePrintFrame);
-}
-export function handlePrint($xetable, opts, content) {
-    const { beforePrintMethod } = opts;
-    if (beforePrintMethod) {
-        content = beforePrintMethod({ content, options: opts, $table: $xetable }) || '';
-    }
-    content = createHtmlPage(opts, content);
-    const blob = getExportBlobByContent(content, opts);
-    if (browse.msie) {
-        removePrintFrame();
-        printFrame = createFrame();
-        appendPrintFrame();
-        printFrame.contentDocument.write(content);
-        printFrame.contentDocument.execCommand('print');
-    }
-    else {
-        if (!printFrame) {
-            printFrame = createFrame();
-            printFrame.onload = (evnt) => {
-                if (evnt.target.src) {
-                    evnt.target.contentWindow.onafterprint = afterPrintEvent;
-                    evnt.target.contentWindow.print();
-                }
-            };
-        }
-        appendPrintFrame();
-        printFrame.src = URL.createObjectURL(blob);
-    }
-}
-function handleExportAndPrint($xetable, options, isPrint) {
-    const { $xegrid, initStore, customOpts, collectColumn, footerTableData, treeConfig, mergeList, isGroup, exportParams, exportOpts } = $xetable;
-    const proxyOpts = $xegrid ? $xegrid.proxyOpts : {};
-    const selectRecords = $xetable.getCheckboxRecords();
+function handleExportAndPrint($xeTable, options, isPrint) {
+    const $xeGrid = $xeTable.$xeGrid;
+    const { initStore, customOpts, collectColumn, footerTableData, treeConfig, mergeList, isGroup, exportParams, exportOpts } = $xeTable;
+    const proxyOpts = $xeGrid ? $xeGrid.computeProxyOpts.value : {};
+    const selectRecords = $xeTable.getCheckboxRecords();
     const hasFooter = !!footerTableData.length;
     const hasTree = treeConfig;
     const hasMerge = !hasTree && mergeList.length;
@@ -1070,7 +1016,7 @@ function handleExportAndPrint($xetable, options, isPrint) {
         }
     });
     // 更新条件
-    Object.assign($xetable.exportStore, {
+    Object.assign($xeTable.exportStore, {
         columns: exportColumns,
         typeList,
         modeList,
@@ -1085,14 +1031,39 @@ function handleExportAndPrint($xetable, options, isPrint) {
     Object.assign(exportParams, {
         mode: selectRecords.length ? 'selected' : 'current'
     }, defOpts);
-    if (!modeList.some((item) => item.value === exportParams.mode)) {
+    const { filename, sheetName, mode, type } = exportParams;
+    if (filename) {
+        if (XEUtils.isFunction(filename)) {
+            exportParams.filename = filename({
+                options: defOpts,
+                $table: $xeTable,
+                $grid: $xeGrid
+            });
+        }
+        else {
+            exportParams.filename = `${filename}`;
+        }
+    }
+    if (sheetName) {
+        if (XEUtils.isFunction(sheetName)) {
+            exportParams.sheetName = sheetName({
+                options: defOpts,
+                $table: $xeTable,
+                $grid: $xeGrid
+            });
+        }
+        else {
+            exportParams.sheetName = `${sheetName}`;
+        }
+    }
+    if (!modeList.some(item => item.value === mode)) {
         exportParams.mode = modeList[0].value;
     }
-    if (!typeList.some((item) => item.value === exportParams.type)) {
+    if (!typeList.some(item => item.value === type)) {
         exportParams.type = typeList[0].value;
     }
     initStore.export = true;
-    return $xetable.$nextTick();
+    return $xeTable.$nextTick();
 }
 const getConvertColumns = (columns) => {
     const result = [];
@@ -1153,11 +1124,13 @@ export default {
         /**
          * 导出文件，支持 csv/html/xml/txt
          * 如果是树表格，则默认是导出所有节点
-         * 如果是启用了虚拟滚动，则只能导出数据源，可以配合 dataFilterMethod 函数自行转换数据
+         * 如果是启用了虚拟滚动，则只能导出数据源，可以配合 dataFilterMethod 函数转换数据
          * @param {Object} options 参数
          */
         _exportData(options) {
-            const { $xegrid, isGroup, tableGroupColumn, tableFullColumn, afterFullData, treeConfig, treeOpts, exportOpts } = this;
+            const $xeTable = this;
+            const $xeGrid = $xeTable.$xeGrid;
+            const { isGroup, tableGroupColumn, tableFullColumn, afterFullData, treeConfig, treeOpts, exportOpts } = this;
             const opts = Object.assign({
                 // filename: '',
                 // sheetName: '',
@@ -1182,13 +1155,13 @@ export default {
             }, exportOpts, {
                 print: false
             }, options);
-            const { type, mode, columns, original, beforeExportMethod, excludeFields, includeFields } = opts;
+            const { filename, sheetName, type, mode, columns, original, columnFilterMethod, beforeExportMethod, includeFields, excludeFields } = opts;
             let groups = [];
             const customCols = columns && columns.length ? columns : null;
+            const handleOptions = Object.assign({}, opts, { filename: '', sheetName: '', colgroups: [], columns: [], data: [] });
             // 如果设置源数据，则默认导出设置了字段的列
-            let columnFilterMethod = opts.columnFilterMethod;
             if (!customCols && !columnFilterMethod) {
-                columnFilterMethod = ({ column }) => {
+                handleOptions.columnFilterMethod = ({ column }) => {
                     if (excludeFields) {
                         if (XEUtils.includes(excludeFields, column.field)) {
                             return false;
@@ -1204,28 +1177,28 @@ export default {
                 };
             }
             if (customCols) {
-                opts._isCustomColumn = true;
-                groups = XEUtils.searchTree(XEUtils.mapTree(customCols, item => {
+                handleOptions._isCustomColumn = true;
+                groups = XEUtils.searchTree(XEUtils.mapTree(customCols, (item) => {
                     let targetColumn;
                     if (item) {
                         if (isColumnInfo(item)) {
                             targetColumn = item;
                         }
                         else if (XEUtils.isString(item)) {
-                            targetColumn = this.getColumnByField(item);
+                            targetColumn = $xeTable.getColumnByField(item);
                         }
                         else {
                             const colid = item.id || item.colId;
                             const type = item.type;
                             const field = item.field;
                             if (colid) {
-                                targetColumn = this.getColumnById(colid);
+                                targetColumn = $xeTable.getColumnById(colid);
                             }
                             else if (field && type) {
                                 targetColumn = tableFullColumn.find((column) => column.field === field && column.type === type);
                             }
                             else if (field) {
-                                targetColumn = this.getColumnByField(field);
+                                targetColumn = $xeTable.getColumnByField(field);
                             }
                             else if (type) {
                                 targetColumn = tableFullColumn.find((column) => column.type === type);
@@ -1236,7 +1209,7 @@ export default {
                 }, {
                     children: 'childNodes',
                     mapChildren: '_children'
-                }), (column, index) => isColumnInfo(column) && (!columnFilterMethod || columnFilterMethod({ column, $columnIndex: index })), {
+                }), (column, index) => isColumnInfo(column) && (!columnFilterMethod || columnFilterMethod({ column: column, $columnIndex: index })), {
                     children: '_children',
                     mapChildren: 'childNodes',
                     original: true
@@ -1254,16 +1227,40 @@ export default {
                 }
             }, { children: 'childNodes' });
             // 构建分组层级
-            opts.columns = cols;
-            opts.colgroups = convertToRows(groups);
-            if (!opts.filename) {
-                opts.filename = getI18n(opts.original ? 'vxe.table.expOriginFilename' : 'vxe.table.expFilename', [XEUtils.toDateString(Date.now(), 'yyyyMMddHHmmss')]);
+            handleOptions.columns = cols;
+            handleOptions.colgroups = convertToRows(groups);
+            if (filename) {
+                if (XEUtils.isFunction(filename)) {
+                    handleOptions.filename = filename({
+                        options: opts,
+                        $table: $xeTable,
+                        $grid: $xeGrid
+                    });
+                }
+                else {
+                    handleOptions.filename = `${filename}`;
+                }
+            }
+            if (!handleOptions.filename) {
+                handleOptions.filename = getI18n(handleOptions.original ? 'vxe.table.expOriginFilename' : 'vxe.table.expFilename', [XEUtils.toDateString(Date.now(), 'yyyyMMddHHmmss')]);
             }
-            if (!opts.sheetName) {
-                opts.sheetName = document.title;
+            if (sheetName) {
+                if (XEUtils.isFunction(sheetName)) {
+                    handleOptions.sheetName = sheetName({
+                        options: opts,
+                        $table: $xeTable,
+                        $grid: $xeGrid
+                    });
+                }
+                else {
+                    handleOptions.sheetName = `${sheetName}`;
+                }
+            }
+            if (!handleOptions.sheetName) {
+                handleOptions.sheetName = document.title || '';
             }
             // 检查类型，如果为自定义导出，则不需要校验类型
-            if (!opts.exportMethod && !XEUtils.includes(XEUtils.keys(exportOpts._typeMaps), type)) {
+            if (!handleOptions.exportMethod && !XEUtils.includes(XEUtils.keys(exportOpts._typeMaps), type)) {
                 errLog('vxe.error.notType', [type]);
                 if (process.env.NODE_ENV === 'development') {
                     if (['xlsx', 'pdf'].includes(type)) {
@@ -1273,17 +1270,17 @@ export default {
                 const params = { status: false };
                 return Promise.reject(params);
             }
-            if (!opts.print) {
+            if (!handleOptions.print) {
                 if (beforeExportMethod) {
-                    beforeExportMethod({ options: opts, $table: this, $grid: $xegrid });
+                    beforeExportMethod({ options: handleOptions, $table: $xeTable, $grid: $xeGrid });
                 }
             }
             if (!opts.data) {
-                opts.data = [];
+                handleOptions.data = [];
                 if (mode === 'selected') {
-                    const selectRecords = this.getCheckboxRecords();
+                    const selectRecords = $xeTable.getCheckboxRecords();
                     if (['html', 'pdf'].indexOf(type) > -1 && treeConfig) {
-                        opts.data = XEUtils.searchTree(this.getTableData().fullData, (item) => selectRecords.indexOf(item) > -1, Object.assign({}, treeOpts, { data: '_row' }));
+                        opts.data = XEUtils.searchTree($xeTable.getTableData().fullData, item => $xeTable.findRowIndexOf(selectRecords, item) > -1, Object.assign({}, treeOpts, { data: '_row' }));
                     }
                     else {
                         opts.data = selectRecords;
@@ -1291,12 +1288,16 @@ export default {
                 }
                 else if (mode === 'all') {
                     if (process.env.NODE_ENV === 'development') {
-                        if (!$xegrid) {
+                        if (!$xeGrid) {
                             warnLog('vxe.error.errProp', ['all', 'mode=current,selected']);
                         }
                     }
-                    if ($xegrid && !opts.remote) {
-                        const { beforeQueryAll, afterQueryAll, ajax = {}, props = {} } = $xegrid.proxyOpts;
+                    if ($xeGrid && !handleOptions.remote) {
+                        const { reactData: gridReactData } = $xeGrid;
+                        const { computeProxyOpts } = $xeGrid.getComputeMaps();
+                        const { sortData } = gridReactData;
+                        const proxyOpts = computeProxyOpts.value;
+                        const { beforeQueryAll, afterQueryAll, ajax = {}, props = {} } = proxyOpts;
                         const ajaxMethods = ajax.queryAll;
                         const queryAllSuccessMethods = ajax.queryAllSuccess;
                         const queryAllErrorMethods = ajax.queryAllError;
@@ -1307,24 +1308,24 @@ export default {
                         }
                         if (ajaxMethods) {
                             const params = {
-                                $table: this,
-                                $grid: $xegrid,
-                                sort: $xegrid.sortData,
-                                filters: $xegrid.filterData,
-                                form: $xegrid.formData,
-                                target: ajaxMethods,
-                                options: opts
+                                $table: $xeTable,
+                                $grid: $xeGrid,
+                                sort: sortData.length ? sortData[0] : {},
+                                sorts: sortData,
+                                filters: gridReactData.filterData,
+                                form: gridReactData.formData,
+                                options: handleOptions
                             };
                             return Promise.resolve((beforeQueryAll || ajaxMethods)(params))
                                 .then(rest => {
-                                opts.data = (props.list ? XEUtils.get(rest, props.list) : rest) || [];
+                                handleOptions.data = (props.list ? XEUtils.get(rest, props.list) : rest) || [];
                                 if (afterQueryAll) {
                                     afterQueryAll(params);
                                 }
                                 if (queryAllSuccessMethods) {
                                     queryAllSuccessMethods(Object.assign(Object.assign({}, params), { response: rest }));
                                 }
-                                return handleExport(this, opts);
+                                return handleExport($xeTable, handleOptions);
                             })
                                 .catch((rest) => {
                                 if (queryAllErrorMethods) {
@@ -1335,10 +1336,10 @@ export default {
                     }
                 }
                 else if (mode === 'current') {
-                    opts.data = afterFullData;
+                    handleOptions.data = afterFullData;
                 }
             }
-            return handleExport(this, opts);
+            return handleExport($xeTable, opts);
         },
         _importByFile(file, options) {
             const opts = Object.assign({}, options);
@@ -1376,6 +1377,8 @@ export default {
             return readLocalFile(options);
         },
         _print(options) {
+            const $xeTable = this;
+            const $xeGrid = $xeTable.$xeGrid;
             const opts = Object.assign({
                 original: false
                 // beforePrintMethod
@@ -1385,22 +1388,73 @@ export default {
                 remote: false,
                 print: true
             });
-            if (!opts.sheetName) {
-                opts.sheetName = document.title;
+            const { sheetName } = opts;
+            let printTitle = '';
+            if (sheetName) {
+                if (XEUtils.isFunction(sheetName)) {
+                    printTitle = sheetName({
+                        options: opts,
+                        $table: $xeTable,
+                        $grid: $xeGrid
+                    });
+                }
+                else {
+                    printTitle = `${sheetName}`;
+                }
             }
-            return new Promise(resolve => {
-                if (opts.content) {
-                    resolve(handlePrint(this, opts, opts.content));
+            if (!printTitle) {
+                printTitle = document.title || '';
+            }
+            const beforePrintMethod = opts.beforePrintMethod;
+            const tableHtml = opts.html || opts.content;
+            return new Promise((resolve, reject) => {
+                if (VxeUI.print) {
+                    if (tableHtml) {
+                        resolve(VxeUI.print({
+                            title: printTitle,
+                            html: tableHtml,
+                            customStyle: opts.style,
+                            beforeMethod: beforePrintMethod
+                                ? ({ html }) => {
+                                    return beforePrintMethod({
+                                        html,
+                                        content: html,
+                                        options: opts,
+                                        $table: $xeTable
+                                    });
+                                }
+                                : undefined
+                        }));
+                    }
+                    else {
+                        resolve($xeTable.exportData(opts).then(({ content }) => {
+                            return VxeUI.print({
+                                title: printTitle,
+                                html: content,
+                                customStyle: opts.style,
+                                beforeMethod: beforePrintMethod
+                                    ? ({ html }) => {
+                                        return beforePrintMethod({
+                                            html,
+                                            content: html,
+                                            options: opts,
+                                            $table: $xeTable
+                                        });
+                                    }
+                                    : undefined
+                            });
+                        }));
+                    }
                 }
                 else {
-                    resolve(this.exportData(opts).then(({ content }) => {
-                        return handlePrint(this, opts, content);
-                    }));
+                    const e = { status: false };
+                    reject(e);
                 }
             });
         },
         _getPrintHtml(options) {
-            const { printOpts } = this;
+            const $xeTable = this;
+            const printOpts = $xeTable.computePrintOpts;
             const opts = Object.assign({
                 original: false
                 // beforePrintMethod
@@ -1410,7 +1464,7 @@ export default {
                 remote: false,
                 print: true
             });
-            return this.exportData(opts).then(({ content }) => {
+            return $xeTable.exportData(opts).then(({ content }) => {
                 return {
                     html: content
                 };

package/es/table/src/methods.js

@@ -531,7 +531,9 @@ const handleScrollToRowColumn = ($xeTable, fieldOrColumn, row) => {
     return $xeTable.$nextTick();
 };
 function handleRecalculateLayout($xeTable, reFull) {
+    const internalData = $xeTable;
     const el = $xeTable.$refs.refElem;
+    internalData.reRunTime = Date.now();
     if (!el || !el.clientWidth) {
         return $xeTable.$nextTick();
     }
@@ -2705,27 +2707,34 @@ const Methods = {
      * 刷新布局
      */
     recalculate(reFull) {
+        const $xeTable = this;
+        const internalData = $xeTable;
         return new Promise(resolve => {
-            const $xeTable = this;
-            const internalData = $xeTable;
-            const { rceTimeout } = internalData;
+            const { rceTimeout, reRunTime } = internalData;
+            const resizeOpts = $xeTable.computeResizeOpts;
+            const refreshDelay = resizeOpts.refreshDelay || 20;
             const el = $xeTable.$refs.refElem;
             if (el && el.clientWidth) {
                 $xeTable.autoCellWidth();
             }
             if (rceTimeout) {
                 clearTimeout(rceTimeout);
-                $xeTable.$nextTick(() => {
-                    resolve();
-                });
+                if (reRunTime && reRunTime + (refreshDelay - 5) < Date.now()) {
+                    resolve(handleRecalculateLayout($xeTable, !!reFull));
+                }
+                else {
+                    $xeTable.$nextTick(() => {
+                        resolve();
+                    });
+                }
             }
             else {
                 resolve(handleRecalculateLayout($xeTable, !!reFull));
             }
             internalData.rceTimeout = setTimeout(() => {
                 internalData.rceTimeout = undefined;
-                resolve(handleRecalculateLayout($xeTable, !!reFull));
-            }, 15);
+                handleRecalculateLayout($xeTable, !!reFull);
+            }, refreshDelay);
         });
     },
     calcCellWidth() {
@@ -5062,7 +5071,7 @@ const Methods = {
         const { editStore, editConfig, editOpts } = this;
         const { actived } = editStore;
         const cell = evnt.currentTarget;
-        params.cell = cell;
+        params = Object.assign({ cell }, params);
         if (isEnableConf(editConfig) && editOpts.trigger === 'dblclick') {
             if (!actived.args || evnt.currentTarget !== actived.args.cell) {
                 if (editOpts.mode === 'row') {

package/es/table/src/table.js

@@ -475,6 +475,9 @@ export default {
             return 0;
         },
         rowHeightMaps() {
+            return this.computeRowHeightMaps;
+        },
+        computeRowHeightMaps() {
             return {
                 default: 48,
                 medium: 44,
@@ -1112,18 +1115,11 @@ export default {
             });
         }
         if (this.autoResize) {
-            const handleWrapperResize = this.resizeOpts.refreshDelay ? XEUtils.throttle(() => this.recalculate(true), this.resizeOpts.refreshDelay, { leading: true, trailing: true }) : null;
-            const resizeObserver = globalResize.create(handleWrapperResize
-                ? () => {
-                    if (this.autoResize) {
-                        handleWrapperResize();
-                    }
+            const resizeObserver = globalResize.create(() => {
+                if (this.autoResize) {
+                    this.recalculate(true);
                 }
-                : () => {
-                    if (this.autoResize) {
-                        this.recalculate(true);
-                    }
-                });
+            });
             resizeObserver.observe(this.$el);
             resizeObserver.observe(this.getParentElem());
             this.$resize = resizeObserver;

package/es/toolbar/src/toolbar.js

@@ -346,17 +346,23 @@ export default defineVxeComponent({
         /**
          * 渲染按钮
          */
-        renderBtns(h) {
+        renderLeftBtns(h) {
             // 使用已安装的组件，如果未安装则不渲染
             const VxeUIButtonComponent = VxeUI.getComponent('VxeButton');
             const $xeToolbar = this;
             const props = $xeToolbar;
+            const slots = $xeToolbar.$scopedSlots;
             const internalData = $xeToolbar.internalData;
             const $xeGrid = $xeToolbar.$xeGrid;
             const { buttons } = props;
             const { connectTable } = internalData;
             const $table = connectTable;
+            const buttonPrefixSlot = slots.buttonPrefix || slots['button-prefix'];
+            const buttonSuffixSlot = slots.buttonSuffix || slots['button-suffix'];
             const btnVNs = [];
+            if (buttonPrefixSlot) {
+                btnVNs.push(...getSlotVNs(buttonPrefixSlot.call($xeToolbar, { buttons: buttons || [], $grid: $xeGrid, $table: $table })));
+            }
             if (buttons) {
                 buttons.forEach((item) => {
                     const { dropdowns, buttonRender } = item;
@@ -405,6 +411,9 @@ export default defineVxeComponent({
                     }
                 });
             }
+            if (buttonSuffixSlot) {
+                btnVNs.push(...getSlotVNs(buttonSuffixSlot.call($xeToolbar, { buttons: buttons || [], $grid: $xeGrid, $table: $table })));
+            }
             return btnVNs;
         },
         /**
@@ -415,12 +424,18 @@ export default defineVxeComponent({
             const VxeUIButtonComponent = VxeUI.getComponent('VxeButton');
             const $xeToolbar = this;
             const props = $xeToolbar;
+            const slots = $xeToolbar.$scopedSlots;
             const internalData = $xeToolbar.internalData;
             const $xeGrid = $xeToolbar.$xeGrid;
             const { tools } = props;
             const { connectTable } = internalData;
             const $table = connectTable;
+            const toolPrefixSlot = slots.toolPrefix || slots['tool-prefix'];
+            const toolSuffixSlot = slots.toolSuffix || slots['tool-suffix'];
             const btnVNs = [];
+            if (toolPrefixSlot) {
+                btnVNs.push(...getSlotVNs(toolPrefixSlot.call($xeToolbar, { tools: tools || [], $grid: $xeGrid, $table: $table })));
+            }
             if (tools) {
                 tools.forEach((item, tIndex) => {
                     const { dropdowns, toolRender } = item;
@@ -472,6 +487,9 @@ export default defineVxeComponent({
                     }
                 });
             }
+            if (toolSuffixSlot) {
+                btnVNs.push(...getSlotVNs(toolSuffixSlot.call($xeToolbar, { tools: tools || [], $grid: $xeGrid, $table: $table })));
+            }
             return btnVNs;
         },
         renderToolImport(h) {
@@ -625,7 +643,7 @@ export default defineVxeComponent({
             }, [
                 h('div', {
                     class: 'vxe-buttons--wrapper'
-                }, buttonsSlot ? buttonsSlot({ $grid: $xeGrid, $table: $table }) : $xeToolbar.renderBtns(h)),
+                }, buttonsSlot ? buttonsSlot({ $grid: $xeGrid, $table: $table }) : $xeToolbar.renderLeftBtns(h)),
                 h('div', {
                     class: 'vxe-tools--wrapper'
                 }, toolsSlot ? toolsSlot({ $grid: $xeGrid, $table: $table }) : $xeToolbar.renderRightTools(h)),