vxe-table 4.23.11 → 4.23.12

package/es/grid/src/grid.js

@@ -224,1810 +224,1813 @@ function createInternalData() {
     uFoot: false
   };
 }
-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) => {
+var grid_default = (
+  /* define-vxe-component start */
+  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;
+      };
+      const gridExtendTableMethods = extendTableMethods(tableComponentMethodKeys);
+      tableComponentMethodKeys.forEach((name) => {
+        gridExtendTableMethods[name] = (...args) => {
           const $xeTable = refTable.value;
           if ($xeTable && $xeTable[name]) {
-            return $xeTable[name](...args);
+            return $xeTable && $xeTable[name](...args);
           }
         };
       });
-      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);
+          }
         }
-      };
-    });
-    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);
+        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 (maxHeight) {
-          stys.maxHeight = maxHeight === "auto" || maxHeight === "100%" ? "100%" : toCssUnit(maxHeight);
+        if (proxyConfig && isEnableConf(proxyOpts)) {
+          tProps.loading = isLoading;
+          if (pagerConfig && proxyOpts.seq && isEnableConf(pagerOpts)) {
+            tProps.seqConfig = Object.assign({}, seqConfig, { startIndex: (tablePage.currentPage - 1) * tablePage.pageSize });
+          }
         }
-      }
-      return stys;
-    });
-    const computeTableExtendProps = computed(() => {
-      const rest = {};
-      tableComponentPropKeys.forEach((key) => {
-        if (props[key] !== void 0) {
-          rest[key] = props[key];
+        if (editConfig) {
+          tProps.editConfig = Object.assign({}, editConfig);
         }
+        return tProps;
       });
-      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%";
+      const computeCurrLayoutConf = computed(() => {
+        const { layouts } = props;
+        let confs = [];
+        if (layouts && layouts.length) {
+          confs = layouts;
         } else {
-          tProps.height = "100%";
+          confs = getConfig().grid.layouts || defaultLayouts;
         }
-      }
-      if (proxyConfig && isEnableConf(proxyOpts)) {
-        tProps.loading = isLoading;
-        if (pagerConfig && proxyOpts.seq && isEnableConf(pagerOpts)) {
-          tProps.seqConfig = Object.assign({}, seqConfig, { startIndex: (tablePage.currentPage - 1) * tablePage.pageSize });
+        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;
+          }
         }
-      }
-      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);
+            }
+          });
         }
-      }
-      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 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 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]);
+        }
+      };
+      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 {
-          const { currentPage, pageSize, total } = pagerOpts;
-          if (currentPage) {
-            tablePage.currentPage = currentPage;
-          }
-          if (pageSize) {
-            tablePage.pageSize = pageSize;
-          }
-          if (total) {
-            tablePage.total = total;
+          if (isActiveMsg) {
+            if (VxeUI.modal) {
+              VxeUI.modal.message({ id: code, content: getI18n("vxe.grid.selectOneRecord"), status: "warning" });
+            }
           }
         }
-      }
-    };
-    const triggerPendingEvent = (code) => {
-      const isActiveMsg = computeIsActiveMsg.value;
-      const $xeTable = refTable.value;
-      const selectRecords = $xeTable ? $xeTable.getCheckboxRecords() : [];
-      if (selectRecords.length) {
-        if ($xeTable) {
-          $xeTable.togglePendingRow(selectRecords);
+      };
+      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);
         }
-        $xeGrid.clearCheckboxRow();
-      } else {
+        return msg || getI18n(defaultMsg);
+      };
+      const handleDeleteRow = (code, alertKey, callback) => {
+        const isActiveMsg = computeIsActiveMsg.value;
+        const selectRecords = $xeGrid.getCheckboxRecords();
         if (isActiveMsg) {
-          if (VxeUI.modal) {
-            VxeUI.modal.message({ id: code, content: getI18n("vxe.grid.selectOneRecord"), status: "warning" });
+          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();
           }
         }
-      }
-    };
-    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();
-              }
+        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);
             });
           }
-        } else {
-          if (VxeUI.modal) {
-            VxeUI.modal.message({ id: `msg_${code}`, content: getI18n("vxe.grid.selectOneRecord"), status: "warning" });
+        }
+      };
+      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();
           }
         }
-      } else {
-        if (selectRecords.length) {
-          callback();
+      };
+      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;
         }
-      }
-      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);
+          $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);
           });
