vxe-table 4.14.0-beta.0 → 4.14.0-beta.2

package/README.en.md

@@ -63,7 +63,8 @@ Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
 * [x] Virtual scroll
 * [x] Virtual merger
 * [x] CSS Variable Theme
-* [x] ([Enterprise](https://vxetable.cn/pluginDocs/)) Data grouping and aggregation
+* [x] ([Enterprise](https://vxetable.cn/pluginDocs/)) Grouping summary
+* [x] ([Enterprise](https://vxetable.cn/pluginDocs/)) Aggregation
 * [x] ([Enterprise](https://vxetable.cn/pluginDocs/)) Cell area selection
 * [x] ([Enterprise](https://vxetable.cn/pluginDocs/)) Cell copy & paste
 * [x] ([Enterprise](https://vxetable.cn/pluginDocs/)) Cell find and replace

package/README.ja-JP.md

@@ -63,7 +63,8 @@
 * [x] 仮想スクロール
 * [x] 仮想マージ
 * [x] CSS変数テーマ
-* [x] ([エンタープライズ](https://vxetable.cn/pluginDocs/)) 数据分组与聚合函数
+* [x] ([エンタープライズ](https://vxetable.cn/pluginDocs/)) 数据汇总
+* [x] ([エンタープライズ](https://vxetable.cn/pluginDocs/)) 聚合函数
 * [x] ([エンタープライズ](https://vxetable.cn/pluginDocs/)) セル領域選択
 * [x] ([エンタープライズ](https://vxetable.cn/pluginDocs/)) セルのコピー＆ペースト
 * [x] ([エンタープライズ](https://vxetable.cn/pluginDocs/)) セルの検索と置換

package/README.md

@@ -30,12 +30,14 @@
     * [x] v3.13 重构展开行功能，同时支持展开行与虚拟渲染和冻结列
     * [x] v3.14 重构虚拟渲染，支持百万级数据渲染、渲染性能及流畅度大幅提升
     * [x] v3.15 优化虚拟渲染，提升 Chrome、Safari、Firefox 流畅度极兼容性
+    * [x] v3.16 重构虚拟渲染，提高渲染与拖拽效果流畅度
   * **V4**
     * [x] ~~v4.0 基于 vue3.2+，只支持现代浏览器，不支持 IE（2020-03-01 ~ 2024-12-01 已停止维护）~~
     * [x] v4.7 基于 vue3.2+，内部重构，拆分 Table 库和 UI 库，只支持现代浏览器，不支持 IE
     * [x] v4.11 重构展开行功能，同时支持展开行与虚拟渲染和冻结列
     * [x] v4.12 重构虚拟渲染，支持百万级数据渲染、渲染性能及流畅度大幅提升
     * [x] v4.13 优化虚拟渲染，提升 Chrome、Safari、Firefox 流畅度极兼容性
+    * [x] v4.14 重构虚拟渲染，提高渲染与拖拽效果流畅度
 * 版本计划
     * [ ] 优化展开行与冻结列
     * [ ] 优化虚拟渲染，支持千万级数据渲染
@@ -102,8 +104,8 @@
 * [x] 虚拟滚动
 * [x] 虚拟合并
 * [x] CSS 变量主题
-* [x] ([企业版](https://vxetable.cn/pluginDocs/)) 数据分组与聚合函数
-* [x] ([企业版](https://vxetable.cn/pluginDocs/)) 数据分组与聚合函数
+* [x] ([企业版](https://vxetable.cn/pluginDocs/)) 数据汇总
+* [x] ([企业版](https://vxetable.cn/pluginDocs/)) 聚合函数
 * [x] ([企业版](https://vxetable.cn/pluginDocs/)) 单元格区域选取
 * [x] ([企业版](https://vxetable.cn/pluginDocs/)) 单元格复制/粘贴
 * [x] ([企业版](https://vxetable.cn/pluginDocs/)) 单元格查找和替换

package/README.zh-TW.md

@@ -62,7 +62,8 @@ Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
 * [x] 虛擬滾動
 * [x] 虛擬合併
 * [x] CSS 變量主題
-* [x] ([企業版](https://vxetable.cn/pluginDocs/)) 数据分组与聚合函数
+* [x] ([企業版](https://vxetable.cn/pluginDocs/)) 数据汇总
+* [x] ([企業版](https://vxetable.cn/pluginDocs/)) 聚合函数
 * [x] ([企業版](https://vxetable.cn/pluginDocs/)) 儲存格區域選取
 * [x] ([企業版](https://vxetable.cn/pluginDocs/)) 儲存格複製/粘貼
 * [x] ([企業版](https://vxetable.cn/pluginDocs/)) 儲存格查找和替換

package/es/grid/src/grid.js

@@ -9,7 +9,7 @@ import VxeToolbarComponent from '../../toolbar/src/toolbar';
 import tableComponentProps from '../../table/src/props';
 import tableComponentEmits from '../../table/src/emits';
 import { getSlotVNs } from '../../ui/src/vn';
-import { errLog } from '../../ui/src/log';
+import { warnLog, errLog } from '../../ui/src/log';
 const { getConfig, getI18n, commands, hooks, useFns, createEvent, globalEvents, GLOBAL_EVENT_KEYS, renderEmptyElement } = VxeUI;
 const tableComponentPropKeys = Object.keys(tableComponentProps);
 const tableComponentMethodKeys = ['clearAll', 'syncData', 'updateData', 'loadData', 'reloadData', 'reloadRow', 'loadColumn', 'reloadColumn', 'getRowNode', 'getColumnNode', 'getRowIndex', 'getVTRowIndex', 'getVMRowIndex', 'getColumnIndex', 'getVTColumnIndex', 'getVMColumnIndex', 'setRow', 'createData', 'createRow', 'revertData', 'clearData', 'isRemoveByRow', 'isInsertByRow', 'isUpdateByRow', 'getColumns', 'getColumnById', 'getColumnByField', 'getTableColumn', 'getFullColumns', 'getData', 'getCheckboxRecords', 'getParentRow', 'getTreeRowChildren', 'getTreeParentRow', 'getRowSeq', 'getRowById', 'getRowid', 'getTableData', 'getFullData', 'setColumnFixed', 'clearColumnFixed', 'setColumnWidth', 'getColumnWidth', 'setRowHeightConf', 'getRowHeightConf', 'setRowHeight', 'getRowHeight', 'hideColumn', 'showColumn', 'resetColumn', 'refreshColumn', 'refreshScroll', 'recalculate', 'closeTooltip', 'isAllCheckboxChecked', 'isAllCheckboxIndeterminate', 'getCheckboxIndeterminateRecords', 'setCheckboxRow', 'setCheckboxRowKey', 'isCheckedByCheckboxRow', 'isCheckedByCheckboxRowKey', 'isIndeterminateByCheckboxRow', 'isIndeterminateByCheckboxRowKey', 'toggleCheckboxRow', 'setAllCheckboxRow', 'getRadioReserveRecord', 'clearRadioReserve', 'getCheckboxReserveRecords', 'clearCheckboxReserve', 'toggleAllCheckboxRow', 'clearCheckboxRow', 'setCurrentRow', 'isCheckedByRadioRow', 'isCheckedByRadioRowKey', 'setRadioRow', 'setRadioRowKey', 'clearCurrentRow', 'clearRadioRow', 'getCurrentRecord', 'getRadioRecord', 'getCurrentColumn', 'setCurrentColumn', 'clearCurrentColumn', 'setPendingRow', 'togglePendingRow', 'hasPendingByRow', 'isPendingByRow', 'getPendingRecords', 'clearPendingRow', 'sort', 'setSort', 'clearSort', 'clearSortByEvent', 'isSort', 'getSortColumns', 'closeFilter', 'isFilter', 'clearFilterByEvent', 'isActiveFilterByColumn', 'isRowExpandLoaded', 'clearRowExpandLoaded', 'reloadRowExpand', 'reloadRowExpand', 'toggleRowExpand', 'setAllRowExpand', 'setRowExpand', 'isExpandByRow', 'isRowExpandByRow', 'clearRowExpand', 'clearRowExpandReserve', 'getRowExpandRecords', 'getTreeExpandRecords', 'isTreeExpandLoaded', 'clearTreeExpandLoaded', 'reloadTreeExpand', 'reloadTreeChilds', 'toggleTreeExpand', 'setAllTreeExpand', 'setTreeExpand', 'isTreeExpandByRow', 'clearTreeExpand', 'clearTreeExpandReserve', 'getScroll', 'scrollTo', 'scrollToRow', 'scrollToColumn', 'clearScroll', 'updateFooter', 'updateStatus', 'setMergeCells', 'removeInsertRow', 'removeMergeCells', 'getMergeCells', 'clearMergeCells', 'setMergeFooterItems', 'removeMergeFooterItems', 'getMergeFooterItems', 'clearMergeFooterItems', 'getCustomStoreData', 'setRowGroupExpand', 'setAllRowGroupExpand', 'clearRowGroupExpand', 'isRowGroupExpandByRow', 'isRowGroupRecord', 'isAggregateRecord', 'isAggregateExpandByRow', 'getAggregateContentByRow', 'getAggregateRowChildren', 'setRowGroups', 'clearRowGroups', 'openTooltip', 'moveColumnTo', 'moveRowTo', 'getCellLabel', 'getCellElement', 'focus', 'blur', 'connect'];
@@ -95,11 +95,11 @@ export default defineVxeComponent({
         });
         const computeIsRespMsg = computed(() => {
             const proxyOpts = computeProxyOpts.value;
-            return XEUtils.isBoolean(proxyOpts.message) ? proxyOpts.message : proxyOpts.showResponseMsg;
+            return !!(XEUtils.isBoolean(proxyOpts.message) ? proxyOpts.message : proxyOpts.showResponseMsg);
         });
         const computeIsActiveMsg = computed(() => {
             const proxyOpts = computeProxyOpts.value;
-            return proxyOpts.showActiveMsg;
+            return !!proxyOpts.showActiveMsg;
         });
         const computePagerOpts = computed(() => {
             return Object.assign({}, getConfig().grid.pagerConfig, props.pagerConfig);
@@ -139,11 +139,12 @@ export default defineVxeComponent({
             return rest;
         });
         const computeTableProps = computed(() => {
-            const { seqConfig, pagerConfig, loading, editConfig, proxyConfig } = props;
-            const { isZMax, tableLoading, tablePage } = reactData;
+            const { seqConfig, pagerConfig, editConfig, proxyConfig } = props;
+            const { isZMax, tablePage } = reactData;
             const tableExtendProps = computeTableExtendProps.value;
             const proxyOpts = computeProxyOpts.value;
             const pagerOpts = computePagerOpts.value;
+            const isLoading = computeIsLoading.value;
             const tProps = Object.assign({}, tableExtendProps);
             if (isZMax) {
                 if (tableExtendProps.maxHeight) {
@@ -154,7 +155,7 @@ export default defineVxeComponent({
                 }
             }
             if (proxyConfig && isEnableConf(proxyOpts)) {
-                tProps.loading = loading || tableLoading;
+                tProps.loading = isLoading;
                 if (pagerConfig && proxyOpts.seq && isEnableConf(pagerOpts)) {
                     tProps.seqConfig = Object.assign({}, seqConfig, { startIndex: (tablePage.currentPage - 1) * tablePage.pageSize });
                 }
@@ -204,6 +205,13 @@ export default defineVxeComponent({
             const pagerOpts = computePagerOpts.value;
             return pagerOpts.total;
         });
+        const computeIsLoading = computed(() => {
+            const { loading, proxyConfig } = props;
+            const { tableLoading } = reactData;
+            const proxyOpts = computeProxyOpts.value;
+            const { showLoading } = proxyOpts;
+            return loading || (tableLoading && showLoading && proxyConfig && isEnableConf(proxyOpts));
+        });
         const refMaps = {
             refElem,
             refTable,
@@ -346,12 +354,12 @@ export default defineVxeComponent({
                 reactData.sortData = params.sortList;
                 if (proxyConfig && isEnableConf(proxyOpts)) {
                     reactData.tablePage.currentPage = 1;
-                    gridMethods.commitProxy('query').then((rest) => {
-                        gridMethods.dispatchEvent('proxy-query', rest, params.$event);
+                    $xeGrid.commitProxy('query').then((rest) => {
+                        $xeGrid.dispatchEvent('proxy-query', rest, params.$event);
                     });
                 }
             }
-            gridMethods.dispatchEvent('sort-change', params, params.$event);
+            $xeGrid.dispatchEvent('sort-change', params, params.$event);
         };
         const filterChangeEvent = (params) => {
             const $xeTable = refTable.value;
@@ -364,12 +372,12 @@ export default defineVxeComponent({
                 reactData.filterData = params.filterList;
                 if (proxyConfig && isEnableConf(proxyOpts)) {
                     reactData.tablePage.currentPage = 1;
-                    gridMethods.commitProxy('query').then((rest) => {
-                        gridMethods.dispatchEvent('proxy-query', rest, params.$event);
+                    $xeGrid.commitProxy('query').then((rest) => {
+                        $xeGrid.dispatchEvent('proxy-query', rest, params.$event);
                     });
                 }
             }
-            gridMethods.dispatchEvent('filter-change', params, params.$event);
+            $xeGrid.dispatchEvent('filter-change', params, params.$event);
         };
         const submitFormEvent = (params) => {
             const { proxyConfig } = props;
@@ -378,32 +386,32 @@ export default defineVxeComponent({
                 return;
             }
             if (proxyConfig && isEnableConf(proxyOpts)) {
-                gridMethods.commitProxy('reload').then((rest) => {
-                    gridMethods.dispatchEvent('proxy-query', Object.assign(Object.assign({}, rest), { isReload: true }), params.$event);
+                $xeGrid.commitProxy('reload').then((rest) => {
+                    $xeGrid.dispatchEvent('proxy-query', Object.assign(Object.assign({}, rest), { isReload: true }), params.$event);
                 });
             }
-            gridMethods.dispatchEvent('form-submit', params, params.$event);
+            $xeGrid.dispatchEvent('form-submit', params, params.$event);
         };
         const resetFormEvent = (params) => {
+            const $xeTable = refTable.value;
             const { proxyConfig } = props;
             const { $event } = params;
             const proxyOpts = computeProxyOpts.value;
-            const $xeTable = refTable.value;
             if (proxyConfig && isEnableConf(proxyOpts)) {
                 $xeTable.clearScroll();
-                gridMethods.commitProxy('reload').then((rest) => {
-                    gridMethods.dispatchEvent('proxy-query', Object.assign(Object.assign({}, rest), { isReload: true }), $event);
+                $xeGrid.commitProxy('reload').then((rest) => {
+                    $xeGrid.dispatchEvent('proxy-query', Object.assign(Object.assign({}, rest), { isReload: true }), $event);
                 });
             }
-            gridMethods.dispatchEvent('form-reset', params, $event);
+            $xeGrid.dispatchEvent('form-reset', params, $event);
         };
         const submitInvalidEvent = (params) => {
-            gridMethods.dispatchEvent('form-submit-invalid', params, params.$event);
+            $xeGrid.dispatchEvent('form-submit-invalid', params, params.$event);
         };
         const collapseEvent = (params) => {
             const { $event } = params;
-            gridMethods.dispatchEvent('form-toggle-collapse', params, $event);
-            gridMethods.dispatchEvent('form-collapse', params, $event);
+            $xeGrid.dispatchEvent('form-toggle-collapse', params, $event);
+            $xeGrid.dispatchEvent('form-collapse', params, $event);
         };
         const handleZoom = (isMax) => {
             const { isZMax } = reactData;
@@ -414,9 +422,9 @@ export default defineVxeComponent({
                 }
             }
             return nextTick()
-                .then(() => gridExtendTableMethods.recalculate(true))
+                .then(() => $xeGrid.recalculate(true))
                 .then(() => {
-                setTimeout(() => gridExtendTableMethods.recalculate(true), 15);
+                setTimeout(() => $xeGrid.recalculate(true), 15);
                 return reactData.isZMax;
             });
         };
@@ -560,12 +568,13 @@ export default defineVxeComponent({
          * 渲染表格顶部区域
          */
         const renderTop = () => {
-            if (slots.top) {
+            const topSlot = slots.top;
+            if (topSlot) {
                 return h('div', {
                     ref: refTopWrapper,
                     key: 'top',
                     class: 'vxe-grid--top-wrapper'
-                }, slots.top({ $grid: $xeGrid }));
+                }, topSlot({ $grid: $xeGrid }));
             }
             return renderEmptyElement($xeGrid);
         };
@@ -734,6 +743,30 @@ export default defineVxeComponent({
             const type = XEUtils.camelCase(`on-${name}`);
             tableCompEvents[type] = (...args) => emit(name, ...args);
         });
+        const getDefaultFormData = () => {
+            const formOpts = computeFormOpts.value;
+            if (formOpts.items) {
+                const fData = {};
+                formOpts.items.forEach(item => {
+                    const { field, itemRender } = item;
+                    if (field) {
+                        let itemValue = null;
+                        if (itemRender) {
+                            const { defaultValue } = itemRender;
+                            if (XEUtils.isFunction(defaultValue)) {
+                                itemValue = defaultValue({ item });
+                            }
+                            else if (!XEUtils.isUndefined(defaultValue)) {
+                                itemValue = defaultValue;
+                            }
+                        }
+                        fData[field] = itemValue;
+                    }
+                });
+                return fData;
+            }
+            return {};
+        };
         const initProxy = () => {
             const { proxyConfig, formConfig } = props;
             const { proxyInited } = reactData;
@@ -741,30 +774,13 @@ export default defineVxeComponent({
             const formOpts = computeFormOpts.value;
             if (proxyConfig && isEnableConf(proxyOpts)) {
                 if (formConfig && isEnableConf(formOpts) && proxyOpts.form && formOpts.items) {
-                    const fData = {};
-                    formOpts.items.forEach(item => {
-                        const { field, itemRender } = item;
-                        if (field) {
-                            let itemValue = null;
-                            if (itemRender) {
-                                const { defaultValue } = itemRender;
-                                if (XEUtils.isFunction(defaultValue)) {
-                                    itemValue = defaultValue({ item });
-                                }
-                                else if (!XEUtils.isUndefined(defaultValue)) {
-                                    itemValue = defaultValue;
-                                }
-                            }
-                            fData[field] = itemValue;
-                        }
-                    });
-                    reactData.formData = fData;
+                    reactData.formData = getDefaultFormData();
                 }
                 if (!proxyInited) {
                     reactData.proxyInited = true;
                     if (proxyOpts.autoLoad !== false) {
-                        nextTick().then(() => gridMethods.commitProxy('_init')).then((rest) => {
-                            gridMethods.dispatchEvent('proxy-query', Object.assign(Object.assign({}, rest), { isInited: true }), new Event('init'));
+                        nextTick().then(() => gridMethods.commitProxy('initial')).then((rest) => {
+                            gridMethods.dispatchEvent('proxy-query', Object.assign(Object.assign({}, rest), { isInited: true }), new Event('initial'));
                         });
                     }
                 }
@@ -774,7 +790,7 @@ export default defineVxeComponent({
             const zoomOpts = computeZoomOpts.value;
             const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
             if (isEsc && reactData.isZMax && zoomOpts.escRestore !== false) {
-                gridPrivateMethods.triggerZoomEvent(evnt);
+                $xeGrid.triggerZoomEvent(evnt);
             }
         };
         const dispatchEvent = (type, params, evnt) => {
@@ -790,7 +806,7 @@ export default defineVxeComponent({
              * @param {String/Object} code 字符串或对象
              */
             commitProxy(proxyTarget, ...args) {
-                const { toolbarConfig, pagerConfig, editRules, validConfig } = props;
+                const { proxyConfig, toolbarConfig, pagerConfig, editRules, validConfig } = props;
                 const { tablePage } = reactData;
                 const isActiveMsg = computeIsActiveMsg.value;
                 const isRespMsg = computeIsRespMsg.value;
@@ -800,7 +816,7 @@ export default defineVxeComponent({
                 const { beforeQuery, afterQuery, beforeDelete, afterDelete, beforeSave, afterSave, ajax = {} } = proxyOpts;
                 const resConfigs = proxyOpts.response || proxyOpts.props || {};
                 const $xeTable = refTable.value;
-                const formData = getFormData();
+                let formData = getFormData();
                 let button = null;
                 let code = null;
                 if (XEUtils.isString(proxyTarget)) {
@@ -842,14 +858,14 @@ export default defineVxeComponent({
                         break;
                     case 'reset_custom':
                         return $xeTable.resetCustom(true);
-                    case '_init':
+                    case 'initial':
                     case 'reload':
                     case 'query': {
                         const ajaxMethods = ajax.query;
                         const querySuccessMethods = ajax.querySuccess;
                         const queryErrorMethods = ajax.queryError;
                         if (ajaxMethods) {
-                            const isInited = code === '_init';
+                            const isInited = code === 'initial';
                             const isReload = code === 'reload';
                             if (!isInited && reactData.tableLoading) {
                                 return nextTick();
@@ -859,6 +875,7 @@ export default defineVxeComponent({
                             let pageParams = {};
                             if (pagerConfig) {
                                 if (isInited || isReload) {
+                                    // 重置分页
                                     tablePage.currentPage = 1;
                                 }
                                 if (isEnableConf(pagerOpts)) {
@@ -866,26 +883,41 @@ export default defineVxeComponent({
                                 }
                             }
                             if (isInited) {
-                                let defaultSort = null;
+                                // 重置代理表单数据
+                                if (proxyConfig && isEnableConf(proxyOpts) && proxyOpts.form) {
+                                    formData = getDefaultFormData();
+                                    reactData.formData = formData;
+                                }
                                 if ($xeTable) {
+                                    const tableInternalData = $xeTable.internalData;
+                                    const { tableFullColumn, fullColumnFieldData } = tableInternalData;
                                     const { computeSortOpts } = $xeTable.getComputeMaps();
                                     const sortOpts = computeSortOpts.value;
-                                    defaultSort = sortOpts.defaultSort;
-                                }
-                                // 如果使用默认排序
-                                if (defaultSort) {
-                                    if (!XEUtils.isArray(defaultSort)) {
-                                        defaultSort = [defaultSort];
-                                    }
-                                    sortList = defaultSort.map((item) => {
-                                        return {
-                                            field: item.field,
-                                            property: item.field,
-                                            order: item.order
-                                        };
+                                    let defaultSort = sortOpts.defaultSort;
+                                    tableFullColumn.forEach((column) => {
+                                        column.order = null;
                                     });
-                                }
-                                if ($xeTable) {
+                                    // 如果使用默认排序
+                                    if (defaultSort) {
+                                        if (!XEUtils.isArray(defaultSort)) {
+                                            defaultSort = [defaultSort];
+                                        }
+                                        sortList = defaultSort.map((item) => {
+                                            const { field, order } = item;
+                                            const colRest = fullColumnFieldData[field];
+                                            if (colRest) {
+                                                const column = colRest.column;
+                                                if (column) {
+                                                    column.order = order;
+                                                }
+                                            }
+                                            return {
+                                                field,
+                                                property: field,
+                                                order
+                                            };
+                                        });
+                                    }
                                     filterList = $xeTable.getCheckedFilters();
                                 }
                             }
@@ -1222,23 +1254,23 @@ export default defineVxeComponent({
             },
             triggerToolbarCommitEvent(params, evnt) {
                 const { code } = params;
-                return gridMethods.commitProxy(params, evnt).then((rest) => {
+                return $xeGrid.commitProxy(params, evnt).then((rest) => {
                     if (code && rest && rest.status && ['query', 'reload', 'delete', 'save'].includes(code)) {
-                        gridMethods.dispatchEvent(code === 'delete' || code === 'save' ? `proxy-${code}` : 'proxy-query', Object.assign(Object.assign({}, rest), { isReload: code === 'reload' }), evnt);
+                        $xeGrid.dispatchEvent(code === 'delete' || code === 'save' ? `proxy-${code}` : 'proxy-query', Object.assign(Object.assign({}, rest), { isReload: code === 'reload' }), evnt);
                     }
                 });
             },
             triggerToolbarBtnEvent(button, evnt) {
-                gridPrivateMethods.triggerToolbarCommitEvent(button, evnt);
-                gridMethods.dispatchEvent('toolbar-button-click', { code: button.code, button }, evnt);
+                $xeGrid.triggerToolbarCommitEvent(button, evnt);
+                $xeGrid.dispatchEvent('toolbar-button-click', { code: button.code, button }, evnt);
             },
             triggerToolbarTolEvent(tool, evnt) {
-                gridPrivateMethods.triggerToolbarCommitEvent(tool, evnt);
-                gridMethods.dispatchEvent('toolbar-tool-click', { code: tool.code, tool }, evnt);
+                $xeGrid.triggerToolbarCommitEvent(tool, evnt);
+                $xeGrid.dispatchEvent('toolbar-tool-click', { code: tool.code, tool }, evnt);
             },
             triggerZoomEvent(evnt) {
-                gridMethods.zoom();
-                gridMethods.dispatchEvent('zoom', { type: reactData.isZMax ? 'max' : 'revert' }, evnt);
+                $xeGrid.zoom();
+                $xeGrid.dispatchEvent('zoom', { type: reactData.isZMax ? 'max' : 'revert' }, evnt);
             }
         };
         Object.assign($xeGrid, gridExtendTableMethods, gridMethods, gridPrivateMethods, {
@@ -1266,6 +1298,22 @@ export default defineVxeComponent({
                 return $xeGrid.loadColumn(columns);
             }
         });
+        const renderVN = () => {
+            const vSize = computeSize.value;
+            const styles = computeStyles.value;
+            const isLoading = computeIsLoading.value;
+            return h('div', {
+                ref: refElem,
+                class: ['vxe-grid', {
+                        [`size--${vSize}`]: vSize,
+                        'is--animat': !!props.animat,
+                        'is--round': props.round,
+                        'is--maximize': reactData.isZMax,
+                        'is--loading': isLoading
+                    }],
+                style: styles
+            }, renderLayout());
+        };
         const columnFlag = ref(0);
         watch(() => props.columns ? props.columns.length : -1, () => {
             columnFlag.value++;
@@ -1304,6 +1352,7 @@ export default defineVxeComponent({
         onMounted(() => {
             nextTick(() => {
                 const { columns } = props;
+                const proxyOpts = computeProxyOpts.value;
                 if (props.formConfig) {
                     if (!VxeUIFormComponent) {
                         errLog('vxe.error.reqComp', ['vxe-form']);
@@ -1315,14 +1364,13 @@ export default defineVxeComponent({
                     }
                 }
                 // const { data, columns, proxyConfig } = props
-                // const proxyOpts = computeProxyOpts.value
                 // const formOpts = computeFormOpts.value
                 // if (isEnableConf(proxyConfig) && (data || (proxyOpts.form && formOpts.data))) {
                 //   errLog('vxe.error.errConflicts', ['grid.data', 'grid.proxy-config'])
                 // }
-                //   if (proxyOpts.props) {
-                //     warnLog('vxe.error.delProp', ['proxy-config.props', 'proxy-config.response'])
-                //   }
+                if (proxyOpts.props) {
+                    warnLog('vxe.error.delProp', ['proxy-config.props', 'proxy-config.response']);
+                }
                 if (columns && columns.length) {
                     $xeGrid.loadColumn(columns);
                 }
@@ -1334,21 +1382,6 @@ export default defineVxeComponent({
         onUnmounted(() => {
             globalEvents.off($xeGrid, 'keydown');
         });
-        const renderVN = () => {
-            const vSize = computeSize.value;
-            const styles = computeStyles.value;
-            return h('div', {
-                ref: refElem,
-                class: ['vxe-grid', {
-                        [`size--${vSize}`]: vSize,
-                        'is--animat': !!props.animat,
-                        'is--round': props.round,
-                        'is--maximize': reactData.isZMax,
-                        'is--loading': props.loading || reactData.tableLoading
-                    }],
-                style: styles
-            }, renderLayout());
-        };
         $xeGrid.renderVN = renderVN;
         provide('$xeGrid', $xeGrid);
         return $xeGrid;