Bug: 动态生成vxeTable的搜索表单，点击重置按钮表单没有正确重置

[ShibaInuOfMars]

Version

Vben Admin V5

Describe the bug?

您好！我使用 useVbenVxeGrid遇到了一个问题，就是我想根据columns去动态生成表单的每一项，而且这个表单项是自定义组件，通过formApi.setState后，能正常显示，单点击重置按钮不能正常重置表单。不知道是不是我的用法不对，请大佬帮我看看，或者给我一些思路。谢谢！

Reproduction

two-fields.vue 基于官网示例
<script lang="ts" setup>
import { ElInput, ElSelect, ElOption } from 'element-plus';
const emit = defineEmits(['blur', 'change']);

const modelValue = defineModel<[string, string]>({
default: () => [undefined, undefined],
});

function onChange(e) {
emit('change', modelValue.value);
}
</script>

<template>
<div class="flex w-full gap-1">
<el-select
v-model="modelValue[0]"
placeholder="类型"
@blur="emit('blur')"
@change="onChange"
style="width: 80px;"
>
<el-option
v-for="item in [
{ label: '个人', value: 'personal' },
{ label: '工作', value: 'work' },
{ label: '私密', value: 'private' },
]"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-input
class="flex-1"
clearable
v-model="modelValue[1]"
@blur="emit('blur')"
@input="onChange"
/>
</div>
</template>

然后在任意页面中使用
<script lang="ts" setup>
import { markRaw, onMounted } from 'vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import TwoFields from '#/components/base-table-search/index.vue';
import { Page } from '@vben/common-ui';

const formOptions = {
collapsed: true,
compact: true,
fieldMappingTime: [],
schema: [],
showCollapseButton: true,
submitOnChange: false,
submitOnEnter: true,
};

const gridOptions = {
checkboxConfig: {
highlight: true,
},
border: true,
stripe: true,
columns: [
{ field: 'adminName', title: '用户代号', sortable: true },
{ field: 'realName', title: '用户名称', sortable: true },
{ field: 'tel', title: '手机' },
{ field: 'mail', title: '邮件地址' },
],
height: 'auto',
keepSource: true,
};

onMounted(() => {
//模拟接口返回的columns
const se = [
{ field: 'adminName', title: '用户代号', sortable: true },
{ field: 'realName', title: '用户名称', sortable: true },
{ field: 'tel', title: '手机' },
{ field: 'mail', title: '邮件地址' },
].map(v => {
return {
component: markRaw(TwoFields),
disabledOnChangeListener: false,
fieldName: v.field,
label: v.field,
};
});
gridApi.formApi.setState(() => {
return {
schema: se
}
})
});

const [Grid, gridApi] = useVbenVxeGrid({
gridOptions,
formOptions,
});
</script>

<template>
<Page auto-content-height>
<Grid />
</Page>
</template>

System Info

System:
  OS: Windows 10 10.0.19045
  CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
  Memory: 6.85 GB / 15.83 GB
Binaries:
  Node: 22.12.0 - F:\Program Files (x86)\nodejs\node.EXE
  Yarn: 1.22.22 - F:\Program Files\nodejs\node_modules\npm\node_global_modules\yarn.CMD
  npm: 10.9.0 - F:\Program Files (x86)\nodejs\npm.CMD
  pnpm: 9.15.1 - F:\Program Files\nodejs\node_modules\npm\node_global_modules\pnpm.CMD
Browsers:
  Edge: Chromium (122.0.2365.66)
  Internet Explorer: 11.0.19041.4355

Relevant log output

Validations

• Read the docs
• Ensure the code is up to date. (Some issues have been fixed in the latest version)
• I have searched the existing issues and checked that my issue does not duplicate any existing issues.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[aonoa]

添加默认值试试defaultValue: [undefined, ''],，如果还是有问题的话，尝试重写重置方法

[ShibaInuOfMars]

@aonoa 感谢回复！我添加了defaultValue: [undefined, '']，点击重置问题还是出现。然后我重写重置方法
代码改为：(这次是在playground应用内新建的页面，代码有点不一样，但问题是一样的)

<script lang="ts" setup>
import { markRaw, onMounted } from 'vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import TwoFields from '#/views/examples/form/modules/two-fields.vue';
import { Page } from '@vben/common-ui';

const handleFormReset = () => {
  gridApi.formApi.setValues({ adminName: [undefined, ''], realName: [undefined, ''], tel: [undefined, ''], mail: [undefined, ''] });
  gridApi.reload();
};

const formOptions = {
  collapsed: true,
  compact: true,
  fieldMappingTime: [],
  schema: [],
  showCollapseButton: true,
  submitOnChange: false,
  submitOnEnter: true,
  // 重写重置方法
  handleReset: handleFormReset
};

const gridOptions = {
  checkboxConfig: {
    highlight: true,
  },
  border: true,
  stripe: true,
  columns: [
    { field: 'adminName', title: '用户代号', sortable: true },
    { field: 'realName', title: '用户名称', sortable: true },
    { field: 'tel', title: '手机' },
    { field: 'mail', title: '邮件地址' },
  ],
  proxyConfig: {
    ajax: {
      query: async ({ page, sort }, formValues) => {
        console.log('搜索表单的值', formValues);
      },
    },
  },
  height: 'auto',
  keepSource: true,
};

onMounted(() => {
  //模拟接口返回的columns
  const se = [
    { field: 'adminName', title: '用户代号', sortable: true },
    { field: 'realName', title: '用户名称', sortable: true },
    { field: 'tel', title: '手机' },
    { field: 'mail', title: '邮件地址' },
  ].map(v => {
    return {
      component: markRaw(TwoFields),
      disabledOnChangeListener: false,
      fieldName: v.field,
      label: v.field,
      defaultValue: [undefined, '']
    };
  });
  gridApi.formApi.setState(() => {
    return {
      schema: se
    }
  })
});

const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions,
  formOptions,
});
</script>

<template>
  <Page auto-content-height>
    <Grid />
  </Page>
</template>

点击重置按钮，页面显示正常了，但是在proxyConfig.ajax.query的参数中获取表单的值出现了问题，获取到是上次的。请问是我哪里写的不对吗？