vxe-table 4.23.5 → 4.23.7

package/es/grid/src/grid.js

@@ -1,1819 +1,1756 @@
-import { h, ref, computed, provide, reactive, onBeforeUnmount, watch, nextTick, onMounted } from 'vue';
-import { defineVxeComponent } from '../../ui/src/comp';
-import XEUtils from 'xe-utils';
-import { getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/utils';
-import { getOffsetHeight, getPaddingTopBottomSize, getDomNode, toCssUnit, hasClass } from '../../ui/src/dom';
-import { VxeUI } from '../../ui';
-import { gridProps } from './props';
-import { gridEmits } from './emits';
-import { getSlotVNs } from '../../ui/src/vn';
-import { createComponentLog } from '../../ui/src/log';
-import { tableEmits } from '../../table/src/emits';
-import { tableProps } from '../../table/src/props';
-import VxeTableComponent from '../../table';
-import VxeToolbarComponent from '../../toolbar';
-const { warnLog, errLog } = createComponentLog('grid');
+import { h, ref, computed, provide, reactive, onBeforeUnmount, watch, nextTick, onMounted } from "vue";
+import { defineVxeComponent } from "../../ui/src/comp";
+import XEUtils from "xe-utils";
+import { getLastZIndex, nextZIndex, isEnableConf } from "../../ui/src/utils";
+import { getOffsetHeight, getPaddingTopBottomSize, getDomNode, toCssUnit, hasClass } from "../../ui/src/dom";
+import { VxeUI } from "../../ui";
+import { gridProps } from "./props";
+import { gridEmits } from "./emits";
+import { getSlotVNs } from "../../ui/src/vn";
+import { createComponentLog } from "../../ui/src/log";
+import { tableEmits } from "../../table/src/emits";
+import { tableProps } from "../../table/src/props";
+import VxeTableComponent from "../../table";
+import VxeToolbarComponent from "../../toolbar";
+const { warnLog, errLog } = createComponentLog("grid");
 const { getConfig, getI18n, commands, hooks, useFns, createEvent, globalEvents, GLOBAL_EVENT_KEYS, renderEmptyElement } = VxeUI;
 const tableComponentPropKeys = Object.keys(tableProps);
-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', 'getTreeRowLevel', 'getTreeParentRow', 'getRowSeq', 'getRowById', 'getRowid', 'getTableData', 'getFullData', 'setColumnFixed', 'clearColumnFixed', 'setColumnWidth', 'getColumnWidth', 'recalcRowHeight', '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', 'setFilterByEvent', 'sort', 'setSort', 'setSortByEvent', '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', 'getScrollData', 'scrollTo', 'scrollToStartRow', 'scrollToEndRow', 'scrollToRow', 'scrollToStartColumn', 'scrollToEndColumn', 'scrollToColumn', 'clearScroll', 'updateFooter', 'updateStatus', 'setMergeCells', 'removeInsertRow', 'removeMergeCells', 'getMergeCells', 'setMergeHeaderCells', 'removeMergeHeaderCells', 'getMergeHeaderCells', 'clearMergeHeaderCells', 'clearMergeCells', 'setMergeFooterItems', 'removeMergeFooterItems', 'getMergeFooterItems', 'clearMergeFooterItems', 'setCustomStoreData', 'getCustomStoreData', 'setRowGroupExpand', 'setRowGroupExpandByField', 'setAllRowGroupExpand', 'clearRowGroupExpand', 'isRowGroupExpandByRow', 'isRowGroupRecord', 'isAggregateRecord', 'isAggregateExpandByRow', 'getAggregateContentByRow', 'getAggregateRowChildren', 'setRowGroups', 'clearRowGroups', 'openTooltip', 'moveColumnTo', 'moveRowTo', 'getCellLabel', 'updateCellLabel', 'clearFormatterCache', 'getFooterCellLabel', 'updateFooterCellLabel', 'clearFooterFormatterCache', 'getUpdateCells', 'undo', 'redo', 'effectCellData', 'getCellElement', 'focus', 'blur', 'connect', 'connectToolbar'];
+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", "getTreeRowLevel", "getTreeParentRow", "getRowSeq", "getRowById", "getRowid", "getTableData", "getFullData", "setColumnFixed", "clearColumnFixed", "setColumnWidth", "getColumnWidth", "recalcRowHeight", "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", "setFilterByEvent", "sort", "setSort", "setSortByEvent", "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", "getScrollData", "scrollTo", "scrollToStartRow", "scrollToEndRow", "scrollToRow", "scrollToStartColumn", "scrollToEndColumn", "scrollToColumn", "clearScroll", "updateFooter", "updateStatus", "setMergeCells", "removeInsertRow", "removeMergeCells", "getMergeCells", "setMergeHeaderCells", "removeMergeHeaderCells", "getMergeHeaderCells", "clearMergeHeaderCells", "clearMergeCells", "setMergeFooterItems", "removeMergeFooterItems", "getMergeFooterItems", "clearMergeFooterItems", "setCustomStoreData", "getCustomStoreData", "setRowGroupExpand", "setRowGroupExpandByField", "setAllRowGroupExpand", "clearRowGroupExpand", "isRowGroupExpandByRow", "isRowGroupRecord", "isAggregateRecord", "isAggregateExpandByRow", "getAggregateContentByRow", "getAggregateRowChildren", "setRowGroups", "clearRowGroups", "openTooltip", "moveColumnTo", "moveRowTo", "getCellLabel", "updateCellLabel", "clearFormatterCache", "getFooterCellLabel", "updateFooterCellLabel", "clearFooterFormatterCache", "getUpdateCells", "undo", "redo", "effectCellData", "getCellElement", "focus", "blur", "connect", "connectToolbar"];
 function createReactData() {
-    var _a;
-    return {
-        tableLoading: false,
-        proxyInited: false,
-        isZMax: false,
-        tableData: [],
-        filterData: [],
-        formData: {},
-        sortData: [],
-        footerData: [],
-        tZindex: 0,
-        tablePage: {
-            total: 0,
-            pageSize: ((_a = getConfig().pager) === null || _a === void 0 ? void 0 : _a.pageSize) || 10,
-            currentPage: 1
-        }
-    };
+  var _a;
+  return {
+    tableLoading: false,
+    proxyInited: false,
+    isZMax: false,
+    tableData: [],
+    filterData: [],
+    formData: {},
+    sortData: [],
+    footerData: [],
+    tZindex: 0,
+    tablePage: {
+      total: 0,
+      pageSize: ((_a = getConfig().pager) == null ? void 0 : _a.pageSize) || 10,
+      currentPage: 1
+    }
+  };
 }
 function createInternalData() {
-    return {
-        uFoot: false
-    };
+  return {
+    uFoot: false
+  };
 }
-export default defineVxeComponent({
-    name: 'VxeGrid',
-    props: gridProps,
-    emits: gridEmits,
-    setup(props, context) {
-        const { slots, emit } = context;
-        const xID = XEUtils.uniqueId();
-        // 使用已安装的组件，如果未安装则不渲染
-        const VxeUIFormComponent = VxeUI.getComponent('VxeForm');
-        const VxeUIPagerComponent = VxeUI.getComponent('VxePager');
-        const defaultLayouts = [['Form'], ['Toolbar', 'Top', 'Table', 'Bottom', 'Pager']];
-        const { computeSize } = useFns.useSize(props);
-        const { computeIsVScrollbar } = useFns.useVScrollbar(props);
-        const reactData = reactive(createReactData());
-        const internalData = createInternalData();
-        const refElem = ref();
-        const refTable = ref();
-        const refForm = ref();
-        const refToolbar = ref();
-        const refPager = ref();
-        const refPopupContainerElem = ref();
-        const refFormWrapper = ref();
-        const refToolbarWrapper = ref();
-        const refTopWrapper = ref();
-        const refBottomWrapper = ref();
-        const refPagerWrapper = ref();
-        const extendTableMethods = (methodKeys) => {
-            const funcs = {};
-            methodKeys.forEach(name => {
-                funcs[name] = (...args) => {
-                    const $xeTable = refTable.value;
-                    if ($xeTable && $xeTable[name]) {
-                        return $xeTable[name](...args);
-                    }
-                };
-            });
-            return funcs;
+var grid_default = defineVxeComponent({
+  name: "VxeGrid",
+  props: gridProps,
+  emits: gridEmits,
+  setup(props, context) {
+    const { slots, emit } = context;
+    const xID = XEUtils.uniqueId();
+    const VxeUIFormComponent = VxeUI.getComponent("VxeForm");
+    const VxeUIPagerComponent = VxeUI.getComponent("VxePager");
+    const defaultLayouts = [["Form"], ["Toolbar", "Top", "Table", "Bottom", "Pager"]];
+    const { computeSize } = useFns.useSize(props);
+    const { computeIsVScrollbar } = useFns.useVScrollbar(props);
+    const reactData = reactive(createReactData());
+    const internalData = createInternalData();
+    const refElem = ref();
+    const refTable = ref();
+    const refForm = ref();
+    const refToolbar = ref();
+    const refPager = ref();
+    const refPopupContainerElem = ref();
+    const refFormWrapper = ref();
+    const refToolbarWrapper = ref();
+    const refTopWrapper = ref();
+    const refBottomWrapper = ref();
+    const refPagerWrapper = ref();
+    const extendTableMethods = (methodKeys) => {
+      const funcs = {};
+      methodKeys.forEach((name) => {
+        funcs[name] = (...args) => {
+          const $xeTable = refTable.value;
+          if ($xeTable && $xeTable[name]) {
+            return $xeTable[name](...args);
+          }
         };
-        const gridExtendTableMethods = extendTableMethods(tableComponentMethodKeys);
-        tableComponentMethodKeys.forEach(name => {
-            gridExtendTableMethods[name] = (...args) => {
-                const $xeTable = refTable.value;
-                if ($xeTable && $xeTable[name]) {
-                    return $xeTable && $xeTable[name](...args);
-                }
-            };
-        });
-        const computeProxyOpts = computed(() => {
-            return XEUtils.merge({}, XEUtils.clone(getConfig().grid.proxyConfig, true), props.proxyConfig);
-        });
-        const computeIsRespMsg = computed(() => {
-            const proxyOpts = computeProxyOpts.value;
-            return !!(XEUtils.isBoolean(proxyOpts.message) ? proxyOpts.message : proxyOpts.showResponseMsg);
-        });
-        const computeIsActiveMsg = computed(() => {
-            const proxyOpts = computeProxyOpts.value;
-            return XEUtils.isBoolean(proxyOpts.showActionMsg) ? proxyOpts.showActionMsg : !!proxyOpts.showActiveMsg;
-        });
-        const computePagerOpts = computed(() => {
-            return Object.assign({}, getConfig().grid.pagerConfig, props.pagerConfig);
-        });
-        const computePagerProps = computed(() => {
-            const pagerOpts = computePagerOpts.value;
-            return Object.assign({}, pagerOpts, { enabled: undefined, slots: undefined });
+      });
+      return funcs;
+    };
+    const gridExtendTableMethods = extendTableMethods(tableComponentMethodKeys);
+    tableComponentMethodKeys.forEach((name) => {
+      gridExtendTableMethods[name] = (...args) => {
+        const $xeTable = refTable.value;
+        if ($xeTable && $xeTable[name]) {
+          return $xeTable && $xeTable[name](...args);
+        }
+      };
+    });
+    const computeProxyOpts = computed(() => {
+      return XEUtils.merge({}, XEUtils.clone(getConfig().grid.proxyConfig, true), props.proxyConfig);
+    });
+    const computeIsRespMsg = computed(() => {
+      const proxyOpts = computeProxyOpts.value;
+      return !!(XEUtils.isBoolean(proxyOpts.message) ? proxyOpts.message : proxyOpts.showResponseMsg);
+    });
+    const computeIsActiveMsg = computed(() => {
+      const proxyOpts = computeProxyOpts.value;
+      return XEUtils.isBoolean(proxyOpts.showActionMsg) ? proxyOpts.showActionMsg : !!proxyOpts.showActiveMsg;
+    });
+    const computePagerOpts = computed(() => {
+      return Object.assign({}, getConfig().grid.pagerConfig, props.pagerConfig);
+    });
+    const computePagerProps = computed(() => {
+      const pagerOpts = computePagerOpts.value;
+      return Object.assign({}, pagerOpts, { enabled: void 0, slots: void 0 });
+    });
+    const computeFormOpts = computed(() => {
+      return Object.assign({}, getConfig().grid.formConfig, props.formConfig);
+    });
+    const computeToolbarOpts = computed(() => {
+      return Object.assign({}, getConfig().grid.toolbarConfig, props.toolbarConfig);
+    });
+    const computeZoomOpts = computed(() => {
+      return Object.assign({}, getConfig().grid.zoomConfig, props.zoomConfig);
+    });
+    const computeStyles = computed(() => {
+      const { height, maxHeight } = props;
+      const { isZMax, tZindex } = reactData;
+      const stys = {};
+      if (isZMax) {
+        stys.zIndex = tZindex;
+      } else {
+        if (height) {
+          stys.height = height === "auto" || height === "100%" ? "100%" : toCssUnit(height);
+        }
+        if (maxHeight) {
+          stys.maxHeight = maxHeight === "auto" || maxHeight === "100%" ? "100%" : toCssUnit(maxHeight);
+        }
+      }
+      return stys;
+    });
+    const computeTableExtendProps = computed(() => {
+      const rest = {};
+      tableComponentPropKeys.forEach((key) => {
+        if (props[key] !== void 0) {
+          rest[key] = props[key];
+        }
+      });
+      return rest;
+    });
+    const computeTableProps = computed(() => {
+      const { showFooter, seqConfig, pagerConfig, editConfig, proxyConfig } = props;
+      const { isZMax, tablePage, footerData } = reactData;
+      const tableExtendProps = computeTableExtendProps.value;
+      const proxyOpts = computeProxyOpts.value;
+      const pagerOpts = computePagerOpts.value;
+      const isLoading = computeIsLoading.value;
+      const tProps = Object.assign({}, tableExtendProps);
+      if (showFooter && !tProps.footerData) {
+        tProps.footerData = footerData;
+      } else if (proxyOpts.footer && footerData.length) {
+        tProps.footerData = footerData;
+      }
+      if (isZMax) {
+        if (tProps.maxHeight) {
+          tProps.maxHeight = "100%";
+        } else {
+          tProps.height = "100%";
+        }
+      }
+      if (proxyConfig && isEnableConf(proxyOpts)) {
+        tProps.loading = isLoading;
+        if (pagerConfig && proxyOpts.seq && isEnableConf(pagerOpts)) {
+          tProps.seqConfig = Object.assign({}, seqConfig, { startIndex: (tablePage.currentPage - 1) * tablePage.pageSize });
+        }
+      }
+      if (editConfig) {
+        tProps.editConfig = Object.assign({}, editConfig);
+      }
+      return tProps;
+    });
+    const computeCurrLayoutConf = computed(() => {
+      const { layouts } = props;
+      let confs = [];
+      if (layouts && layouts.length) {
+        confs = layouts;
+      } else {
+        confs = getConfig().grid.layouts || defaultLayouts;
+      }
+      let headKeys = [];
+      let bodyKeys = [];
+      let footKeys = [];
+      if (confs.length) {
+        if (XEUtils.isArray(confs[0])) {
+          headKeys = confs[0];
+          bodyKeys = confs[1] || [];
+          footKeys = confs[2] || [];
+        } else {
+          bodyKeys = confs;
+        }
+      }
+      return {
+        headKeys,
+        bodyKeys,
+        footKeys
+      };
+    });
+    const computeCustomCurrentPageFlag = computed(() => {
+      const pagerOpts = computePagerOpts.value;
+      return pagerOpts.currentPage;
+    });
+    const computeCustomPageSizeFlag = computed(() => {
+      const pagerOpts = computePagerOpts.value;
+      return pagerOpts.pageSize;
+    });
+    const computeCustomTotalFlag = computed(() => {
+      const pagerOpts = computePagerOpts.value;
+      return pagerOpts.total;
+    });
+    const computePageCount = computed(() => {
+      const { tablePage } = reactData;
+      return Math.max(Math.ceil(tablePage.total / tablePage.pageSize), 1);
+    });
+    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,
+      refForm,
+      refToolbar,
+      refPager,
+      refPopupContainerElem
+    };
+    const computeMaps = {
+      computeSize,
+      computeIsVScrollbar,
+      computeProxyOpts,
+      computePagerOpts,
+      computeFormOpts,
+      computeToolbarOpts,
+      computeZoomOpts
+    };
+    const $xeGrid = {
+      xID,
+      props,
+      context,
+      reactData,
+      internalData,
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    };
+    const initToolbar = () => {
+      const toolbarOpts = computeToolbarOpts.value;
+      if (props.toolbarConfig && isEnableConf(toolbarOpts)) {
+        nextTick(() => {
+          const $xeTable = refTable.value;
+          const $xeToolbar = refToolbar.value;
+          if ($xeTable && $xeToolbar) {
+            $xeTable.connectToolbar($xeToolbar);
+          }
         });
-        const computeFormOpts = computed(() => {
-            return Object.assign({}, getConfig().grid.formConfig, props.formConfig);
+      }
+    };
+    const getFormData = () => {
+      const { proxyConfig } = props;
+      const { formData } = reactData;
+      const proxyOpts = computeProxyOpts.value;
+      const formOpts = computeFormOpts.value;
+      return proxyConfig && isEnableConf(proxyOpts) && proxyOpts.form ? formData : formOpts.data;
+    };
+    const initPages = (propKey) => {
+      const { tablePage } = reactData;
+      const { pagerConfig } = props;
+      const pagerOpts = computePagerOpts.value;
+      if (pagerConfig && isEnableConf(pagerOpts)) {
+        if (propKey) {
+          if (pagerOpts[propKey]) {
+            tablePage[propKey] = XEUtils.toNumber(pagerOpts[propKey]);
+          }
+        } else {
+          const { currentPage, pageSize, total } = pagerOpts;
+          if (currentPage) {
+            tablePage.currentPage = currentPage;
+          }
+          if (pageSize) {
+            tablePage.pageSize = pageSize;
+          }
+          if (total) {
+            tablePage.total = total;
+          }
+        }
+      }
+    };
+    const triggerPendingEvent = (code) => {
+      const isActiveMsg = computeIsActiveMsg.value;
+      const $xeTable = refTable.value;
+      const selectRecords = $xeTable ? $xeTable.getCheckboxRecords() : [];
+      if (selectRecords.length) {
+        if ($xeTable) {
+          $xeTable.togglePendingRow(selectRecords);
+        }
+        $xeGrid.clearCheckboxRow();
+      } else {
+        if (isActiveMsg) {
+          if (VxeUI.modal) {
+            VxeUI.modal.message({ id: code, content: getI18n("vxe.grid.selectOneRecord"), status: "warning" });
+          }
+        }
+      }
+    };
+    const getRespMsg = (rest, defaultMsg) => {
+      const proxyOpts = computeProxyOpts.value;
+      const resConfigs = proxyOpts.response || proxyOpts.props || {};
+      const messageProp = resConfigs.message;
+      const $xeTable = refTable.value;
+      let msg;
+      if (rest && messageProp) {
+        msg = XEUtils.isFunction(messageProp) ? messageProp({ data: rest, $table: $xeTable, $grid: $xeGrid, $gantt: null }) : XEUtils.get(rest, messageProp);
+      }
+      return msg || getI18n(defaultMsg);
+    };
+    const handleDeleteRow = (code, alertKey, callback) => {
+      const isActiveMsg = computeIsActiveMsg.value;
+      const selectRecords = $xeGrid.getCheckboxRecords();
+      if (isActiveMsg) {
+        if (selectRecords.length) {
+          if (VxeUI.modal) {
+            return VxeUI.modal.confirm({ id: `cfm_${code}`, content: getI18n(alertKey), escClosable: true }).then((type) => {
+              if (type === "confirm") {
+                return callback();
+              }
+            });
+          }
+        } else {
+          if (VxeUI.modal) {
+            VxeUI.modal.message({ id: `msg_${code}`, content: getI18n("vxe.grid.selectOneRecord"), status: "warning" });
+          }
+        }
+      } else {
+        if (selectRecords.length) {
+          callback();
+        }
+      }
+      return Promise.resolve();
+    };
+    const pageChangeEvent = (params) => {
+      const { proxyConfig } = props;
+      const { tablePage } = reactData;
+      const { $event, currentPage, pageSize } = params;
+      const proxyOpts = computeProxyOpts.value;
+      tablePage.currentPage = currentPage;
+      tablePage.pageSize = pageSize;
+      $xeGrid.dispatchEvent("page-change", params, $event);
+      if (proxyConfig && isEnableConf(proxyOpts)) {
+        $xeGrid.commitProxy("query").then((rest) => {
+          $xeGrid.dispatchEvent("proxy-query", rest, $event);
         });
-        const computeToolbarOpts = computed(() => {
-            return Object.assign({}, getConfig().grid.toolbarConfig, props.toolbarConfig);
+      }
+    };
+    const handleSortEvent = (params) => {
+      const $xeTable = refTable.value;
+      const { proxyConfig } = props;
+      if (!$xeTable) {
+        return;
+      }
+      const { computeSortOpts } = $xeTable.getComputeMaps();
+      const proxyOpts = computeProxyOpts.value;
+      const sortOpts = computeSortOpts.value;
+      if (sortOpts.remote) {
+        reactData.sortData = params.sortList;
+        if (proxyConfig && isEnableConf(proxyOpts)) {
+          reactData.tablePage.currentPage = 1;
+          $xeGrid.commitProxy("query").then((rest) => {
+            $xeGrid.dispatchEvent("proxy-query", rest, params.$event);
+          });
+        }
+      }
+    };
+    const sortChangeEvent = (params) => {
+      handleSortEvent(params);
+      $xeGrid.dispatchEvent("sort-change", params, params.$event);
+    };
+    const clearAllSortEvent = (params) => {
+      handleSortEvent(params);
+      $xeGrid.dispatchEvent("clear-all-sort", params, params.$event);
+    };
+    const handleFilterEvent = (params) => {
+      const $xeTable = refTable.value;
+      const { proxyConfig } = props;
+      if (!$xeTable) {
+        return;
+      }
+      const { computeFilterOpts } = $xeTable.getComputeMaps();
+      const proxyOpts = computeProxyOpts.value;
+      const filterOpts = computeFilterOpts.value;
+      if (filterOpts.remote) {
+        reactData.filterData = params.filterList;
+        if (proxyConfig && isEnableConf(proxyOpts)) {
+          reactData.tablePage.currentPage = 1;
+          internalData.uFoot = true;
+          $xeGrid.commitProxy("query").then((rest) => {
+            $xeGrid.dispatchEvent("proxy-query", rest, params.$event);
+          });
+          internalData.uFoot = false;
+          updateQueryFooter();
+        }
+      }
+    };
+    const filterChangeEvent = (params) => {
+      handleFilterEvent(params);
+      $xeGrid.dispatchEvent("filter-change", params, params.$event);
+    };
+    const clearAllFilterEvent = (params) => {
+      handleFilterEvent(params);
+      $xeGrid.dispatchEvent("clear-all-filter", params, params.$event);
+    };
+    const submitFormEvent = (params) => {
+      const { proxyConfig } = props;
+      const proxyOpts = computeProxyOpts.value;
+      const formOptions = proxyOpts.formOptions || {};
+      if (reactData.tableLoading) {
+        return;
+      }
+      if (proxyConfig && isEnableConf(proxyOpts)) {
+        $xeGrid.dispatchEvent("form-submit", params, params.$event);
+        internalData.uFoot = true;
+        $xeGrid.commitProxy(formOptions.submitMode || "reload").then((rest) => {
+          $xeGrid.dispatchEvent("proxy-query", { ...rest, isReload: true }, params.$event);
         });
-        const computeZoomOpts = computed(() => {
-            return Object.assign({}, getConfig().grid.zoomConfig, props.zoomConfig);
+        internalData.uFoot = false;
+        updateQueryFooter();
+      } else {
+        $xeGrid.dispatchEvent("form-submit", params, params.$event);
+      }
+    };
+    const resetFormEvent = (params) => {
+      const $xeTable = refTable.value;
+      const { proxyConfig } = props;
+      const { $event } = params;
+      const proxyOpts = computeProxyOpts.value;
+      if (proxyConfig && isEnableConf(proxyOpts)) {
+        const formOptions = proxyOpts.formOptions || {};
+        $xeGrid.dispatchEvent("form-reset", params, $event);
+        if ($xeTable) {
+          $xeTable.clearScroll();
+        }
+        internalData.uFoot = true;
+        $xeGrid.commitProxy(formOptions.resetMode === "reset_form" ? "query" : "reload").then((rest) => {
+          $xeGrid.dispatchEvent("proxy-query", { ...rest, isReload: true }, $event);
         });
-        const computeStyles = computed(() => {
-            const { height, maxHeight } = props;
-            const { isZMax, tZindex } = reactData;
-            const stys = {};
-            if (isZMax) {
-                stys.zIndex = tZindex;
+        internalData.uFoot = false;
+        updateQueryFooter();
+      } else {
+        $xeGrid.dispatchEvent("form-reset", params, $event);
+      }
+    };
+    const submitInvalidEvent = (params) => {
+      $xeGrid.dispatchEvent("form-submit-invalid", params, params.$event);
+    };
+    const collapseEvent = (params) => {
+      const { $event } = params;
+      $xeGrid.dispatchEvent("form-toggle-collapse", params, $event);
+      $xeGrid.dispatchEvent("form-collapse", params, $event);
+    };
+    const handleZoom = (isMax) => {
+      const { isZMax } = reactData;
+      if (isMax ? !isZMax : isZMax) {
+        reactData.isZMax = !isZMax;
+        if (reactData.tZindex < getLastZIndex()) {
+          reactData.tZindex = nextZIndex();
+        }
+      }
+      return nextTick().then(() => $xeGrid.recalculate(true)).then(() => {
+        setTimeout(() => $xeGrid.recalculate(true), 15);
+        return reactData.isZMax;
+      });
+    };
+    const getFuncSlot = (optSlots, slotKey) => {
+      const funcSlot = optSlots[slotKey];
+      if (funcSlot) {
+        if (XEUtils.isString(funcSlot)) {
+          if (slots[funcSlot]) {
+            return slots[funcSlot];
+          } else {
+            errLog("vxe.error.notSlot", [funcSlot]);
+          }
+        } else {
+          return funcSlot;
+        }
+      }
+      return null;
+    };
+    const getConfigSlot = (slotConfigs) => {
+      const slotConf = {};
+      XEUtils.objectMap(slotConfigs, (slotFunc, slotKey) => {
+        if (slotFunc) {
+          if (XEUtils.isString(slotFunc)) {
+            if (slots[slotFunc]) {
+              slotConf[slotKey] = slots[slotFunc];
+            } else {
+              errLog("vxe.error.notSlot", [slotFunc]);
             }
-            else {
-                if (height) {
-                    stys.height = height === 'auto' || height === '100%' ? '100%' : toCssUnit(height);
-                }
-                if (maxHeight) {
-                    stys.maxHeight = maxHeight === 'auto' || maxHeight === '100%' ? '100%' : toCssUnit(maxHeight);
-                }
+          } else {
+            slotConf[slotKey] = slotFunc;
+          }
+        }
+      });
+      return slotConf;
+    };
+    const renderForm = () => {
+      const { formConfig, proxyConfig } = props;
+      const { formData } = reactData;
+      const proxyOpts = computeProxyOpts.value;
+      const formOpts = computeFormOpts.value;
+      if (formConfig && isEnableConf(formOpts) || slots.form) {
+        let slotVNs = [];
+        if (slots.form) {
+          slotVNs = slots.form({ $grid: $xeGrid, $gantt: null });
+        } else {
+          if (formOpts.items) {
+            const formSlots = {};
+            if (!formOpts.inited) {
+              formOpts.inited = true;
+              const beforeItem = proxyOpts.beforeItem;
+              if (proxyOpts && beforeItem) {
+                formOpts.items.forEach((item) => {
+                  beforeItem({ $grid: $xeGrid, $gantt: null, item });
+                });
+              }
             }
-            return stys;
-        });
-        const computeTableExtendProps = computed(() => {
-            const rest = {};
-            tableComponentPropKeys.forEach((key) => {
-                if (props[key] !== undefined) {
-                    rest[key] = props[key];
+            formOpts.items.forEach((item) => {
+              XEUtils.each(item.slots, (func) => {
+                if (func && !XEUtils.isFunction(func)) {
+                  if (slots[func]) {
+                    formSlots[func] = slots[func];
+                  }
                 }
+              });
             });
-            return rest;
-        });
-        const computeTableProps = computed(() => {
-            const { showFooter, seqConfig, pagerConfig, editConfig, proxyConfig } = props;
-            const { isZMax, tablePage, footerData } = reactData;
-            const tableExtendProps = computeTableExtendProps.value;
-            const proxyOpts = computeProxyOpts.value;
-            const pagerOpts = computePagerOpts.value;
-            const isLoading = computeIsLoading.value;
-            const tProps = Object.assign({}, tableExtendProps);
-            if (showFooter && !tProps.footerData) {
-                // 如果未设置自己的标位数据，则使用代理的
-                tProps.footerData = footerData;
+            if (VxeUIFormComponent) {
+              slotVNs.push(
+                h(VxeUIFormComponent, {
+                  ref: refForm,
+                  ...Object.assign({}, formOpts, {
+                    data: proxyConfig && isEnableConf(proxyOpts) && proxyOpts.form ? formData : formOpts.data
+                  }),
+                  onSubmit: submitFormEvent,
+                  onReset: resetFormEvent,
+                  onSubmitInvalid: submitInvalidEvent,
+                  onCollapse: collapseEvent
+                }, formSlots)
+              );
             }
-            else if (proxyOpts.footer && footerData.length) {
-                // 如果代理标为数据，且未请求到数据，则用自己的
-                tProps.footerData = footerData;
+          }
+        }
+        return h("div", {
+          ref: refFormWrapper,
+          key: "form",
+          class: "vxe-grid--form-wrapper"
+        }, slotVNs);
+      }
+      return renderEmptyElement($xeGrid);
+    };
+    const renderToolbar = () => {
+      const { toolbarConfig } = props;
+      const toolbarOpts = computeToolbarOpts.value;
+      const toolbarSlot = slots.toolbar;
+      if (toolbarConfig && isEnableConf(toolbarOpts) || toolbarSlot) {
+        let slotVNs = [];
+        if (toolbarSlot) {
+          slotVNs = toolbarSlot({ $grid: $xeGrid, $gantt: null });
+        } else {
+          const toolbarOptSlots = toolbarOpts.slots;
+          const toolbarSlots = {};
+          if (toolbarOptSlots) {
+            const buttonsSlot = getFuncSlot(toolbarOptSlots, "buttons");
+            const buttonPrefixSlot = getFuncSlot(toolbarOptSlots, "buttonPrefix");
+            const buttonSuffixSlot = getFuncSlot(toolbarOptSlots, "buttonSuffix");
+            const toolsSlot = getFuncSlot(toolbarOptSlots, "tools");
+            const toolPrefixSlot = getFuncSlot(toolbarOptSlots, "toolPrefix");
+            const toolSuffixSlot = getFuncSlot(toolbarOptSlots, "toolSuffix");
+            if (buttonsSlot) {
+              toolbarSlots.buttons = buttonsSlot;
             }
-            if (isZMax) {
-                if (tProps.maxHeight) {
-                    tProps.maxHeight = '100%';
-                }
-                else {
-                    tProps.height = '100%';
-                }
+            if (buttonPrefixSlot) {
+              toolbarSlots.buttonPrefix = buttonPrefixSlot;
             }
-            if (proxyConfig && isEnableConf(proxyOpts)) {
-                tProps.loading = isLoading;
-                if (pagerConfig && proxyOpts.seq && isEnableConf(pagerOpts)) {
-                    tProps.seqConfig = Object.assign({}, seqConfig, { startIndex: (tablePage.currentPage - 1) * tablePage.pageSize });
-                }
+            if (buttonSuffixSlot) {
+              toolbarSlots.buttonSuffix = buttonSuffixSlot;
             }
-            if (editConfig) {
-                tProps.editConfig = Object.assign({}, editConfig);
+            if (toolsSlot) {
+              toolbarSlots.tools = toolsSlot;
             }
-            return tProps;
-        });
-        const computeCurrLayoutConf = computed(() => {
-            const { layouts } = props;
-            let confs = [];
-            if (layouts && layouts.length) {
-                confs = layouts;
+            if (toolPrefixSlot) {
+              toolbarSlots.toolPrefix = toolPrefixSlot;
             }
-            else {
-                confs = getConfig().grid.layouts || defaultLayouts;
+            if (toolSuffixSlot) {
+              toolbarSlots.toolSuffix = toolSuffixSlot;
             }
-            let headKeys = [];
-            let bodyKeys = [];
-            let footKeys = [];
-            if (confs.length) {
-                if (XEUtils.isArray(confs[0])) {
-                    headKeys = confs[0];
-                    bodyKeys = (confs[1] || []);
-                    footKeys = (confs[2] || []);
-                }
-                else {
-                    bodyKeys = confs;
-                }
+          }
+          slotVNs.push(
+            h(VxeToolbarComponent, {
+              ref: refToolbar,
+              ...toolbarOpts,
+              slots: void 0
+            }, toolbarSlots)
+          );
+        }
+        return h("div", {
+          ref: refToolbarWrapper,
+          key: "toolbar",
+          class: "vxe-grid--toolbar-wrapper"
+        }, slotVNs);
+      }
+      return renderEmptyElement($xeGrid);
+    };
+    const renderTop = () => {
+      const topSlot = slots.top;
+      if (topSlot) {
+        return h("div", {
+          ref: refTopWrapper,
+          key: "top",
+          class: "vxe-grid--top-wrapper"
+        }, topSlot({ $grid: $xeGrid, $gantt: null }));
+      }
+      return renderEmptyElement($xeGrid);
+    };
+    const renderTableLeft = () => {
+      const leftSlot = slots.left;
+      if (leftSlot) {
+        return h("div", {
+          class: "vxe-grid--left-wrapper"
+        }, leftSlot({ $grid: $xeGrid, $gantt: null }));
+      }
+      return renderEmptyElement($xeGrid);
+    };
+    const renderTableRight = () => {
+      const rightSlot = slots.right;
+      if (rightSlot) {
+        return h("div", {
+          class: "vxe-grid--right-wrapper"
+        }, rightSlot({ $grid: $xeGrid, $gantt: null }));
+      }
+      return renderEmptyElement($xeGrid);
+    };
+    const renderTable = () => {
+      const { proxyConfig } = props;
+      const tableProps2 = computeTableProps.value;
+      const proxyOpts = computeProxyOpts.value;
+      const tableOns = Object.assign({}, tableCompEvents);
+      const emptySlot = slots.empty;
+      const loadingSlot = slots.loading;
+      const rowDragIconSlot = slots.rowDragIcon || slots["row-drag-icon"];
+      const columnDragIconSlot = slots.columnDragIcon || slots["column-drag-icon"];
+      const headerTooltipSlot = slots.headerTooltip || slots["header-tooltip"];
+      const tooltipSlot = slots.tooltip;
+      const footerTooltipSlot = slots.footerTooltip || slots["footer-tooltip"];
+      if (proxyConfig && isEnableConf(proxyOpts)) {
+        if (proxyOpts.sort) {
+          tableOns.onSortChange = sortChangeEvent;
+          tableOns.onClearAllSort = clearAllSortEvent;
+        }
+        if (proxyOpts.filter) {
+          tableOns.onFilterChange = filterChangeEvent;
+          tableOns.onClearAllFilter = clearAllFilterEvent;
+        }
+      }
+      const slotObj = {};
+      if (emptySlot) {
+        slotObj.empty = emptySlot;
+      }
+      if (loadingSlot) {
+        slotObj.loading = loadingSlot;
+      }
+      if (rowDragIconSlot) {
+        slotObj.rowDragIcon = rowDragIconSlot;
+      }
+      if (columnDragIconSlot) {
+        slotObj.columnDragIcon = columnDragIconSlot;
+      }
+      if (headerTooltipSlot) {
+        slotObj.headerTooltip = headerTooltipSlot;
+      }
+      if (tooltipSlot) {
+        slotObj.tooltip = tooltipSlot;
+      }
+      if (footerTooltipSlot) {
+        slotObj.footerTooltip = footerTooltipSlot;
+      }
+      return h("div", {
+        class: "vxe-grid--table-wrapper"
+      }, [
+        h(VxeTableComponent, {
+          ref: refTable,
+          ...tableProps2,
+          ...tableOns
+        }, slotObj)
+      ]);
+    };
+    const renderBottom = () => {
+      if (slots.bottom) {
+        return h("div", {
+          ref: refBottomWrapper,
+          key: "bottom",
+          class: "vxe-grid--bottom-wrapper"
+        }, slots.bottom({ $grid: $xeGrid, $gantt: null }));
+      }
+      return renderEmptyElement($xeGrid);
+    };
+    const renderPager = () => {
+      const { proxyConfig, pagerConfig } = props;
+      const proxyOpts = computeProxyOpts.value;
+      const pagerOpts = computePagerOpts.value;
+      const pagerProps = computePagerProps.value;
+      const pagerSlot = slots.pager;
+      if (pagerConfig && isEnableConf(pagerOpts) || slots.pager) {
+        return h("div", {
+          ref: refPagerWrapper,
+          key: "pager",
+          class: "vxe-grid--pager-wrapper"
+        }, pagerSlot ? pagerSlot({ $grid: $xeGrid, $gantt: null }) : [
+          VxeUIPagerComponent ? h(VxeUIPagerComponent, {
+            ref: refPager,
+            ...pagerProps,
+            ...proxyConfig && isEnableConf(proxyOpts) ? reactData.tablePage : {},
+            onPageChange: pageChangeEvent
+          }, getConfigSlot(pagerOpts.slots)) : renderEmptyElement($xeGrid)
+        ]);
+      }
+      return renderEmptyElement($xeGrid);
+    };
+    const renderChildLayout = (layoutKeys) => {
+      const childVNs = [];
+      layoutKeys.forEach((key) => {
+        switch (key) {
+          case "Form":
+            childVNs.push(renderForm());
+            break;
+          case "Toolbar":
+            childVNs.push(renderToolbar());
+            break;
+          case "Top":
+            childVNs.push(renderTop());
+            break;
+          case "Table":
+            childVNs.push(
+              h("div", {
+                key: "table",
+                class: "vxe-grid--table-container"
+              }, [
+                renderTableLeft(),
+                renderTable(),
+                renderTableRight()
+              ])
+            );
+            break;
+          case "Bottom":
+            childVNs.push(renderBottom());
+            break;
+          case "Pager":
+            childVNs.push(renderPager());
+            break;
+          default:
+            errLog("vxe.error.notProp", [`layouts -> ${key}`]);
+            break;
+        }
+      });
+      return childVNs;
+    };
+    const renderLayout = () => {
+      const currLayoutConf = computeCurrLayoutConf.value;
+      const { headKeys, bodyKeys, footKeys } = currLayoutConf;
+      const asideLeftSlot = slots.asideLeft || slots["aside-left"];
+      const asideRightSlot = slots.asideRight || slots["aside-right"];
+      return [
+        h("div", {
+          class: "vxe-grid--layout-header-wrapper"
+        }, renderChildLayout(headKeys)),
+        h("div", {
+          class: "vxe-grid--layout-body-wrapper"
+        }, [
+          asideLeftSlot ? h("div", {
+            class: "vxe-grid--layout-aside-left-wrapper"
+          }, asideLeftSlot({})) : renderEmptyElement($xeGrid),
+          h("div", {
+            class: "vxe-grid--layout-body-content-wrapper"
+          }, renderChildLayout(bodyKeys)),
+          asideRightSlot ? h("div", {
+            class: "vxe-grid--layout-aside-right-wrapper"
+          }, asideRightSlot({})) : renderEmptyElement($xeGrid)
+        ]),
+        h("div", {
+          class: "vxe-grid--layout-footer-wrapper"
+        }, renderChildLayout(footKeys)),
+        h("div", {
+          ref: refPopupContainerElem
+        })
+      ];
+    };
+    const tableCompEvents = {};
+    tableEmits.forEach((name) => {
+      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 { startField, endField, defaultValue } = itemRender;
+              if (XEUtils.isFunction(defaultValue)) {
+                itemValue = defaultValue({ item });
+              } else if (!XEUtils.isUndefined(defaultValue)) {
+                itemValue = defaultValue;
+              }
+              if (startField && endField) {
+                XEUtils.set(fData, startField, null);
+                XEUtils.set(fData, endField, null);
+              }
             }
-            return {
-                headKeys,
-                bodyKeys,
-                footKeys
-            };
-        });
-        const computeCustomCurrentPageFlag = computed(() => {
-            const pagerOpts = computePagerOpts.value;
-            return pagerOpts.currentPage;
-        });
-        const computeCustomPageSizeFlag = computed(() => {
-            const pagerOpts = computePagerOpts.value;
-            return pagerOpts.pageSize;
+            fData[field] = itemValue;
+          }
         });
-        const computeCustomTotalFlag = computed(() => {
-            const pagerOpts = computePagerOpts.value;
-            return pagerOpts.total;
-        });
-        const computePageCount = computed(() => {
-            const { tablePage } = reactData;
-            return Math.max(Math.ceil(tablePage.total / tablePage.pageSize), 1);
-        });
-        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,
-            refForm,
-            refToolbar,
-            refPager,
-            refPopupContainerElem
-        };
-        const computeMaps = {
-            computeSize,
-            computeIsVScrollbar,
-            computeProxyOpts,
-            computePagerOpts,
-            computeFormOpts,
-            computeToolbarOpts,
-            computeZoomOpts
-        };
-        const $xeGrid = {
-            xID,
-            props: props,
-            context,
-            reactData,
-            internalData,
-            getRefMaps: () => refMaps,
-            getComputeMaps: () => computeMaps
-        };
-        const initToolbar = () => {
-            const toolbarOpts = computeToolbarOpts.value;
-            if (props.toolbarConfig && isEnableConf(toolbarOpts)) {
-                nextTick(() => {
-                    const $xeTable = refTable.value;
-                    const $xeToolbar = refToolbar.value;
-                    if ($xeTable && $xeToolbar) {
-                        $xeTable.connectToolbar($xeToolbar);
-                    }
-                });
-            }
-        };
-        const getFormData = () => {
-            const { proxyConfig } = props;
-            const { formData } = reactData;
-            const proxyOpts = computeProxyOpts.value;
-            const formOpts = computeFormOpts.value;
-            return proxyConfig && isEnableConf(proxyOpts) && proxyOpts.form ? formData : formOpts.data;
-        };
-        const initPages = (propKey) => {
-            const { tablePage } = reactData;
-            const { pagerConfig } = props;
-            const pagerOpts = computePagerOpts.value;
-            if (pagerConfig && isEnableConf(pagerOpts)) {
-                if (propKey) {
-                    if (pagerOpts[propKey]) {
-                        tablePage[propKey] = XEUtils.toNumber(pagerOpts[propKey]);
-                    }
-                }
-                else {
-                    const { currentPage, pageSize, total } = pagerOpts;
-                    if (currentPage) {
-                        tablePage.currentPage = currentPage;
-                    }
-                    if (pageSize) {
-                        tablePage.pageSize = pageSize;
-                    }
-                    if (total) {
-                        tablePage.total = total;
-                    }
-                }
-            }
-        };
-        const triggerPendingEvent = (code) => {
-            const isActiveMsg = computeIsActiveMsg.value;
-            const $xeTable = refTable.value;
-            const selectRecords = $xeTable ? $xeTable.getCheckboxRecords() : [];
-            if (selectRecords.length) {
-                if ($xeTable) {
-                    $xeTable.togglePendingRow(selectRecords);
+        return fData;
+      }
+      return {};
+    };
+    const initProxy = () => {
+      const { proxyConfig, formConfig } = props;
+      const { proxyInited } = reactData;
+      const proxyOpts = computeProxyOpts.value;
+      const formOpts = computeFormOpts.value;
+      if (proxyConfig && isEnableConf(proxyOpts)) {
+        if (formConfig && isEnableConf(formOpts) && proxyOpts.form && formOpts.items) {
+          reactData.formData = getDefaultFormData();
+        }
+        if (!proxyInited) {
+          reactData.proxyInited = true;
+          if (proxyOpts.autoLoad !== false) {
+            nextTick().then(() => {
+              internalData.uFoot = true;
+              const rest = $xeGrid.commitProxy("initial");
+              internalData.uFoot = false;
+              updateQueryFooter();
+              return rest;
+            }).then((rest) => {
+              dispatchEvent("proxy-query", { ...rest, isInited: true }, new Event("initial"));
+            });
+          }
+        }
+      }
+    };
+    const updateQueryFooter = () => {
+      const proxyOpts = computeProxyOpts.value;
+      const { ajax } = proxyOpts;
+      if (ajax && ajax.queryFooter) {
+        return $xeGrid.commitProxy("queryFooter");
+      }
+    };
+    const handleGlobalKeydownEvent = (evnt) => {
+      const zoomOpts = computeZoomOpts.value;
+      const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
+      if (isEsc && reactData.isZMax && zoomOpts.escRestore !== false) {
+        $xeGrid.triggerZoomEvent(evnt);
+      }
+    };
+    const dispatchEvent = (type, params, evnt) => {
+      emit(type, createEvent(evnt, { $grid: $xeGrid, $gantt: null }, params));
+    };
+    const gridMethods = {
+      dispatchEvent,
+      getEl() {
+        return refElem.value;
+      },
+      /**
+       * 提交指令，支持 code 或 button
+       * @param {String/Object} code 字符串或对象
+       */
+      commitProxy(proxyTarget, ...args) {
+        const { showFooter, proxyConfig, toolbarConfig, pagerConfig, editRules, validConfig } = props;
+        const { tablePage } = reactData;
+        const isActiveMsg = computeIsActiveMsg.value;
+        const isRespMsg = computeIsRespMsg.value;
+        const proxyOpts = computeProxyOpts.value;
+        const pagerOpts = computePagerOpts.value;
+        const toolbarOpts = computeToolbarOpts.value;
+        const { beforeQuery: oldBeforeQuery, afterQuery: oldAfterQuery, beforeQueryFooter: oldBeforeQueryFooter, afterQueryFooter: oldAfterQueryFooter, beforeDelete: oldBeforeDelete, afterDelete: oldAfterDelete, beforeSave: oldBeforeSave, afterSave: oldAfterSave, ajax = {} } = proxyOpts;
+        const resConfigs = proxyOpts.response || proxyOpts.props || {};
+        const $xeTable = refTable.value;
+        if (!$xeTable) {
+          return nextTick();
+        }
+        let formData = getFormData();
+        let button = null;
+        let code = null;
+        if (XEUtils.isString(proxyTarget)) {
+          const { buttons } = toolbarOpts;
+          const matchObj = toolbarConfig && isEnableConf(toolbarOpts) && buttons ? XEUtils.findTree(buttons, (item) => item.code === proxyTarget, { children: "dropdowns" }) : null;
+          button = matchObj ? matchObj.item : null;
+          code = proxyTarget;
+        } else {
+          button = proxyTarget;
+          code = button.code;
+        }
+        const btnParams = button ? button.params : null;
+        switch (code) {
+          case "insert":
+            return $xeTable.insert({});
+          case "insert_edit":
+            return $xeTable.insert({}).then(({ row }) => $xeTable.setEditRow(row, true));
+          // 已废弃
+          case "insert_actived":
+            return $xeTable.insert({}).then(({ row }) => $xeTable.setEditRow(row, true));
+          // 已废弃
+          case "mark_cancel":
+            triggerPendingEvent(code);
+            break;
+          case "remove":
+            return handleDeleteRow(code, "vxe.grid.removeSelectRecord", () => $xeTable.removeCheckboxRow());
+          case "import":
+            $xeTable.importData(btnParams);
+            break;
+          case "open_import":
+            $xeTable.openImport(btnParams);
+            break;
+          case "export":
+            $xeTable.exportData(btnParams);
+            break;
+          case "open_export":
+            $xeTable.openExport(btnParams);
+            break;
+          case "reset_custom":
+            return $xeTable.resetCustom(true);
+          case "initial":
+          case "reload":
+          case "query": {
+            const bqMethod = ajax.beforeQuery;
+            const qMethod = ajax.query;
+            const aqMethod = ajax.afterQuery;
+            const qsMethod = ajax.querySuccess;
+            const qeMethod = ajax.queryError;
+            if (qMethod) {
+              const isInited = code === "initial";
+              const isReload = code === "reload";
+              if (!isInited && reactData.tableLoading) {
+                return nextTick();
+              }
+              let operPromise = null;
+              let sortList = [];
+              let filterList = [];
+              let pageParams = {};
+              if (pagerConfig) {
+                if (isInited || isReload) {
+                  tablePage.currentPage = 1;
                 }
-                $xeGrid.clearCheckboxRow();
-            }
-            else {
-                if (isActiveMsg) {
-                    if (VxeUI.modal) {
-                        VxeUI.modal.message({ id: code, content: getI18n('vxe.grid.selectOneRecord'), status: 'warning' });
-                    }
+                if (isEnableConf(pagerOpts)) {
+                  pageParams = { ...tablePage };
                 }
-            }
-        };
-        const getRespMsg = (rest, defaultMsg) => {
-            const proxyOpts = computeProxyOpts.value;
-            const resConfigs = proxyOpts.response || proxyOpts.props || {};
-            const messageProp = resConfigs.message;
-            const $xeTable = refTable.value;
-            let msg;
-            if (rest && messageProp) {
-                msg = XEUtils.isFunction(messageProp) ? messageProp({ data: rest, $table: $xeTable, $grid: $xeGrid, $gantt: null }) : XEUtils.get(rest, messageProp);
-            }
-            return msg || getI18n(defaultMsg);
-        };
-        const handleDeleteRow = (code, alertKey, callback) => {
-            const isActiveMsg = computeIsActiveMsg.value;
-            const selectRecords = $xeGrid.getCheckboxRecords();
-            if (isActiveMsg) {
-                if (selectRecords.length) {
-                    if (VxeUI.modal) {
-                        return VxeUI.modal.confirm({ id: `cfm_${code}`, content: getI18n(alertKey), escClosable: true }).then((type) => {
-                            if (type === 'confirm') {
-                                return callback();
-                            }
-                        });
-                    }
+              }
+              if (isInited) {
+                if (proxyConfig && isEnableConf(proxyOpts) && proxyOpts.form) {
+                  formData = getDefaultFormData();
+                  reactData.formData = formData;
                 }
-                else {
-                    if (VxeUI.modal) {
-                        VxeUI.modal.message({ id: `msg_${code}`, content: getI18n('vxe.grid.selectOneRecord'), status: 'warning' });
+                if ($xeTable) {
+                  const tableInternalData = $xeTable.internalData;
+                  const { tableFullColumn, fullColumnFieldData } = tableInternalData;
+                  const { computeSortOpts } = $xeTable.getComputeMaps();
+                  const sortOpts = computeSortOpts.value;
+                  let defaultSort = sortOpts.defaultSort;
+                  tableFullColumn.forEach((column) => {
+                    column.order = null;
+                  });
+                  if (defaultSort) {
+                    if (!XEUtils.isArray(defaultSort)) {
+                      defaultSort = [defaultSort];
                     }
-                }
-            }
-            else {
-                if (selectRecords.length) {
-                    callback();
-                }
-            }
-            return Promise.resolve();
-        };
-        const pageChangeEvent = (params) => {
-            const { proxyConfig } = props;
-            const { tablePage } = reactData;
-            const { $event, currentPage, pageSize } = params;
-            const proxyOpts = computeProxyOpts.value;
-            tablePage.currentPage = currentPage;
-            tablePage.pageSize = pageSize;
-            $xeGrid.dispatchEvent('page-change', params, $event);
-            if (proxyConfig && isEnableConf(proxyOpts)) {
-                $xeGrid.commitProxy('query').then((rest) => {
-                    $xeGrid.dispatchEvent('proxy-query', rest, $event);
-                });
-            }
-        };
-        const handleSortEvent = (params) => {
-            const $xeTable = refTable.value;
-            const { proxyConfig } = props;
-            if (!$xeTable) {
-                return;
-            }
-            const { computeSortOpts } = $xeTable.getComputeMaps();
-            const proxyOpts = computeProxyOpts.value;
-            const sortOpts = computeSortOpts.value;
-            // 如果是服务端排序
-            if (sortOpts.remote) {
-                reactData.sortData = params.sortList;
-                if (proxyConfig && isEnableConf(proxyOpts)) {
-                    reactData.tablePage.currentPage = 1;
-                    $xeGrid.commitProxy('query').then((rest) => {
-                        $xeGrid.dispatchEvent('proxy-query', rest, params.$event);
-                    });
-                }
-            }
-        };
-        const sortChangeEvent = (params) => {
-            handleSortEvent(params);
-            $xeGrid.dispatchEvent('sort-change', params, params.$event);
-        };
-        const clearAllSortEvent = (params) => {
-            handleSortEvent(params);
-            $xeGrid.dispatchEvent('clear-all-sort', params, params.$event);
-        };
-        const handleFilterEvent = (params) => {
-            const $xeTable = refTable.value;
-            const { proxyConfig } = props;
-            if (!$xeTable) {
-                return;
-            }
-            const { computeFilterOpts } = $xeTable.getComputeMaps();
-            const proxyOpts = computeProxyOpts.value;
-            const filterOpts = computeFilterOpts.value;
-            // 如果是服务端过滤
-            if (filterOpts.remote) {
-                reactData.filterData = params.filterList;
-                if (proxyConfig && isEnableConf(proxyOpts)) {
-                    reactData.tablePage.currentPage = 1;
-                    internalData.uFoot = true;
-                    $xeGrid.commitProxy('query').then((rest) => {
-                        $xeGrid.dispatchEvent('proxy-query', rest, params.$event);
+                    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
+                      };
                     });
-                    internalData.uFoot = false;
-                    updateQueryFooter();
+                  }
+                  filterList = $xeTable.getCheckedFilters();
                 }
-            }
-        };
-        const filterChangeEvent = (params) => {
-            handleFilterEvent(params);
-            $xeGrid.dispatchEvent('filter-change', params, params.$event);
-        };
-        const clearAllFilterEvent = (params) => {
-            handleFilterEvent(params);
-            $xeGrid.dispatchEvent('clear-all-filter', params, params.$event);
-        };
-        const submitFormEvent = (params) => {
-            const { proxyConfig } = props;
-            const proxyOpts = computeProxyOpts.value;
-            const formOptions = proxyOpts.formOptions || {};
-            if (reactData.tableLoading) {
-                return;
-            }
-            if (proxyConfig && isEnableConf(proxyOpts)) {
-                $xeGrid.dispatchEvent('form-submit', params, params.$event);
-                internalData.uFoot = true;
-                $xeGrid.commitProxy(formOptions.submitMode || 'reload').then((rest) => {
-                    $xeGrid.dispatchEvent('proxy-query', Object.assign(Object.assign({}, rest), { isReload: true }), params.$event);
-                });
-                internalData.uFoot = false;
-                updateQueryFooter();
-            }
-            else {
-                $xeGrid.dispatchEvent('form-submit', params, params.$event);
-            }
-        };
-        const resetFormEvent = (params) => {
-            const $xeTable = refTable.value;
-            const { proxyConfig } = props;
-            const { $event } = params;
-            const proxyOpts = computeProxyOpts.value;
-            if (proxyConfig && isEnableConf(proxyOpts)) {
-                const formOptions = proxyOpts.formOptions || {};
-                $xeGrid.dispatchEvent('form-reset', params, $event);
+              } else {
                 if ($xeTable) {
-                    $xeTable.clearScroll();
-                }
-                internalData.uFoot = true;
-                $xeGrid.commitProxy(formOptions.resetMode === 'reset_form' ? 'query' : 'reload').then((rest) => {
-                    $xeGrid.dispatchEvent('proxy-query', Object.assign(Object.assign({}, rest), { isReload: true }), $event);
-                });
-                internalData.uFoot = false;
-                updateQueryFooter();
-            }
-            else {
-                $xeGrid.dispatchEvent('form-reset', params, $event);
-            }
-        };
-        const submitInvalidEvent = (params) => {
-            $xeGrid.dispatchEvent('form-submit-invalid', params, params.$event);
-        };
-        const collapseEvent = (params) => {
-            const { $event } = params;
-            $xeGrid.dispatchEvent('form-toggle-collapse', params, $event);
-            $xeGrid.dispatchEvent('form-collapse', params, $event);
-        };
-        const handleZoom = (isMax) => {
-            const { isZMax } = reactData;
-            if (isMax ? !isZMax : isZMax) {
-                reactData.isZMax = !isZMax;
-                if (reactData.tZindex < getLastZIndex()) {
-                    reactData.tZindex = nextZIndex();
-                }
-            }
-            return nextTick()
-                .then(() => $xeGrid.recalculate(true))
-                .then(() => {
-                setTimeout(() => $xeGrid.recalculate(true), 15);
-                return reactData.isZMax;
-            });
-        };
-        const getFuncSlot = (optSlots, slotKey) => {
-            const funcSlot = optSlots[slotKey];
-            if (funcSlot) {
-                if (XEUtils.isString(funcSlot)) {
-                    if (slots[funcSlot]) {
-                        return slots[funcSlot];
-                    }
-                    else {
-                        errLog('vxe.error.notSlot', [funcSlot]);
-                    }
+                  if (isReload) {
+                    operPromise = $xeTable.clearAll();
+                  } else {
+                    sortList = $xeTable.getSortColumns();
+                    filterList = $xeTable.getCheckedFilters();
+                  }
                 }
-                else {
-                    return funcSlot;
-                }
-            }
-            return null;
-        };
-        const getConfigSlot = (slotConfigs) => {
-            const slotConf = {};
-            XEUtils.objectMap(slotConfigs, (slotFunc, slotKey) => {
-                if (slotFunc) {
-                    if (XEUtils.isString(slotFunc)) {
-                        if (slots[slotFunc]) {
-                            slotConf[slotKey] = slots[slotFunc];
+              }
+              const commitParams = {
+                $table: $xeTable,
+                $grid: $xeGrid,
+                $gantt: null,
+                code,
+                button,
+                isInited,
+                isReload,
+                page: pageParams,
+                sort: sortList.length ? sortList[0] : {},
+                sorts: sortList,
+                filters: filterList,
+                form: formData,
+                options: qMethod
+              };
+              const handleQuery = () => {
+                reactData.sortData = sortList;
+                reactData.filterData = filterList;
+                reactData.tableLoading = true;
+                return Promise.all([
+                  Promise.resolve((oldBeforeQuery || qMethod)(commitParams, ...args)),
+                  operPromise
+                ]).then(([rest]) => {
+                  reactData.tableLoading = false;
+                  if (aqMethod) {
+                    aqMethod({ ...commitParams, response: rest, status: "success" }, ...args);
+                  } else {
+                    let tableData = [];
+                    if (rest) {
+                      const listProp = resConfigs.list;
+                      const resultProp = resConfigs.result;
+                      const reParams = { data: rest, $table: $xeTable, $grid: $xeGrid, $gantt: null };
+                      if (pagerConfig && isEnableConf(pagerOpts)) {
+                        const totalProp = resConfigs.total;
+                        const total = (XEUtils.isFunction(totalProp) ? totalProp(reParams) : XEUtils.get(rest, totalProp || "page.total")) || 0;
+                        tablePage.total = XEUtils.toNumber(total);
+                        tableData = (XEUtils.isFunction(resultProp) ? resultProp(reParams) : XEUtils.get(rest, resultProp || "result")) || [];
+                        const pageCount = Math.max(Math.ceil(total / tablePage.pageSize), 1);
+                        if (tablePage.currentPage > pageCount) {
+                          tablePage.currentPage = pageCount;
                         }
-                        else {
-                            errLog('vxe.error.notSlot', [slotFunc]);
+                      } else {
+                        if (XEUtils.isArray(rest)) {
+                          tableData = rest;
+                        } else if (listProp) {
+                          tableData = (XEUtils.isFunction(listProp) ? listProp(reParams) : XEUtils.get(rest, listProp)) || [];
                         }
-                    }
-                    else {
-                        slotConf[slotKey] = slotFunc;
-                    }
-                }
-            });
-            return slotConf;
-        };
-        /**
-         * 渲染表单
-         */
-        const renderForm = () => {
-            const { formConfig, proxyConfig } = props;
-            const { formData } = reactData;
-            const proxyOpts = computeProxyOpts.value;
-            const formOpts = computeFormOpts.value;
-            if ((formConfig && isEnableConf(formOpts)) || slots.form) {
-                let slotVNs = [];
-                if (slots.form) {
-                    slotVNs = slots.form({ $grid: $xeGrid, $gantt: null });
-                }
-                else {
-                    if (formOpts.items) {
-                        const formSlots = {};
-                        if (!formOpts.inited) {
-                            formOpts.inited = true;
-                            const beforeItem = proxyOpts.beforeItem;
-                            if (proxyOpts && beforeItem) {
-                                formOpts.items.forEach((item) => {
-                                    beforeItem({ $grid: $xeGrid, $gantt: null, item });
-                                });
-                            }
-                        }
-                        // 处理插槽
-                        formOpts.items.forEach((item) => {
-                            XEUtils.each(item.slots, (func) => {
-                                if (func && !XEUtils.isFunction(func)) {
-                                    if (slots[func]) {
-                                        formSlots[func] = slots[func];
-                                    }
-                                }
-                            });
-                        });
-                        if (VxeUIFormComponent) {
-                            slotVNs.push(h(VxeUIFormComponent, Object.assign(Object.assign({ ref: refForm }, Object.assign({}, formOpts, {
-                                data: proxyConfig && isEnableConf(proxyOpts) && proxyOpts.form ? formData : formOpts.data
-                            })), { onSubmit: submitFormEvent, onReset: resetFormEvent, onSubmitInvalid: submitInvalidEvent, onCollapse: collapseEvent }), formSlots));
+                      }
+                      if (showFooter) {
+                        const fdProp = resConfigs.footerData;
+                        const footerList = fdProp ? XEUtils.isFunction(fdProp) ? fdProp(reParams) : XEUtils.get(rest, fdProp) : [];
+                        if (XEUtils.isArray(footerList)) {
+                          reactData.footerData = footerList;
                         }
+                      }
                     }
-                }
-                return h('div', {
-                    ref: refFormWrapper,
-                    key: 'form',
-                    class: 'vxe-grid--form-wrapper'
-                }, slotVNs);
-            }
-            return renderEmptyElement($xeGrid);
-        };
-        /**
-         * 渲染工具栏
-         */
-        const renderToolbar = () => {
-            const { toolbarConfig } = props;
-            const toolbarOpts = computeToolbarOpts.value;
-            const toolbarSlot = slots.toolbar;
-            if ((toolbarConfig && isEnableConf(toolbarOpts)) || toolbarSlot) {
-                let slotVNs = [];
-                if (toolbarSlot) {
-                    slotVNs = toolbarSlot({ $grid: $xeGrid, $gantt: null });
-                }
-                else {
-                    const toolbarOptSlots = toolbarOpts.slots;
-                    const toolbarSlots = {};
-                    if (toolbarOptSlots) {
-                        const buttonsSlot = getFuncSlot(toolbarOptSlots, 'buttons');
-                        const buttonPrefixSlot = getFuncSlot(toolbarOptSlots, 'buttonPrefix');
-                        const buttonSuffixSlot = getFuncSlot(toolbarOptSlots, 'buttonSuffix');
-                        const toolsSlot = getFuncSlot(toolbarOptSlots, 'tools');
-                        const toolPrefixSlot = getFuncSlot(toolbarOptSlots, 'toolPrefix');
-                        const toolSuffixSlot = getFuncSlot(toolbarOptSlots, 'toolSuffix');
-                        if (buttonsSlot) {
-                            toolbarSlots.buttons = buttonsSlot;
-                        }
-                        if (buttonPrefixSlot) {
-                            toolbarSlots.buttonPrefix = buttonPrefixSlot;
-                        }
-                        if (buttonSuffixSlot) {
-                            toolbarSlots.buttonSuffix = buttonSuffixSlot;
-                        }
-                        if (toolsSlot) {
-                            toolbarSlots.tools = toolsSlot;
-                        }
-                        if (toolPrefixSlot) {
-                            toolbarSlots.toolPrefix = toolPrefixSlot;
-                        }
-                        if (toolSuffixSlot) {
-                            toolbarSlots.toolSuffix = toolSuffixSlot;
+                    if ($xeTable) {
+                      $xeTable.loadData(tableData);
+                    } else {
+                      nextTick(() => {
+                        const $xeTable2 = refTable.value;
+                        if ($xeTable2) {
+                          $xeTable2.loadData(tableData);
                         }
+                      });
                     }
-                    slotVNs.push(h(VxeToolbarComponent, Object.assign(Object.assign({ ref: refToolbar }, toolbarOpts), { slots: undefined }), toolbarSlots));
-                }
-                return h('div', {
-                    ref: refToolbarWrapper,
-                    key: 'toolbar',
-                    class: 'vxe-grid--toolbar-wrapper'
-                }, slotVNs);
-            }
-            return renderEmptyElement($xeGrid);
-        };
-        /**
-         * 渲染表格顶部区域
-         */
-        const renderTop = () => {
-            const topSlot = slots.top;
-            if (topSlot) {
-                return h('div', {
-                    ref: refTopWrapper,
-                    key: 'top',
-                    class: 'vxe-grid--top-wrapper'
-                }, topSlot({ $grid: $xeGrid, $gantt: null }));
-            }
-            return renderEmptyElement($xeGrid);
-        };
-        const renderTableLeft = () => {
-            const leftSlot = slots.left;
-            if (leftSlot) {
-                return h('div', {
-                    class: 'vxe-grid--left-wrapper'
-                }, leftSlot({ $grid: $xeGrid, $gantt: null }));
-            }
-            return renderEmptyElement($xeGrid);
-        };
-        const renderTableRight = () => {
-            const rightSlot = slots.right;
-            if (rightSlot) {
-                return h('div', {
-                    class: 'vxe-grid--right-wrapper'
-                }, rightSlot({ $grid: $xeGrid, $gantt: null }));
-            }
-            return renderEmptyElement($xeGrid);
-        };
-        /**
-         * 渲染表格
-         */
-        const renderTable = () => {
-            const { proxyConfig } = props;
-            const tableProps = computeTableProps.value;
-            const proxyOpts = computeProxyOpts.value;
-            const tableOns = Object.assign({}, tableCompEvents);
-            const emptySlot = slots.empty;
-            const loadingSlot = slots.loading;
-            const rowDragIconSlot = slots.rowDragIcon || slots['row-drag-icon'];
-            const columnDragIconSlot = slots.columnDragIcon || slots['column-drag-icon'];
-            const headerTooltipSlot = slots.headerTooltip || slots['header-tooltip'];
-            const tooltipSlot = slots.tooltip;
-            const footerTooltipSlot = slots.footerTooltip || slots['footer-tooltip'];
-            if (proxyConfig && isEnableConf(proxyOpts)) {
-                if (proxyOpts.sort) {
-                    tableOns.onSortChange = sortChangeEvent;
-                    tableOns.onClearAllSort = clearAllSortEvent;
-                }
-                if (proxyOpts.filter) {
-                    tableOns.onFilterChange = filterChangeEvent;
-                    tableOns.onClearAllFilter = clearAllFilterEvent;
-                }
-            }
-            const slotObj = {};
-            if (emptySlot) {
-                slotObj.empty = emptySlot;
-            }
-            if (loadingSlot) {
-                slotObj.loading = loadingSlot;
-            }
-            if (rowDragIconSlot) {
-                slotObj.rowDragIcon = rowDragIconSlot;
-            }
-            if (columnDragIconSlot) {
-                slotObj.columnDragIcon = columnDragIconSlot;
-            }
-            if (headerTooltipSlot) {
-                slotObj.headerTooltip = headerTooltipSlot;
-            }
-            if (tooltipSlot) {
-                slotObj.tooltip = tooltipSlot;
-            }
-            if (footerTooltipSlot) {
-                slotObj.footerTooltip = footerTooltipSlot;
-            }
-            return h('div', {
-                class: 'vxe-grid--table-wrapper'
-            }, [
-                h(VxeTableComponent, Object.assign(Object.assign({ ref: refTable }, tableProps), tableOns), slotObj)
-            ]);
-        };
-        /**
-         * 渲染表格底部区域
-         */
-        const renderBottom = () => {
-            if (slots.bottom) {
-                return h('div', {
-                    ref: refBottomWrapper,
-                    key: 'bottom',
-                    class: 'vxe-grid--bottom-wrapper'
-                }, slots.bottom({ $grid: $xeGrid, $gantt: null }));
-            }
-            return renderEmptyElement($xeGrid);
-        };
-        /**
-         * 渲染分页
-         */
-        const renderPager = () => {
-            const { proxyConfig, pagerConfig } = props;
-            const proxyOpts = computeProxyOpts.value;
-            const pagerOpts = computePagerOpts.value;
-            const pagerProps = computePagerProps.value;
-            const pagerSlot = slots.pager;
-            if ((pagerConfig && isEnableConf(pagerOpts)) || slots.pager) {
-                return h('div', {
-                    ref: refPagerWrapper,
-                    key: 'pager',
-                    class: 'vxe-grid--pager-wrapper'
-                }, pagerSlot
-                    ? pagerSlot({ $grid: $xeGrid, $gantt: null })
-                    : [
-                        VxeUIPagerComponent
-                            ? h(VxeUIPagerComponent, Object.assign(Object.assign(Object.assign({ ref: refPager }, pagerProps), (proxyConfig && isEnableConf(proxyOpts) ? reactData.tablePage : {})), { onPageChange: pageChangeEvent }), getConfigSlot(pagerOpts.slots))
-                            : renderEmptyElement($xeGrid)
-                    ]);
-            }
-            return renderEmptyElement($xeGrid);
-        };
-        const renderChildLayout = (layoutKeys) => {
-            const childVNs = [];
-            layoutKeys.forEach(key => {
-                switch (key) {
-                    case 'Form':
-                        childVNs.push(renderForm());
-                        break;
-                    case 'Toolbar':
-                        childVNs.push(renderToolbar());
-                        break;
-                    case 'Top':
-                        childVNs.push(renderTop());
-                        break;
-                    case 'Table':
-                        childVNs.push(h('div', {
-                            key: 'table',
-                            class: 'vxe-grid--table-container'
-                        }, [
-                            renderTableLeft(),
-                            renderTable(),
-                            renderTableRight()
-                        ]));
-                        break;
-                    case 'Bottom':
-                        childVNs.push(renderBottom());
-                        break;
-                    case 'Pager':
-                        childVNs.push(renderPager());
-                        break;
-                    default:
-                        errLog('vxe.error.notProp', [`layouts -> ${key}`]);
-                        break;
-                }
-            });
-            return childVNs;
-        };
-        const renderLayout = () => {
-            const currLayoutConf = computeCurrLayoutConf.value;
-            const { headKeys, bodyKeys, footKeys } = currLayoutConf;
-            const asideLeftSlot = slots.asideLeft || slots['aside-left'];
-            const asideRightSlot = slots.asideRight || slots['aside-right'];
-            return [
-                h('div', {
-                    class: 'vxe-grid--layout-header-wrapper'
-                }, renderChildLayout(headKeys)),
-                h('div', {
-                    class: 'vxe-grid--layout-body-wrapper'
-                }, [
-                    asideLeftSlot
-                        ? h('div', {
-                            class: 'vxe-grid--layout-aside-left-wrapper'
-                        }, asideLeftSlot({}))
-                        : renderEmptyElement($xeGrid),
-                    h('div', {
-                        class: 'vxe-grid--layout-body-content-wrapper'
-                    }, renderChildLayout(bodyKeys)),
-                    asideRightSlot
-                        ? h('div', {
-                            class: 'vxe-grid--layout-aside-right-wrapper'
-                        }, asideRightSlot({}))
-                        : renderEmptyElement($xeGrid)
-                ]),
-                h('div', {
-                    class: 'vxe-grid--layout-footer-wrapper'
-                }, renderChildLayout(footKeys)),
-                h('div', {
-                    ref: refPopupContainerElem
-                })
-            ];
-        };
-        const tableCompEvents = {};
-        tableEmits.forEach(name => {
-            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 { startField, endField, defaultValue } = itemRender;
-                            if (XEUtils.isFunction(defaultValue)) {
-                                itemValue = defaultValue({ item });
-                            }
-                            else if (!XEUtils.isUndefined(defaultValue)) {
-                                itemValue = defaultValue;
-                            }
-                            if (startField && endField) {
-                                XEUtils.set(fData, startField, null);
-                                XEUtils.set(fData, endField, null);
-                            }
-                        }
-                        fData[field] = itemValue;
+                    if (oldAfterQuery) {
+                      oldAfterQuery({ ...commitParams, response: rest }, ...args);
                     }
+                  }
+                  if (qsMethod) {
+                    qsMethod({ ...commitParams, response: rest });
+                  }
+                  return { status: true };
+                }).catch((rest) => {
+                  reactData.tableLoading = false;
+                  if (aqMethod) {
+                    aqMethod({ ...commitParams, response: rest, status: "error" }, ...args);
+                  }
+                  if (qeMethod) {
+                    qeMethod({ ...commitParams, response: rest });
+                  }
+                  return { status: false };
+                });
+              };
+              if (bqMethod) {
+                return Promise.resolve(bqMethod(commitParams, ...args)).then((status) => {
+                  if (status !== false) {
+                    return handleQuery();
+                  }
                 });
-                return fData;
+              }
+              return handleQuery();
+            } else {
+              errLog("vxe.error.notFunc", ["proxy-config.ajax.query"]);
             }
-            return {};
-        };
-        const initProxy = () => {
-            const { proxyConfig, formConfig } = props;
-            const { proxyInited } = reactData;
-            const proxyOpts = computeProxyOpts.value;
-            const formOpts = computeFormOpts.value;
-            if (proxyConfig && isEnableConf(proxyOpts)) {
-                if (formConfig && isEnableConf(formOpts) && proxyOpts.form && formOpts.items) {
-                    reactData.formData = getDefaultFormData();
+            break;
+          }
+          case "queryFooter":
+          case "query_footer": {
+            const bqfMethod = ajax.beforeQueryFooter;
+            const qfMethod = ajax.queryFooter;
+            const aqfMethod = ajax.afterQueryFooter;
+            const qfSuccessMethod = ajax.queryFooterSuccess;
+            const qfErrorMethod = ajax.queryFooterError;
+            if (qfMethod) {
+              let filterList = [];
+              if ($xeTable) {
+                filterList = $xeTable.getCheckedFilters();
+              }
+              let pageParams = {};
+              if (pagerConfig) {
+                if (isEnableConf(pagerOpts)) {
+                  pageParams = { ...tablePage };
                 }
-                if (!proxyInited) {
-                    reactData.proxyInited = true;
-                    if (proxyOpts.autoLoad !== false) {
-                        nextTick().then(() => {
-                            internalData.uFoot = true;
-                            const rest = $xeGrid.commitProxy('initial');
-                            internalData.uFoot = false;
-                            updateQueryFooter();
-                            return rest;
-                        }).then((rest) => {
-                            dispatchEvent('proxy-query', Object.assign(Object.assign({}, rest), { isInited: true }), new Event('initial'));
-                        });
+              }
+              const commitParams = {
+                $table: $xeTable,
+                $grid: $xeGrid,
+                $gantt: null,
+                code,
+                button,
+                page: pageParams,
+                filters: filterList,
+                form: formData,
+                options: qfMethod
+              };
+              const handleQueryFooter = () => {
+                return Promise.resolve((oldBeforeQueryFooter || qfMethod)(commitParams, ...args)).then((rest) => {
+                  if (aqfMethod) {
+                    aqfMethod({ ...commitParams, response: rest, status: "success" }, ...args);
+                  } else {
+                    reactData.footerData = XEUtils.isArray(rest) ? rest : [];
+                    if (oldAfterQueryFooter) {
+                      oldAfterQueryFooter({ ...commitParams, response: rest }, ...args);
                     }
-                }
-            }
-        };
-        const updateQueryFooter = () => {
-            const proxyOpts = computeProxyOpts.value;
-            const { ajax } = proxyOpts;
-            if (ajax && ajax.queryFooter) {
-                return $xeGrid.commitProxy('queryFooter');
-            }
-        };
-        const handleGlobalKeydownEvent = (evnt) => {
-            const zoomOpts = computeZoomOpts.value;
-            const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
-            if (isEsc && reactData.isZMax && zoomOpts.escRestore !== false) {
-                $xeGrid.triggerZoomEvent(evnt);
+                  }
+                  if (qfSuccessMethod) {
+                    qfSuccessMethod({ ...commitParams, response: rest });
+                  }
+                  return { status: true };
+                }).catch((rest) => {
+                  if (aqfMethod) {
+                    aqfMethod({ ...commitParams, response: rest, status: "error" }, ...args);
+                  }
+                  if (qfErrorMethod) {
+                    qfErrorMethod({ ...commitParams, response: rest });
+                  }
+                  return { status: false };
+                });
+              };
+              if (bqfMethod) {
+                return Promise.resolve(bqfMethod(commitParams, ...args)).then((status) => {
+                  if (status !== false) {
+                    return handleQueryFooter();
+                  }
+                });
+              }
+              return handleQueryFooter();
+            } else {
+              errLog("vxe.error.notFunc", ["proxy-config.ajax.queryFooter"]);
             }
-        };
-        const dispatchEvent = (type, params, evnt) => {
-            emit(type, createEvent(evnt, { $grid: $xeGrid, $gantt: null }, params));
-        };
-        const gridMethods = {
-            dispatchEvent,
-            getEl() {
-                return refElem.value;
-            },
-            /**
-             * 提交指令，支持 code 或 button
-             * @param {String/Object} code 字符串或对象
-             */
-            commitProxy(proxyTarget, ...args) {
-                const { showFooter, proxyConfig, toolbarConfig, pagerConfig, editRules, validConfig } = props;
-                const { tablePage } = reactData;
-                const isActiveMsg = computeIsActiveMsg.value;
-                const isRespMsg = computeIsRespMsg.value;
-                const proxyOpts = computeProxyOpts.value;
-                const pagerOpts = computePagerOpts.value;
-                const toolbarOpts = computeToolbarOpts.value;
-                const { beforeQuery: oldBeforeQuery, afterQuery: oldAfterQuery, beforeQueryFooter: oldBeforeQueryFooter, afterQueryFooter: oldAfterQueryFooter, beforeDelete: oldBeforeDelete, afterDelete: oldAfterDelete, beforeSave: oldBeforeSave, afterSave: oldAfterSave, ajax = {} } = proxyOpts;
-                const resConfigs = (proxyOpts.response || proxyOpts.props || {});
-                const $xeTable = refTable.value;
-                if (!$xeTable) {
-                    return nextTick();
-                }
-                let formData = getFormData();
-                let button = null;
-                let code = null;
-                if (XEUtils.isString(proxyTarget)) {
-                    const { buttons } = toolbarOpts;
-                    const matchObj = toolbarConfig && isEnableConf(toolbarOpts) && buttons ? XEUtils.findTree(buttons, (item) => item.code === proxyTarget, { children: 'dropdowns' }) : null;
-                    button = matchObj ? matchObj.item : null;
-                    code = proxyTarget;
-                }
-                else {
-                    button = proxyTarget;
-                    code = button.code;
-                }
-                const btnParams = button ? button.params : null;
-                switch (code) {
-                    case 'insert':
-                        return $xeTable.insert({});
-                    case 'insert_edit':
-                        return $xeTable.insert({}).then(({ row }) => $xeTable.setEditRow(row, true));
-                    // 已废弃
-                    case 'insert_actived':
-                        return $xeTable.insert({}).then(({ row }) => $xeTable.setEditRow(row, true));
-                    // 已废弃
-                    case 'mark_cancel':
-                        triggerPendingEvent(code);
-                        break;
-                    case 'remove':
-                        return handleDeleteRow(code, 'vxe.grid.removeSelectRecord', () => $xeTable.removeCheckboxRow());
-                    case 'import':
-                        $xeTable.importData(btnParams);
-                        break;
-                    case 'open_import':
-                        $xeTable.openImport(btnParams);
-                        break;
-                    case 'export':
-                        $xeTable.exportData(btnParams);
-                        break;
-                    case 'open_export':
-                        $xeTable.openExport(btnParams);
-                        break;
-                    case 'reset_custom':
-                        return $xeTable.resetCustom(true);
-                    case 'initial':
-                    case 'reload':
-                    case 'query': {
-                        const bqMethod = ajax.beforeQuery;
-                        const qMethod = ajax.query;
-                        const aqMethod = ajax.afterQuery;
-                        const qsMethod = ajax.querySuccess;
-                        const qeMethod = ajax.queryError;
-                        if (qMethod) {
-                            const isInited = code === 'initial';
-                            const isReload = code === 'reload';
-                            if (!isInited && reactData.tableLoading) {
-                                return nextTick();
-                            }
-                            let operPromise = null;
-                            let sortList = [];
-                            let filterList = [];
-                            let pageParams = {};
-                            if (pagerConfig) {
-                                if (isInited || isReload) {
-                                    // 重置分页
-                                    tablePage.currentPage = 1;
-                                }
-                                if (isEnableConf(pagerOpts)) {
-                                    pageParams = Object.assign({}, tablePage);
-                                }
-                            }
-                            if (isInited) {
-                                // 重置代理表单数据
-                                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;
-                                    let defaultSort = sortOpts.defaultSort;
-                                    tableFullColumn.forEach((column) => {
-                                        column.order = null;
-                                    });
-                                    // 如果使用默认排序
-                                    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();
-                                }
-                            }
-                            else {
-                                if ($xeTable) {
-                                    if (isReload) {
-                                        operPromise = $xeTable.clearAll();
-                                    }
-                                    else {
-                                        sortList = $xeTable.getSortColumns();
-                                        filterList = $xeTable.getCheckedFilters();
-                                    }
-                                }
-                            }
-                            const commitParams = {
-                                $table: $xeTable,
-                                $grid: $xeGrid,
-                                $gantt: null,
-                                code,
-                                button,
-                                isInited,
-                                isReload,
-                                page: pageParams,
-                                sort: sortList.length ? sortList[0] : {},
-                                sorts: sortList,
-                                filters: filterList,
-                                form: formData,
-                                options: qMethod
-                            };
-                            const handleQuery = () => {
-                                reactData.sortData = sortList;
-                                reactData.filterData = filterList;
-                                reactData.tableLoading = true;
-                                return Promise.all([
-                                    Promise.resolve((oldBeforeQuery || qMethod)(commitParams, ...args)),
-                                    operPromise
-                                ]).then(([rest]) => {
-                                    reactData.tableLoading = false;
-                                    if (aqMethod) {
-                                        aqMethod(Object.assign(Object.assign({}, commitParams), { response: rest, status: 'success' }), ...args);
-                                    }
-                                    else {
-                                        let tableData = [];
-                                        if (rest) {
-                                            const listProp = resConfigs.list;
-                                            const resultProp = resConfigs.result;
-                                            const reParams = { data: rest, $table: $xeTable, $grid: $xeGrid, $gantt: null };
-                                            if (pagerConfig && isEnableConf(pagerOpts)) {
-                                                const totalProp = resConfigs.total;
-                                                const total = (XEUtils.isFunction(totalProp) ? totalProp(reParams) : XEUtils.get(rest, totalProp || 'page.total')) || 0;
-                                                tablePage.total = XEUtils.toNumber(total);
-                                                tableData = (XEUtils.isFunction(resultProp) ? resultProp(reParams) : XEUtils.get(rest, resultProp || 'result')) || [];
-                                                // 检验当前页码，不能超出当前最大页数
-                                                const pageCount = Math.max(Math.ceil(total / tablePage.pageSize), 1);
-                                                if (tablePage.currentPage > pageCount) {
-                                                    tablePage.currentPage = pageCount;
-                                                }
-                                            }
-                                            else {
-                                                if (XEUtils.isArray(rest)) {
-                                                    tableData = rest;
-                                                }
-                                                else if (listProp) {
-                                                    tableData = (XEUtils.isFunction(listProp) ? listProp(reParams) : XEUtils.get(rest, listProp)) || [];
-                                                }
-                                            }
-                                            if (showFooter) {
-                                                const fdProp = resConfigs.footerData;
-                                                const footerList = fdProp ? (XEUtils.isFunction(fdProp) ? fdProp(reParams) : XEUtils.get(rest, fdProp)) : [];
-                                                if (XEUtils.isArray(footerList)) {
-                                                    reactData.footerData = footerList;
-                                                }
-                                            }
-                                        }
-                                        if ($xeTable) {
-                                            $xeTable.loadData(tableData);
-                                        }
-                                        else {
-                                            nextTick(() => {
-                                                const $xeTable = refTable.value;
-                                                if ($xeTable) {
-                                                    $xeTable.loadData(tableData);
-                                                }
-                                            });
-                                        }
-                                        if (oldAfterQuery) {
-                                            oldAfterQuery(Object.assign(Object.assign({}, commitParams), { response: rest }), ...args);
-                                        }
-                                    }
-                                    if (qsMethod) {
-                                        qsMethod(Object.assign(Object.assign({}, commitParams), { response: rest }));
-                                    }
-                                    return { status: true };
-                                }).catch((rest) => {
-                                    reactData.tableLoading = false;
-                                    if (aqMethod) {
-                                        aqMethod(Object.assign(Object.assign({}, commitParams), { response: rest, status: 'error' }), ...args);
-                                    }
-                                    if (qeMethod) {
-                                        qeMethod(Object.assign(Object.assign({}, commitParams), { response: rest }));
-                                    }
-                                    return { status: false };
-                                });
-                            };
-                            if (bqMethod) {
-                                return Promise.resolve(bqMethod(commitParams, ...args)).then(status => {
-                                    if (status !== false) {
-                                        return handleQuery();
-                                    }
-                                });
-                            }
-                            return handleQuery();
+            break;
+          }
+          case "delete": {
+            const bdMethod = ajax.beforeDelete;
+            const dMethod = ajax.delete;
+            const adMethod = ajax.afterDelete;
+            const deleteSuccessMethods = ajax.deleteSuccess;
+            const deleteErrorMethods = ajax.deleteError;
+            if (dMethod) {
+              const selectRecords = $xeGrid.getCheckboxRecords();
+              const removeRecords = selectRecords.filter((row) => !$xeTable.isInsertByRow(row));
+              const body = { removeRecords };
+              const commitParams = {
+                $table: $xeTable,
+                $grid: $xeGrid,
+                $gantt: null,
+                code,
+                button,
+                body,
+                form: formData,
+                options: dMethod
+              };
+              if (selectRecords.length) {
+                return handleDeleteRow(code, "vxe.grid.deleteSelectRecord", () => {
+                  if (!removeRecords.length) {
+                    return $xeTable.remove(selectRecords);
+                  }
+                  const handleDelete = () => {
+                    reactData.tableLoading = true;
+                    return Promise.resolve((oldBeforeDelete || dMethod)(commitParams, ...args)).then((rest) => {
+                      reactData.tableLoading = false;
+                      if (adMethod) {
+                        adMethod({ ...commitParams, response: rest, status: "success" }, ...args);
+                      } else {
+                        $xeTable.setPendingRow(removeRecords, false);
+                        if (isRespMsg) {
+                          if (VxeUI.modal) {
+                            VxeUI.modal.message({ content: getRespMsg(rest, "vxe.grid.delSuccess"), status: "success" });
+                          }
                         }
-                        else {
-                            errLog('vxe.error.notFunc', ['proxy-config.ajax.query']);
+                        if (oldAfterDelete) {
+                          oldAfterDelete({ ...commitParams, response: rest }, ...args);
+                        } else {
+                          internalData.uFoot = true;
+                          $xeGrid.commitProxy("query");
+                          internalData.uFoot = false;
+                          updateQueryFooter();
                         }
-                        break;
-                    }
-                    case 'queryFooter':
-                    case 'query_footer': {
-                        const bqfMethod = ajax.beforeQueryFooter;
-                        const qfMethod = ajax.queryFooter;
-                        const aqfMethod = ajax.afterQueryFooter;
-                        const qfSuccessMethod = ajax.queryFooterSuccess;
-                        const qfErrorMethod = ajax.queryFooterError;
-                        if (qfMethod) {
-                            let filterList = [];
-                            if ($xeTable) {
-                                filterList = $xeTable.getCheckedFilters();
-                            }
-                            let pageParams = {};
-                            if (pagerConfig) {
-                                if (isEnableConf(pagerOpts)) {
-                                    pageParams = Object.assign({}, tablePage);
-                                }
-                            }
-                            const commitParams = {
-                                $table: $xeTable,
-                                $grid: $xeGrid,
-                                $gantt: null,
-                                code,
-                                button,
-                                page: pageParams,
-                                filters: filterList,
-                                form: formData,
-                                options: qfMethod
-                            };
-                            const handleQueryFooter = () => {
-                                return Promise.resolve((oldBeforeQueryFooter || qfMethod)(commitParams, ...args)).then(rest => {
-                                    if (aqfMethod) {
-                                        aqfMethod(Object.assign(Object.assign({}, commitParams), { response: rest, status: 'success' }), ...args);
-                                    }
-                                    else {
-                                        reactData.footerData = XEUtils.isArray(rest) ? rest : [];
-                                        if (oldAfterQueryFooter) {
-                                            oldAfterQueryFooter(Object.assign(Object.assign({}, commitParams), { response: rest }), ...args);
-                                        }
-                                    }
-                                    if (qfSuccessMethod) {
-                                        qfSuccessMethod(Object.assign(Object.assign({}, commitParams), { response: rest }));
-                                    }
-                                    return { status: true };
-                                }).catch((rest) => {
-                                    if (aqfMethod) {
-                                        aqfMethod(Object.assign(Object.assign({}, commitParams), { response: rest, status: 'error' }), ...args);
-                                    }
-                                    if (qfErrorMethod) {
-                                        qfErrorMethod(Object.assign(Object.assign({}, commitParams), { response: rest }));
-                                    }
-                                    return { status: false };
-                                });
-                            };
-                            if (bqfMethod) {
-                                return Promise.resolve(bqfMethod(commitParams, ...args)).then(status => {
-                                    if (status !== false) {
-                                        return handleQueryFooter();
-                                    }
-                                });
-                            }
-                            return handleQueryFooter();
-                        }
-                        else {
-                            errLog('vxe.error.notFunc', ['proxy-config.ajax.queryFooter']);
-                        }
-                        break;
-                    }
-                    case 'delete': {
-                        const bdMethod = ajax.beforeDelete;
-                        const dMethod = ajax.delete;
-                        const adMethod = ajax.afterDelete;
-                        const deleteSuccessMethods = ajax.deleteSuccess;
-                        const deleteErrorMethods = ajax.deleteError;
-                        if (dMethod) {
-                            const selectRecords = $xeGrid.getCheckboxRecords();
-                            const removeRecords = selectRecords.filter(row => !$xeTable.isInsertByRow(row));
-                            const body = { removeRecords };
-                            const commitParams = {
-                                $table: $xeTable,
-                                $grid: $xeGrid,
-                                $gantt: null,
-                                code,
-                                button,
-                                body,
-                                form: formData,
-                                options: dMethod
-                            };
-                            if (selectRecords.length) {
-                                return handleDeleteRow(code, 'vxe.grid.deleteSelectRecord', () => {
-                                    if (!removeRecords.length) {
-                                        return $xeTable.remove(selectRecords);
-                                    }
-                                    const handleDelete = () => {
-                                        reactData.tableLoading = true;
-                                        return Promise.resolve((oldBeforeDelete || dMethod)(commitParams, ...args))
-                                            .then(rest => {
-                                            reactData.tableLoading = false;
-                                            if (adMethod) {
-                                                adMethod(Object.assign(Object.assign({}, commitParams), { response: rest, status: 'success' }), ...args);
-                                            }
-                                            else {
-                                                $xeTable.setPendingRow(removeRecords, false);
-                                                if (isRespMsg) {
-                                                    if (VxeUI.modal) {
-                                                        VxeUI.modal.message({ content: getRespMsg(rest, 'vxe.grid.delSuccess'), status: 'success' });
-                                                    }
-                                                }
-                                                if (oldAfterDelete) {
-                                                    oldAfterDelete(Object.assign(Object.assign({}, commitParams), { response: rest }), ...args);
-                                                }
-                                                else {
-                                                    internalData.uFoot = true;
-                                                    $xeGrid.commitProxy('query');
-                                                    internalData.uFoot = false;
-                                                    updateQueryFooter();
-                                                }
-                                            }
-                                            if (deleteSuccessMethods) {
-                                                deleteSuccessMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
-                                            }
-                                            return { status: true };
-                                        })
-                                            .catch(rest => {
-                                            reactData.tableLoading = false;
-                                            if (adMethod) {
-                                                adMethod(Object.assign(Object.assign({}, commitParams), { response: rest, status: 'error' }), ...args);
-                                            }
-                                            else {
-                                                if (isRespMsg) {
-                                                    if (VxeUI.modal) {
-                                                        VxeUI.modal.message({ id: code, content: getRespMsg(rest, 'vxe.grid.operError'), status: 'error' });
-                                                    }
-                                                }
-                                            }
-                                            if (deleteErrorMethods) {
-                                                deleteErrorMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
-                                            }
-                                            return { status: false };
-                                        });
-                                    };
-                                    if (bdMethod) {
-                                        return Promise.resolve(bdMethod(commitParams, ...args)).then(status => {
-                                            if (status !== false) {
-                                                return handleDelete();
-                                            }
-                                        });
-                                    }
-                                    return handleDelete();
-                                });
-                            }
-                            else {
-                                if (isActiveMsg) {
-                                    if (VxeUI.modal) {
-                                        VxeUI.modal.message({ id: code, content: getI18n('vxe.grid.selectOneRecord'), status: 'warning' });
-                                    }
-                                }
-                            }
-                        }
-                        else {
-                            errLog('vxe.error.notFunc', ['proxy-config.ajax.delete']);
+                      }
+                      if (deleteSuccessMethods) {
+                        deleteSuccessMethods({ ...commitParams, response: rest });
+                      }
+                      return { status: true };
+                    }).catch((rest) => {
+                      reactData.tableLoading = false;
+                      if (adMethod) {
+                        adMethod({ ...commitParams, response: rest, status: "error" }, ...args);
+                      } else {
+                        if (isRespMsg) {
+                          if (VxeUI.modal) {
+                            VxeUI.modal.message({ id: code, content: getRespMsg(rest, "vxe.grid.operError"), status: "error" });
+                          }
                         }
-                        break;
-                    }
-                    case 'save': {
-                        const bSaveMethod = ajax.beforeSave;
-                        const sMethod = ajax.save;
-                        const aSaveMethod = ajax.afterSave;
-                        const sSuccessMethod = ajax.saveSuccess;
-                        const sErrorMethod = ajax.saveError;
-                        if (sMethod) {
-                            const body = $xeTable.getRecordset();
-                            const { insertRecords, removeRecords, updateRecords, pendingRecords } = body;
-                            const commitParams = {
-                                $table: $xeTable,
-                                $grid: $xeGrid,
-                                $gantt: null,
-                                code,
-                                button,
-                                body,
-                                form: formData,
-                                options: sMethod
-                            };
-                            // 排除掉新增且标记为删除的数据
-                            if (insertRecords.length) {
-                                body.pendingRecords = pendingRecords.filter((row) => $xeTable.findRowIndexOf(insertRecords, row) === -1);
-                            }
-                            // 排除已标记为删除的数据
-                            if (pendingRecords.length) {
-                                body.insertRecords = insertRecords.filter((row) => $xeTable.findRowIndexOf(pendingRecords, row) === -1);
-                            }
-                            let restPromise = Promise.resolve();
-                            if (editRules) {
-                                // 只校验新增和修改的数据
-                                restPromise = $xeTable[validConfig && validConfig.msgMode === 'full' ? 'fullValidate' : 'validate'](body.insertRecords.concat(updateRecords));
-                            }
-                            return restPromise.then((errMap) => {
-                                if (errMap) {
-                                    // 如果校验不通过
-                                    return;
-                                }
-                                if (body.insertRecords.length || removeRecords.length || updateRecords.length || body.pendingRecords.length) {
-                                    const handleSave = () => {
-                                        reactData.tableLoading = true;
-                                        return Promise.resolve((oldBeforeSave || sMethod)(commitParams, ...args))
-                                            .then(rest => {
-                                            reactData.tableLoading = false;
-                                            if (aSaveMethod) {
-                                                aSaveMethod(Object.assign(Object.assign({}, commitParams), { response: rest, status: 'success' }), ...args);
-                                            }
-                                            else {
-                                                $xeTable.clearPendingRow();
-                                                if (isRespMsg) {
-                                                    if (VxeUI.modal) {
-                                                        VxeUI.modal.message({ content: getRespMsg(rest, 'vxe.grid.saveSuccess'), status: 'success' });
-                                                    }
-                                                }
-                                                if (oldAfterSave) {
-                                                    oldAfterSave(Object.assign(Object.assign({}, commitParams), { response: rest }), ...args);
-                                                }
-                                                else {
-                                                    internalData.uFoot = true;
-                                                    $xeGrid.commitProxy('query');
-                                                    internalData.uFoot = false;
-                                                    updateQueryFooter();
-                                                }
-                                            }
-                                            if (sSuccessMethod) {
-                                                sSuccessMethod(Object.assign(Object.assign({}, commitParams), { response: rest }));
-                                            }
-                                            return { status: true };
-                                        })
-                                            .catch(rest => {
-                                            reactData.tableLoading = false;
-                                            if (aSaveMethod) {
-                                                aSaveMethod(Object.assign(Object.assign({}, commitParams), { response: rest, status: 'error' }), ...args);
-                                            }
-                                            else {
-                                                if (isRespMsg) {
-                                                    if (VxeUI.modal) {
-                                                        VxeUI.modal.message({ id: code, content: getRespMsg(rest, 'vxe.grid.operError'), status: 'error' });
-                                                    }
-                                                }
-                                            }
-                                            if (sErrorMethod) {
-                                                sErrorMethod(Object.assign(Object.assign({}, commitParams), { response: rest }));
-                                            }
-                                            return { status: false };
-                                        });
-                                    };
-                                    if (bSaveMethod) {
-                                        return Promise.resolve(bSaveMethod(commitParams, ...args)).then(status => {
-                                            if (status !== false) {
-                                                return handleSave();
-                                            }
-                                        });
-                                    }
-                                    return handleSave();
-                                }
-                                else {
-                                    if (isActiveMsg) {
-                                        if (VxeUI.modal) {
-                                            VxeUI.modal.message({ id: code, content: getI18n('vxe.grid.dataUnchanged'), status: 'info' });
-                                        }
-                                    }
-                                }
-                            });
-                        }
-                        else {
-                            errLog('vxe.error.notFunc', ['proxy-config.ajax.save']);
-                        }
-                        break;
-                    }
-                    default: {
-                        const gCommandOpts = commands.get(code);
-                        if (gCommandOpts) {
-                            const tCommandMethod = gCommandOpts.tableCommandMethod || gCommandOpts.commandMethod;
-                            if (tCommandMethod) {
-                                tCommandMethod({ code, button, $grid: $xeGrid, $table: $xeTable, $gantt: null }, ...args);
-                            }
-                            else {
-                                errLog('vxe.error.notCommands', [code]);
-                            }
-                        }
-                    }
-                }
-                return nextTick();
-            },
-            getParams() {
-                return props.params;
-            },
-            zoom() {
-                if (reactData.isZMax) {
-                    return $xeGrid.revert();
-                }
-                return $xeGrid.maximize();
-            },
-            isMaximized() {
-                return reactData.isZMax;
-            },
-            maximize() {
-                return handleZoom(true);
-            },
-            revert() {
-                return handleZoom();
-            },
-            getFormData,
-            /**
-             * 已废弃，被 getFormFlatItems 替换
-             * @deprecated
-             */
-            getFormItems(itemIndex) {
-                const formOpts = computeFormOpts.value;
-                const { formConfig } = props;
-                const { items } = formOpts;
-                const itemList = [];
-                XEUtils.eachTree(formConfig && isEnableConf(formOpts) && items ? items : [], item => {
-                    itemList.push(item);
-                }, { children: 'children' });
-                // errLog('vxe.error.delFunc', ['getFormItems', 'getFormFlatItems'])
-                return XEUtils.isUndefined(itemIndex) ? itemList : itemList[itemIndex];
-            },
-            getFormFlatItems() {
-                const $form = refForm.value;
-                if ($form) {
-                    return $form.getFlatItems();
-                }
-                return [];
-            },
-            getFormNestedItems() {
-                const $form = refForm.value;
-                if ($form) {
-                    return $form.getNestedItems();
-                }
-                return [];
-            },
-            getFormItemByField(field) {
-                const $form = refForm.value;
-                if ($form) {
-                    return $form.getItemByField(field);
-                }
-                return null;
-            },
-            resetForm() {
-                const $form = refForm.value;
-                if ($form) {
-                    return $form.reset();
-                }
-                return nextTick();
-            },
-            validateForm() {
-                const $form = refForm.value;
-                if ($form) {
-                    return $form.validate();
-                }
-                return Promise.resolve();
-            },
-            validateFormField(field) {
-                const $form = refForm.value;
-                if ($form) {
-                    return $form.validateField(field);
-                }
-                return Promise.resolve();
-            },
-            clearFormValidate(field) {
-                const $form = refForm.value;
-                if ($form) {
-                    return $form.clearValidate(field);
-                }
-                return nextTick();
-            },
-            homePage() {
-                const { tablePage } = reactData;
-                tablePage.currentPage = 1;
-                return nextTick();
-            },
-            homePageByEvent(evnt) {
-                const $pager = refPager.value;
-                if ($pager) {
-                    $pager.homePageByEvent(evnt);
-                }
-            },
-            endPage() {
-                const { tablePage } = reactData;
-                const pageCount = computePageCount.value;
-                tablePage.currentPage = pageCount;
-                return nextTick();
-            },
-            endPageByEvent(evnt) {
-                const $pager = refPager.value;
-                if ($pager) {
-                    $pager.endPageByEvent(evnt);
-                }
-            },
-            getCurrentPage() {
-                const { tablePage } = reactData;
-                return tablePage.currentPage;
-            },
-            setCurrentPage(currentPage) {
-                const { tablePage } = reactData;
-                const pageCount = computePageCount.value;
-                tablePage.currentPage = Math.min(pageCount, Math.max(1, XEUtils.toNumber(currentPage)));
-                return nextTick();
-            },
-            setCurrentPageByEvent(evnt, currentPage) {
-                const $pager = refPager.value;
-                if ($pager) {
-                    $pager.setCurrentPageByEvent(evnt, currentPage);
-                }
-            },
-            getPageSize() {
-                const { tablePage } = reactData;
-                return tablePage.pageSize;
-            },
-            setPageSize(pageSize) {
-                const { tablePage } = reactData;
-                tablePage.pageSize = Math.max(1, XEUtils.toNumber(pageSize));
-                return nextTick();
-            },
-            setPageSizeByEvent(evnt, pageSize) {
-                const $pager = refPager.value;
-                if ($pager) {
-                    $pager.setPageSizeByEvent(evnt, pageSize);
-                }
-            },
-            getProxyInfo() {
-                const $xeTable = refTable.value;
-                if (props.proxyConfig) {
-                    const { sortData } = reactData;
-                    return {
-                        data: $xeTable ? $xeTable.getFullData() : [],
-                        filter: reactData.filterData,
-                        form: getFormData(),
-                        sort: sortData.length ? sortData[0] : {},
-                        sorts: sortData,
-                        pager: reactData.tablePage,
-                        pendingRecords: $xeTable ? $xeTable.getPendingRecords() : []
-                    };
-                }
-                return null;
-            },
-            getCustomPagerData() {
-                const { pagerConfig } = props;
-                const { tablePage } = reactData;
-                const pagerOpts = computePagerOpts.value;
-                if (pagerConfig && isEnableConf(pagerOpts)) {
-                    return {
-                        pSize: tablePage.pageSize
-                    };
+                      }
+                      if (deleteErrorMethods) {
+                        deleteErrorMethods({ ...commitParams, response: rest });
+                      }
+                      return { status: false };
+                    });
+                  };
+                  if (bdMethod) {
+                    return Promise.resolve(bdMethod(commitParams, ...args)).then((status) => {
+                      if (status !== false) {
+                        return handleDelete();
+                      }
+                    });
+                  }
+                  return handleDelete();
+                });
+              } else {
+                if (isActiveMsg) {
+                  if (VxeUI.modal) {
+                    VxeUI.modal.message({ id: code, content: getI18n("vxe.grid.selectOneRecord"), status: "warning" });
+                  }
                 }
-                return {};
+              }
+            } else {
+              errLog("vxe.error.notFunc", ["proxy-config.ajax.delete"]);
             }
-            // setProxyInfo (options) {
-            //   if (props.proxyConfig && options) {
-            //     const { pager, form } = options
-            //     const proxyOpts = computeProxyOpts.value
-            //     if (pager) {
-            //       if (pager.currentPage) {
-            //         reactData.tablePage.currentPage = Number(pager.currentPage)
-            //       }
-            //       if (pager.pageSize) {
-            //         reactData.tablePage.pageSize = Number(pager.pageSize)
-            //       }
-            //     }
-            //     if (proxyOpts.form && form) {
-            //       Object.assign(reactData.formData, form)
-            //     }
-            //   }
-            //   return nextTick()
-            // }
-        };
-        const gridPrivateMethods = {
-            extendTableMethods,
-            callSlot(slotFunc, params) {
-                if (slotFunc) {
-                    if (XEUtils.isString(slotFunc)) {
-                        slotFunc = slots[slotFunc] || null;
-                    }
-                    if (XEUtils.isFunction(slotFunc)) {
-                        return getSlotVNs(slotFunc(params));
-                    }
-                }
-                return [];
-            },
-            /**
-             * 获取需要排除的高度
-             */
-            getExcludeHeight() {
-                const { height } = props;
-                const { isZMax } = reactData;
-                const el = refElem.value;
-                if (el) {
-                    const formWrapper = refFormWrapper.value;
-                    const toolbarWrapper = refToolbarWrapper.value;
-                    const topWrapper = refTopWrapper.value;
-                    const bottomWrapper = refBottomWrapper.value;
-                    const pagerWrapper = refPagerWrapper.value;
-                    const parentEl = el.parentElement;
-                    let parentPaddingSize = 0;
-                    if (parentEl && (height === '100%' || height === 'auto')) {
-                        parentPaddingSize = isZMax ? 0 : getPaddingTopBottomSize(parentEl);
-                    }
-                    return parentPaddingSize + getPaddingTopBottomSize(el) + getOffsetHeight(formWrapper) + getOffsetHeight(toolbarWrapper) + getOffsetHeight(topWrapper) + getOffsetHeight(bottomWrapper) + getOffsetHeight(pagerWrapper);
-                }
-                return 0;
-            },
-            getParentElem() {
-                const el = refElem.value;
-                if (!el) {
-                    return null;
+            break;
+          }
+          case "save": {
+            const bSaveMethod = ajax.beforeSave;
+            const sMethod = ajax.save;
+            const aSaveMethod = ajax.afterSave;
+            const sSuccessMethod = ajax.saveSuccess;
+            const sErrorMethod = ajax.saveError;
+            if (sMethod) {
+              const body = $xeTable.getRecordset();
+              const { insertRecords, removeRecords, updateRecords, pendingRecords } = body;
+              const commitParams = {
+                $table: $xeTable,
+                $grid: $xeGrid,
+                $gantt: null,
+                code,
+                button,
+                body,
+                form: formData,
+                options: sMethod
+              };
+              if (insertRecords.length) {
+                body.pendingRecords = pendingRecords.filter((row) => $xeTable.findRowIndexOf(insertRecords, row) === -1);
+              }
+              if (pendingRecords.length) {
+                body.insertRecords = insertRecords.filter((row) => $xeTable.findRowIndexOf(pendingRecords, row) === -1);
+              }
+              let restPromise = Promise.resolve();
+              if (editRules) {
+                restPromise = $xeTable[validConfig && validConfig.msgMode === "full" ? "fullValidate" : "validate"](body.insertRecords.concat(updateRecords));
+              }
+              return restPromise.then((errMap) => {
+                if (errMap) {
+                  return;
                 }
-                let parentEl = el.parentElement;
-                // 如果是虚拟滚动条
-                if (parentEl && hasClass(parentEl, 'vxe-scrollbar--view-inner')) {
-                    parentEl = parentEl.parentElement;
-                }
-                return parentEl;
-            },
-            getParentHeight() {
-                const el = refElem.value;
-                if (el) {
-                    const parentEl = $xeGrid.getParentElem();
-                    return (reactData.isZMax ? getDomNode().visibleHeight : (parentEl ? XEUtils.toNumber(getComputedStyle(parentEl).height) : 0)) - gridPrivateMethods.getExcludeHeight();
-                }
-                return 0;
-            },
-            triggerToolbarCommitEvent(params, evnt) {
-                const { code } = params;
-                if (code) {
-                    const isUf = ['reload', 'delete', 'save'].includes(code);
-                    if (isUf) {
-                        internalData.uFoot = true;
-                    }
-                    const rest = $xeGrid.commitProxy(params, evnt).then((rest) => {
-                        if (rest && rest.status && ['query', 'reload', 'delete', 'save'].includes(code)) {
-                            $xeGrid.dispatchEvent(code === 'delete' || code === 'save' ? `proxy-${code}` : 'proxy-query', Object.assign(Object.assign({}, rest), { isReload: code === 'reload' }), evnt);
+                if (body.insertRecords.length || removeRecords.length || updateRecords.length || body.pendingRecords.length) {
+                  const handleSave = () => {
+                    reactData.tableLoading = true;
+                    return Promise.resolve((oldBeforeSave || sMethod)(commitParams, ...args)).then((rest) => {
+                      reactData.tableLoading = false;
+                      if (aSaveMethod) {
+                        aSaveMethod({ ...commitParams, response: rest, status: "success" }, ...args);
+                      } else {
+                        $xeTable.clearPendingRow();
+                        if (isRespMsg) {
+                          if (VxeUI.modal) {
+                            VxeUI.modal.message({ content: getRespMsg(rest, "vxe.grid.saveSuccess"), status: "success" });
+                          }
                         }
+                        if (oldAfterSave) {
+                          oldAfterSave({ ...commitParams, response: rest }, ...args);
+                        } else {
+                          internalData.uFoot = true;
+                          $xeGrid.commitProxy("query");
+                          internalData.uFoot = false;
+                          updateQueryFooter();
+                        }
+                      }
+                      if (sSuccessMethod) {
+                        sSuccessMethod({ ...commitParams, response: rest });
+                      }
+                      return { status: true };
+                    }).catch((rest) => {
+                      reactData.tableLoading = false;
+                      if (aSaveMethod) {
+                        aSaveMethod({ ...commitParams, response: rest, status: "error" }, ...args);
+                      } else {
+                        if (isRespMsg) {
+                          if (VxeUI.modal) {
+                            VxeUI.modal.message({ id: code, content: getRespMsg(rest, "vxe.grid.operError"), status: "error" });
+                          }
+                        }
+                      }
+                      if (sErrorMethod) {
+                        sErrorMethod({ ...commitParams, response: rest });
+                      }
+                      return { status: false };
+                    });
+                  };
+                  if (bSaveMethod) {
+                    return Promise.resolve(bSaveMethod(commitParams, ...args)).then((status) => {
+                      if (status !== false) {
+                        return handleSave();
+                      }
                     });
-                    internalData.uFoot = false;
-                    if (isUf) {
-                        updateQueryFooter();
+                  }
+                  return handleSave();
+                } else {
+                  if (isActiveMsg) {
+                    if (VxeUI.modal) {
+                      VxeUI.modal.message({ id: code, content: getI18n("vxe.grid.dataUnchanged"), status: "info" });
                     }
-                    return rest;
+                  }
                 }
-                return nextTick();
-            },
-            triggerToolbarBtnEvent(button, evnt) {
-                $xeGrid.triggerToolbarCommitEvent(button, evnt);
-                $xeGrid.dispatchEvent('toolbar-button-click', { code: button.code, button }, evnt);
-            },
-            triggerToolbarTolEvent(tool, evnt) {
-                $xeGrid.triggerToolbarCommitEvent(tool, evnt);
-                $xeGrid.dispatchEvent('toolbar-tool-click', { code: tool.code, tool }, evnt);
-            },
-            triggerZoomEvent(evnt) {
-                $xeGrid.zoom();
-                $xeGrid.dispatchEvent('zoom', { type: reactData.isZMax ? 'max' : 'revert' }, evnt);
+              });
+            } else {
+              errLog("vxe.error.notFunc", ["proxy-config.ajax.save"]);
             }
-        };
-        Object.assign($xeGrid, gridExtendTableMethods, gridMethods, gridPrivateMethods, {
-            // 检查插槽
-            loadColumn(columns) {
-                const $xeTable = refTable.value;
-                XEUtils.eachTree(columns, (column) => {
-                    if (column.slots) {
-                        XEUtils.each(column.slots, (func) => {
-                            if (func && !XEUtils.isFunction(func)) {
-                                if (!slots[func]) {
-                                    errLog('vxe.error.notSlot', [func]);
-                                }
-                            }
-                        });
-                    }
-                });
-                if ($xeTable) {
-                    return $xeTable.loadColumn(columns);
-                }
-                return nextTick();
-            },
-            reloadColumn(columns) {
-                $xeGrid.clearAll();
-                return $xeGrid.loadColumn(columns);
+            break;
+          }
+          default: {
+            const gCommandOpts = commands.get(code);
+            if (gCommandOpts) {
+              const tCommandMethod = gCommandOpts.tableCommandMethod || gCommandOpts.commandMethod;
+              if (tCommandMethod) {
+                tCommandMethod({ code, button, $grid: $xeGrid, $table: $xeTable, $gantt: null }, ...args);
+              } else {
+                errLog("vxe.error.notCommands", [code]);
+              }
             }
-        });
-        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++;
-        });
-        watch(() => props.columns, () => {
-            columnFlag.value++;
-        });
-        watch(columnFlag, () => {
-            nextTick(() => $xeGrid.loadColumn(props.columns || []));
-        });
-        watch(() => props.toolbarConfig, () => {
-            initToolbar();
-        });
-        watch(computeCustomCurrentPageFlag, () => {
-            initPages('currentPage');
-        });
-        watch(computeCustomPageSizeFlag, () => {
-            initPages('pageSize');
-        });
-        watch(computeCustomTotalFlag, () => {
-            initPages('total');
-        });
-        watch(() => props.proxyConfig, () => {
-            initProxy();
-        });
-        hooks.forEach((options) => {
-            const { setupGrid } = options;
-            if (setupGrid) {
-                const hookRest = setupGrid($xeGrid);
-                if (hookRest && XEUtils.isObject(hookRest)) {
-                    Object.assign($xeGrid, hookRest);
-                }
+          }
+        }
+        return nextTick();
+      },
+      getParams() {
+        return props.params;
+      },
+      zoom() {
+        if (reactData.isZMax) {
+          return $xeGrid.revert();
+        }
+        return $xeGrid.maximize();
+      },
+      isMaximized() {
+        return reactData.isZMax;
+      },
+      maximize() {
+        return handleZoom(true);
+      },
+      revert() {
+        return handleZoom();
+      },
+      getFormData,
+      /**
+       * 已废弃，被 getFormFlatItems 替换
+       * @deprecated
+       */
+      getFormItems(itemIndex) {
+        const formOpts = computeFormOpts.value;
+        const { formConfig } = props;
+        const { items } = formOpts;
+        const itemList = [];
+        XEUtils.eachTree(formConfig && isEnableConf(formOpts) && items ? items : [], (item) => {
+          itemList.push(item);
+        }, { children: "children" });
+        return XEUtils.isUndefined(itemIndex) ? itemList : itemList[itemIndex];
+      },
+      getFormFlatItems() {
+        const $form = refForm.value;
+        if ($form) {
+          return $form.getFlatItems();
+        }
+        return [];
+      },
+      getFormNestedItems() {
+        const $form = refForm.value;
+        if ($form) {
+          return $form.getNestedItems();
+        }
+        return [];
+      },
+      getFormItemByField(field) {
+        const $form = refForm.value;
+        if ($form) {
+          return $form.getItemByField(field);
+        }
+        return null;
+      },
+      resetForm() {
+        const $form = refForm.value;
+        if ($form) {
+          return $form.reset();
+        }
+        return nextTick();
+      },
+      validateForm() {
+        const $form = refForm.value;
+        if ($form) {
+          return $form.validate();
+        }
+        return Promise.resolve();
+      },
+      validateFormField(field) {
+        const $form = refForm.value;
+        if ($form) {
+          return $form.validateField(field);
+        }
+        return Promise.resolve();
+      },
+      clearFormValidate(field) {
+        const $form = refForm.value;
+        if ($form) {
+          return $form.clearValidate(field);
+        }
+        return nextTick();
+      },
+      homePage() {
+        const { tablePage } = reactData;
+        tablePage.currentPage = 1;
+        return nextTick();
+      },
+      homePageByEvent(evnt) {
+        const $pager = refPager.value;
+        if ($pager) {
+          $pager.homePageByEvent(evnt);
+        }
+      },
+      endPage() {
+        const { tablePage } = reactData;
+        const pageCount = computePageCount.value;
+        tablePage.currentPage = pageCount;
+        return nextTick();
+      },
+      endPageByEvent(evnt) {
+        const $pager = refPager.value;
+        if ($pager) {
+          $pager.endPageByEvent(evnt);
+        }
+      },
+      getCurrentPage() {
+        const { tablePage } = reactData;
+        return tablePage.currentPage;
+      },
+      setCurrentPage(currentPage) {
+        const { tablePage } = reactData;
+        const pageCount = computePageCount.value;
+        tablePage.currentPage = Math.min(pageCount, Math.max(1, XEUtils.toNumber(currentPage)));
+        return nextTick();
+      },
+      setCurrentPageByEvent(evnt, currentPage) {
+        const $pager = refPager.value;
+        if ($pager) {
+          $pager.setCurrentPageByEvent(evnt, currentPage);
+        }
+      },
+      getPageSize() {
+        const { tablePage } = reactData;
+        return tablePage.pageSize;
+      },
+      setPageSize(pageSize) {
+        const { tablePage } = reactData;
+        tablePage.pageSize = Math.max(1, XEUtils.toNumber(pageSize));
+        return nextTick();
+      },
+      setPageSizeByEvent(evnt, pageSize) {
+        const $pager = refPager.value;
+        if ($pager) {
+          $pager.setPageSizeByEvent(evnt, pageSize);
+        }
+      },
+      getProxyInfo() {
+        const $xeTable = refTable.value;
+        if (props.proxyConfig) {
+          const { sortData } = reactData;
+          return {
+            data: $xeTable ? $xeTable.getFullData() : [],
+            filter: reactData.filterData,
+            form: getFormData(),
+            sort: sortData.length ? sortData[0] : {},
+            sorts: sortData,
+            pager: reactData.tablePage,
+            pendingRecords: $xeTable ? $xeTable.getPendingRecords() : []
+          };
+        }
+        return null;
+      },
+      getCustomPagerData() {
+        const { pagerConfig } = props;
+        const { tablePage } = reactData;
+        const pagerOpts = computePagerOpts.value;
+        if (pagerConfig && isEnableConf(pagerOpts)) {
+          return {
+            pSize: tablePage.pageSize
+          };
+        }
+        return {};
+      }
+      // setProxyInfo (options) {
+      //   if (props.proxyConfig && options) {
+      //     const { pager, form } = options
+      //     const proxyOpts = computeProxyOpts.value
+      //     if (pager) {
+      //       if (pager.currentPage) {
+      //         reactData.tablePage.currentPage = Number(pager.currentPage)
+      //       }
+      //       if (pager.pageSize) {
+      //         reactData.tablePage.pageSize = Number(pager.pageSize)
+      //       }
+      //     }
+      //     if (proxyOpts.form && form) {
+      //       Object.assign(reactData.formData, form)
+      //     }
+      //   }
+      //   return nextTick()
+      // }
+    };
+    const gridPrivateMethods = {
+      extendTableMethods,
+      callSlot(slotFunc, params) {
+        if (slotFunc) {
+          if (XEUtils.isString(slotFunc)) {
+            slotFunc = slots[slotFunc] || null;
+          }
+          if (XEUtils.isFunction(slotFunc)) {
+            return getSlotVNs(slotFunc(params));
+          }
+        }
+        return [];
+      },
+      /**
+       * 获取需要排除的高度
+       */
+      getExcludeHeight() {
+        const { height } = props;
+        const { isZMax } = reactData;
+        const el = refElem.value;
+        if (el) {
+          const formWrapper = refFormWrapper.value;
+          const toolbarWrapper = refToolbarWrapper.value;
+          const topWrapper = refTopWrapper.value;
+          const bottomWrapper = refBottomWrapper.value;
+          const pagerWrapper = refPagerWrapper.value;
+          const parentEl = el.parentElement;
+          let parentPaddingSize = 0;
+          if (parentEl && (height === "100%" || height === "auto")) {
+            parentPaddingSize = isZMax ? 0 : getPaddingTopBottomSize(parentEl);
+          }
+          return parentPaddingSize + getPaddingTopBottomSize(el) + getOffsetHeight(formWrapper) + getOffsetHeight(toolbarWrapper) + getOffsetHeight(topWrapper) + getOffsetHeight(bottomWrapper) + getOffsetHeight(pagerWrapper);
+        }
+        return 0;
+      },
+      getParentElem() {
+        const el = refElem.value;
+        if (!el) {
+          return null;
+        }
+        let parentEl = el.parentElement;
+        if (parentEl && hasClass(parentEl, "vxe-scrollbar--view-inner")) {
+          parentEl = parentEl.parentElement;
+        }
+        return parentEl;
+      },
+      getParentHeight() {
+        const el = refElem.value;
+        if (el) {
+          const parentEl = $xeGrid.getParentElem();
+          return (reactData.isZMax ? getDomNode().visibleHeight : parentEl ? XEUtils.toNumber(getComputedStyle(parentEl).height) : 0) - gridPrivateMethods.getExcludeHeight();
+        }
+        return 0;
+      },
+      triggerToolbarCommitEvent(params, evnt) {
+        const { code } = params;
+        if (code) {
+          const isUf = ["reload", "delete", "save"].includes(code);
+          if (isUf) {
+            internalData.uFoot = true;
+          }
+          const rest = $xeGrid.commitProxy(params, evnt).then((rest2) => {
+            if (rest2 && rest2.status && ["query", "reload", "delete", "save"].includes(code)) {
+              $xeGrid.dispatchEvent(code === "delete" || code === "save" ? `proxy-${code}` : "proxy-query", { ...rest2, isReload: code === "reload" }, evnt);
             }
-        });
-        initPages();
-        onMounted(() => {
-            nextTick(() => {
-                const { columns } = props;
-                const proxyOpts = computeProxyOpts.value;
-                if (props.formConfig) {
-                    if (!VxeUIFormComponent) {
-                        errLog('vxe.error.reqComp', ['vxe-form']);
-                    }
-                }
-                if (props.pagerConfig) {
-                    if (!VxeUIPagerComponent) {
-                        errLog('vxe.error.reqComp', ['vxe-pager']);
-                    }
-                }
-                // const { data, columns, proxyConfig } = props
-                // const formOpts = computeFormOpts.value
-                // if (isEnableConf(proxyConfig) && (data || (proxyOpts.form && formOpts.data))) {
-                //   errLog('vxe.error.errConflicts', ['[grid] data', 'proxy-config'])
-                // }
-                if (proxyOpts.props) {
-                    warnLog('vxe.error.delProp', ['proxy-config.props', 'proxy-config.response']);
-                }
-                if (columns && columns.length) {
-                    $xeGrid.loadColumn(columns);
+          });
+          internalData.uFoot = false;
+          if (isUf) {
+            updateQueryFooter();
+          }
+          return rest;
+        }
+        return nextTick();
+      },
+      triggerToolbarBtnEvent(button, evnt) {
+        $xeGrid.triggerToolbarCommitEvent(button, evnt);
+        $xeGrid.dispatchEvent("toolbar-button-click", { code: button.code, button }, evnt);
+      },
+      triggerToolbarTolEvent(tool, evnt) {
+        $xeGrid.triggerToolbarCommitEvent(tool, evnt);
+        $xeGrid.dispatchEvent("toolbar-tool-click", { code: tool.code, tool }, evnt);
+      },
+      triggerZoomEvent(evnt) {
+        $xeGrid.zoom();
+        $xeGrid.dispatchEvent("zoom", { type: reactData.isZMax ? "max" : "revert" }, evnt);
+      }
+    };
+    Object.assign($xeGrid, gridExtendTableMethods, gridMethods, gridPrivateMethods, {
+      // 检查插槽
+      loadColumn(columns) {
+        const $xeTable = refTable.value;
+        XEUtils.eachTree(columns, (column) => {
+          if (column.slots) {
+            XEUtils.each(column.slots, (func) => {
+              if (func && !XEUtils.isFunction(func)) {
+                if (!slots[func]) {
+                  errLog("vxe.error.notSlot", [func]);
                 }
-                initToolbar();
-                initProxy();
+              }
             });
-            globalEvents.on($xeGrid, 'keydown', handleGlobalKeydownEvent);
-        });
-        onBeforeUnmount(() => {
-            globalEvents.off($xeGrid, 'keydown');
-            XEUtils.assign(reactData, createReactData());
-            XEUtils.assign(internalData, createInternalData());
+          }
         });
-        $xeGrid.renderVN = renderVN;
-        provide('$xeGrid', $xeGrid);
-        provide('$xeGantt', null);
-        return $xeGrid;
-    },
-    render() {
-        return this.renderVN();
-    }
+        if ($xeTable) {
+          return $xeTable.loadColumn(columns);
+        }
+        return nextTick();
+      },
+      reloadColumn(columns) {
+        $xeGrid.clearAll();
+        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++;
+    });
+    watch(() => props.columns, () => {
+      columnFlag.value++;
+    });
+    watch(columnFlag, () => {
+      nextTick(() => $xeGrid.loadColumn(props.columns || []));
+    });
+    watch(() => props.toolbarConfig, () => {
+      initToolbar();
+    });
+    watch(computeCustomCurrentPageFlag, () => {
+      initPages("currentPage");
+    });
+    watch(computeCustomPageSizeFlag, () => {
+      initPages("pageSize");
+    });
+    watch(computeCustomTotalFlag, () => {
+      initPages("total");
+    });
+    watch(() => props.proxyConfig, () => {
+      initProxy();
+    });
+    hooks.forEach((options) => {
+      const { setupGrid } = options;
+      if (setupGrid) {
+        const hookRest = setupGrid($xeGrid);
+        if (hookRest && XEUtils.isObject(hookRest)) {
+          Object.assign($xeGrid, hookRest);
+        }
+      }
+    });
+    initPages();
+    onMounted(() => {
+      nextTick(() => {
+        const { columns } = props;
+        const proxyOpts = computeProxyOpts.value;
+        if (props.formConfig) {
+          if (!VxeUIFormComponent) {
+            errLog("vxe.error.reqComp", ["vxe-form"]);
+          }
+        }
+        if (props.pagerConfig) {
+          if (!VxeUIPagerComponent) {
+            errLog("vxe.error.reqComp", ["vxe-pager"]);
+          }
+        }
+        if (proxyOpts.props) {
+          warnLog("vxe.error.delProp", ["proxy-config.props", "proxy-config.response"]);
+        }
+        if (columns && columns.length) {
+          $xeGrid.loadColumn(columns);
+        }
+        initToolbar();
+        initProxy();
+      });
+      globalEvents.on($xeGrid, "keydown", handleGlobalKeydownEvent);
+    });
+    onBeforeUnmount(() => {
+      globalEvents.off($xeGrid, "keydown");
+      XEUtils.assign(reactData, createReactData());
+      XEUtils.assign(internalData, createInternalData());
+    });
+    $xeGrid.renderVN = renderVN;
+    provide("$xeGrid", $xeGrid);
+    provide("$xeGantt", null);
+    return $xeGrid;
+  },
+  render() {
+    return this.renderVN();
+  }
 });
+export {
+  grid_default as default
+};