vue3 vxe-grid修改currentPage，查询数据的时候，从第一页开始查询

1、当我们设置好VxeGrid.Options进行数据查询的时候,下面是可能的设置：

 const gridOptions = reactive<BasicTableProps>({
    id: 'UserTable',
    showHeaderOverflow: false,
    showOverflow: true,
    keepSource: true,
    columns: userColumns,
    size: 'small',
    pagerConfig: {
      currentPage: 1,
      pageSize: 100,
      pageSizes: [10, 20, 50, 100, 200, 500, 1000],
    },
    toolbarConfig: {
      slots: { buttons: 'toolbar_buttons' },
      refresh: false,
      import: false,
      print: false,
      zoom: false,
      export: false,
      custom: false,
    },
    proxyConfig: {
      props: {
        // 对应响应结果 Promise<{ result: [], page: { total: 100 } }>
        result: 'items', // 配置响应结果列表字段
        total: 'total', // 配置响应结果总页数字段
      },
      ajax: {
        query: async ({ page, form }) => {
          return getUserList({
            page: page.currentPage,
            pageSize: page.pageSize,
            fieldname: searchForm.fieldname,
            fieldreq: searchForm.fieldreq,
            fieldvalue: searchForm.fieldvalue,
          });
        },
      },
    },
})

2、然后我们点击下一页，或者切到到另一页的时候，再次查询的时候会发现没有数据：

其实是有数据的，然后我们在查询的时候，取得是最后一次的pager页码，比如说3，然后查询的时候，可能只有一条数据，所以就显示不出来了。

3、我们查询之前，一定要将页码重新设置为1，这样就可以了：

如果直接这样赋值，就会提示不可以赋值。

其中的代码片段：

 <VxeGrid ref="tableRef" v-bind="gridOptions" @cell-click="handleCellClick" class="ml-2 mr-2">
        <template #xzbhSlots="{ row }"
          ><div class="underline cursor-pointer text-blue-400" @click="xzbhClick(row)">
            {{ row.xzbh }}</div
          >
        </template>
        <template #toolbar_buttons>
          <div class="flex items-center justify-between ml-2 mr-2 w-[99%]">
            <Space>
              <VxeSelect
                v-model:modelValue="searchForm.fieldname"
                style="width: 150px"
                placeholder="==默认所有列=="
                @change="fieldnamelistChange"
              >
                <vxe-option
                  v-for="(item, index) in searchForm.fieldnamelist"
                  :key="index"
                  :value="item.value"
                  :label="item.label"
                />
              </VxeSelect>
          ...
        </template>
</VxeGrid>

4、最后我们通过这样处理即可：

function onSearch() {
    const $grid = tableRef.value;
    if ($grid) {
      const proxyInfo = $grid.getProxyInfo();
      if (proxyInfo) {
        proxyInfo.pager.currentPage = 1;
        $grid.clearCurrentRow();
        $grid.clearFilter();
        $grid.clearCheckboxRow();
        $grid.commitProxy('query');
      }
    }
  }

通过上面的代码，就可以了。