+          internalData.uFoot = false;
+          updateQueryFooter();
+        } else {
+          $xeGrid.dispatchEvent("form-submit", params, 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;
+      };
+      const resetFormEvent = (params) => {
+        const $xeTable = refTable.value;
+        const { proxyConfig } = props;
+        const { $event } = params;
+        const proxyOpts = computeProxyOpts.value;
         if (proxyConfig && isEnableConf(proxyOpts)) {
-          reactData.tablePage.currentPage = 1;
+          const formOptions = proxyOpts.formOptions || {};
+          $xeGrid.dispatchEvent("form-reset", params, $event);
+          if ($xeTable) {
+            $xeTable.clearScroll();
+          }
           internalData.uFoot = true;
-          $xeGrid.commitProxy("query").then((rest) => {
-            $xeGrid.dispatchEvent("proxy-query", rest, params.$event);
+          $xeGrid.commitProxy(formOptions.resetMode === "reset_form" ? "query" : "reload").then((rest) => {
+            $xeGrid.dispatchEvent("proxy-query", { ...rest, isReload: true }, $event);
           });
           internalData.uFoot = false;
           updateQueryFooter();
+        } else {
+          $xeGrid.dispatchEvent("form-reset", params, $event);
         }
-      }
-    };
-    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);
-        });
-        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);
-        });
-        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]);
+      };
+      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();
           }
-        } 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];
+        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", [slotFunc]);
+              errLog("vxe.error.notSlot", [funcSlot]);
             }
           } else {
-            slotConf[slotKey] = slotFunc;
+            return funcSlot;
           }
         }
-      });
-      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 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 {
+              slotConf[slotKey] = slotFunc;
             }
-            formOpts.items.forEach((item) => {
-              XEUtils.each(item.slots, (func) => {
-                if (func && !XEUtils.isFunction(func)) {
-                  if (slots[func]) {
-                    formSlots[func] = slots[func];
-                  }
+          }
+        });
+        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,
-                  {
-                    ref: refForm,
-                    ...Object.assign({}, formOpts, {
-                      data: proxyConfig && isEnableConf(proxyOpts) && proxyOpts.form ? formData : formOpts.data
-                    }),
-                    onSubmit: submitFormEvent,
-                    onReset: resetFormEvent,
-                    onSubmitInvalid: submitInvalidEvent,
-                    onCollapse: collapseEvent
-                  },
-                  formSlots
-                )
-              );
+              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
+                  )
+                );
+              }
             }
           }
+          return h(
+            "div",
+            {
+              ref: refFormWrapper,
+              key: "form",
+              class: "vxe-grid--form-wrapper"
+            },
+            slotVNs
+          );
         }
-        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;
+        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;
+              }
             }
+            slotVNs.push(
+              h(
+                VxeToolbarComponent,
+                {
+                  ref: refToolbar,
+                  ...toolbarOpts,
+                  slots: void 0
+                },
+                toolbarSlots
+              )
+            );
           }
-          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 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;
+        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 })
+          );
         }
-        if (proxyOpts.filter) {
-          tableOns.onFilterChange = filterChangeEvent;
-          tableOns.onClearAllFilter = clearAllFilterEvent;
+        return renderEmptyElement($xeGrid);
+      };
+      const renderTableLeft = () => {
+        const leftSlot = slots.left;
+        if (leftSlot) {
+          return h(
+            "div",
+            {
+              class: "vxe-grid--left-wrapper"
+            },
+            leftSlot({ $grid: $xeGrid, $gantt: null })
+          );
         }
-      }
-      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,
+        return renderEmptyElement($xeGrid);
+      };
+      const renderTableRight = () => {
+        const rightSlot = slots.right;
+        if (rightSlot) {
+          return h(
+            "div",
             {
-              ref: refTable,
-              ...tableProps2,
-              ...tableOns
+              class: "vxe-grid--right-wrapper"
             },
-            slotObj
-          )
-        ]
-      );
-    };
-    const renderBottom = () => {
-      if (slots.bottom) {
+            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",
           {
-            ref: refBottomWrapper,
-            key: "bottom",
-            class: "vxe-grid--bottom-wrapper"
+            class: "vxe-grid--table-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,
+          [
+            h(
+              VxeTableComponent,
               {
-                ref: refPager,
-                ...pagerProps,
-                ...proxyConfig && isEnableConf(proxyOpts) ? reactData.tablePage : {},
-                onPageChange: pageChangeEvent
+                ref: refTable,
+                ...tableProps2,
+                ...tableOns
               },
-              getConfigSlot(pagerOpts.slots)
-            ) : renderEmptyElement($xeGrid)
+              slotObj
+            )
           ]
         );
-      }
-      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(
+      };
+      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",
                 {
-                  key: "table",
-                  class: "vxe-grid--table-container"
+                  class: "vxe-grid--layout-body-content-wrapper"
                 },
-                [renderTableLeft(), renderTable(), renderTableRight()]
-              )
-            );
-            break;
-          case "Bottom":
-            childVNs.push(renderBottom());
-            break;
-          case "Pager":
-            childVNs.push(renderPager());
-            break;
-          default:
-            errLog("vxe.error.notProp", [`layouts -> ${key}`]);
-            break;
-        }
+                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);
       });
-      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);
+      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;
             }
-            fData[field] = itemValue;
-          }
-        });
-        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();
+          });
+          return fData;
         }
-        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"));
-            });
+        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 updateQueryFooter = () => {
         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();
+        const { ajax } = proxyOpts;
+        if (ajax && ajax.queryFooter) {
+          return $xeGrid.commitProxy("queryFooter");
         }
-        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 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 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 = { ...tablePage };
-                }
-              }
-              if (isInited) {
-                if (proxyConfig && isEnableConf(proxyOpts) && proxyOpts.form) {
-                  formData = getDefaultFormData();
-                  reactData.formData = formData;
+      };
+      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();
                 }
-                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
-                      };
-                    });
+                let operPromise = null;
+                let sortList = [];
+                let filterList = [];
+                let pageParams = {};
+                if (pagerConfig) {
+                  if (isInited || isReload) {
+                    tablePage.currentPage = 1;
+                  }
+                  if (isEnableConf(pagerOpts)) {
+                    pageParams = { ...tablePage };
                   }
-                  filterList = $xeTable.getCheckedFilters();
                 }
-              } else {
-                if ($xeTable) {
-                  if (isReload) {
-                    operPromise = $xeTable.clearAll();
-                  } else {
-                    sortList = $xeTable.getSortColumns();
+                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({ ...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;
+                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 {
+                          if (XEUtils.isArray(rest)) {
+                            tableData = rest;
+                          } else if (listProp) {
+                            tableData = (XEUtils.isFunction(listProp) ? listProp(reParams) : XEUtils.get(rest, listProp)) || [];
+                          }
                         }
-                      } 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 (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 $xeTable2 = refTable.value;
+                          if ($xeTable2) {
+                            $xeTable2.loadData(tableData);
+                          }
+                        });
+                      }
+                      if (oldAfterQuery) {
+                        oldAfterQuery({ ...commitParams, response: rest }, ...args);
                       }
                     }
-                    if ($xeTable) {
-                      $xeTable.loadData(tableData);
-                    } else {
-                      nextTick(() => {
-                        const $xeTable2 = refTable.value;
-                        if ($xeTable2) {
-                          $xeTable2.loadData(tableData);
-                        }
-                      });
+                    if (qsMethod) {
+                      qsMethod({ ...commitParams, response: rest });
                     }
-                    if (oldAfterQuery) {
-                      oldAfterQuery({ ...commitParams, response: rest }, ...args);
+                    return { status: true };
+                  }).catch((rest) => {
+                    reactData.tableLoading = false;
+                    if (aqMethod) {
+                      aqMethod({ ...commitParams, response: rest, status: "error" }, ...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();
-                  }
-                });
+                    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 handleQuery();
+              } else {
+                errLog("vxe.error.notFunc", ["proxy-config.ajax.query"]);
               }
-              return handleQuery();
-            } else {
-              errLog("vxe.error.notFunc", ["proxy-config.ajax.query"]);
+              break;
             }
-            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 };
+            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();
                 }
-              }
-              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);
-                    }
-                  }
-                  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 });
+                let pageParams = {};
+                if (pagerConfig) {
+                  if (isEnableConf(pagerOpts)) {
+                    pageParams = { ...tablePage };
                   }
-                  return { status: false };
-                });
-              };
-              if (bqfMethod) {
-                return Promise.resolve(bqfMethod(commitParams, ...args)).then((status) => {
-                  if (status !== false) {
-                    return handleQueryFooter();
-                  }
-                });
+                }
+                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);
+                      }
+                    }
+                    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"]);
               }
-              return handleQueryFooter();
-            } else {
-              errLog("vxe.error.notFunc", ["proxy-config.ajax.queryFooter"]);
+              break;
             }
-            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" });
+            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" });
+                            }
+                          }
+                          if (oldAfterDelete) {
+                            oldAfterDelete({ ...commitParams, response: rest }, ...args);
+                          } else {
+                            internalData.uFoot = true;
+                            $xeGrid.commitProxy("query");
+                            internalData.uFoot = false;
+                            updateQueryFooter();
                           }
                         }
-                        if (oldAfterDelete) {
-                          oldAfterDelete({ ...commitParams, response: rest }, ...args);
-                        } else {
-                          internalData.uFoot = true;
-                          $xeGrid.commitProxy("query");
-                          internalData.uFoot = false;
-                          updateQueryFooter();
+                        if (deleteSuccessMethods) {
+                          deleteSuccessMethods({ ...commitParams, response: rest });
                         }
-                      }
-                      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" });
+                        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" });
+                            }
                           }
                         }
-                      }
-                      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" });
+                        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" });
+                    }
                   }
                 }
+              } else {
+                errLog("vxe.error.notFunc", ["proxy-config.ajax.delete"]);
               }
-            } else {
-              errLog("vxe.error.notFunc", ["proxy-config.ajax.delete"]);
+              break;
             }
-            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;
+            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 (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 (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({ ...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 (oldAfterSave) {
-                          oldAfterSave({ ...commitParams, response: rest }, ...args);
-                        } else {
-                          internalData.uFoot = true;
-                          $xeGrid.commitProxy("query");
-                          internalData.uFoot = false;
-                          updateQueryFooter();
+                        if (sSuccessMethod) {
+                          sSuccessMethod({ ...commitParams, response: rest });
                         }
-                      }
-                      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" });
+                        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();
+                        }
+                      });
+                    }
+                    return handleSave();
+                  } else {
+                    if (isActiveMsg) {
+                      if (VxeUI.modal) {
+                        VxeUI.modal.message({ id: code, content: getI18n("vxe.grid.dataUnchanged"), status: "info" });
                       }
-                      if (sErrorMethod) {
-                        sErrorMethod({ ...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]);
+                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" }
-        );
-        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;
+          return nextTick();
+        },
+        getParams() {
+          return props.params;
+        },
+        zoom() {
+          if (reactData.isZMax) {
+            return $xeGrid.revert();
           }
-          if (XEUtils.isFunction(slotFunc)) {
-            return getSlotVNs(slotFunc(params));
+          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 [];
-      },
-      /**
-       * 获取需要排除的高度
-       */
-      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 [];
+        },
+        getFormNestedItems() {
+          const $form = refForm.value;
+          if ($form) {
+            return $form.getNestedItems();
+          }
+          return [];
+        },
+        getFormItemByField(field) {
+          const $form = refForm.value;
+          if ($form) {
+            return $form.getItemByField(field);
           }
-          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;
+        },
+        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 {};
         }
-        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;
+        // 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));
+            }
           }
-          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);
+          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);
             }
-          });
-          internalData.uFoot = false;
-          if (isUf) {
-            updateQueryFooter();
+            return parentPaddingSize + getPaddingTopBottomSize(el) + getOffsetHeight(formWrapper) + getOffsetHeight(toolbarWrapper) + getOffsetHeight(topWrapper) + getOffsetHeight(bottomWrapper) + getOffsetHeight(pagerWrapper);
           }
-          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]);
-                }
+          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);
               }
             });
+            internalData.uFoot = false;
+            if (isUf) {
+              updateQueryFooter();
+            }
+            return rest;
           }
-        });
-        if ($xeTable) {
-          return $xeTable.loadColumn(columns);
+          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);
         }
-        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
+      };
+      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]);
+                  }
+                }
+              });
             }
-          ],
-          style: styles
+          });
+          if ($xeTable) {
+            return $xeTable.loadColumn(columns);
+          }
+          return nextTick();
         },
-        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);
+        reloadColumn(columns) {
+          $xeGrid.clearAll();
+          return $xeGrid.loadColumn(columns);
         }
-      }
-    });
-    initPages();
-    onMounted(() => {
-      nextTick(() => {
-        const { columns } = props;
-        const proxyOpts = computeProxyOpts.value;
-        if (props.formConfig) {
-          if (!VxeUIFormComponent) {
-            errLog("vxe.error.reqComp", ["vxe-form"]);
-          }
+      });
+      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++;
         }
-        if (props.pagerConfig) {
-          if (!VxeUIPagerComponent) {
-            errLog("vxe.error.reqComp", ["vxe-pager"]);
-          }
+      );
+      watch(
+        () => props.columns,
+        () => {
+          columnFlag.value++;
         }
-        if (proxyOpts.props) {
-          warnLog("vxe.error.delProp", ["proxy-config.props", "proxy-config.response"]);
+      );
+      watch(columnFlag, () => {
+        nextTick(() => $xeGrid.loadColumn(props.columns || []));
+      });
+      watch(
+        () => props.toolbarConfig,
+        () => {
+          initToolbar();
         }
-        if (columns && columns.length) {
-          $xeGrid.loadColumn(columns);
+      );
+      watch(computeCustomCurrentPageFlag, () => {
+        initPages("currentPage");
+      });
+      watch(computeCustomPageSizeFlag, () => {
+        initPages("pageSize");
+      });
+      watch(computeCustomTotalFlag, () => {
+        initPages("total");
+      });
+      watch(
+        () => props.proxyConfig,
+        () => {
+          initProxy();
         }
-        initToolbar();
-        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());
       });
-      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();
-  }
-});
+      $xeGrid.renderVN = renderVN;
+      provide("$xeGrid", $xeGrid);
+      provide("$xeGantt", null);
+      return $xeGrid;
+    },
+    render() {
+      return this.renderVN();
+    }
+  })
+);
 export {
   grid_default as default
 };