BasicTable中重置了submitFunc方法后，如何在表单值变化的时候主动调取网络请求

[xiao-shu-sheng]

⚠️ 重要 ⚠️ 在进一步操作之前，请检查下列选项。如果您忽视此模板或者没有提供关键信息，您的 Issue 将直接被关闭

• 已阅读 文档.
• 确保您的代码已是最新或者所报告的 Bug 在最新版本中可以重现. (部分 Bug 可能已经在最近的代码中修复)
• 已在 Issues 中搜索了相关的关键词
• 不是 ant design vue 组件库的 Bug

描述 Bug

我用了reload，但是诡异的是reload时，请求的参数是变化前的参数，而不是变化后的参数，我有点懵

[xachary]

建议提供最小可重现用例（可复制、可直接运行）

[xiao-shu-sheng]

`
<BasicTable @register="registerTable">
<template #form-custom> custom-slot
<template #toolbar>
<a-button type="primary" @click="getFormValues">获取表单数据

<script lang="ts" setup> import { onMounted } from 'vue'; import { BasicTable, useTable, FormSchema } from '@/components/Table'; import { getBasicColumns } from './tableData'; import { demoListApi } from '@/api/demo/table'; const schemas: FormSchema[] = [ { field: `field11`, label: `Slot示例`, component: 'Select', // slot: 'custom', componentProps: { options: [ { label: '段强', value: 1 }, { label: '潘霞', value: 3 }, { label: '康军', value: 2 }, ], }, colProps: { xl: 12, xxl: 8, }, }, ]; const [registerTable, { getForm, reload }] = useTable({ title: '开启搜索区域', api: demoListApi, columns: getBasicColumns(), useSearchForm: true, formConfig: { schemas: schemas, showResetButton: false, // 隐藏按钮 submitButtonOptions: { text: '其他操作', }, submitFunc: handleSubmit, }, showTableSetting: false, showIndexColumn: false, rowKey: 'id', rowSelection: { type: 'checkbox', }, showSelectionBar: false, // 显示多选状态栏 beforeFetch: beforeFetch, }); function beforeFetch(params) { console.log(params, 'params'); } function getFormValues() { console.log(getForm().getFieldsValue()); } async function handleSubmit() { await console.log('其他操作'); } onMounted(() => { getForm().updateSchema({ field: 'field11', componentProps: { onChange: (e) => { reload(); }, }, }); }); </script>

`

[xachary]

` <BasicTable @register="registerTable"> <template #form-custom> custom-slot <template #toolbar> <a-button type="primary" @click="getFormValues">获取表单数据

<script lang="ts" setup> import { onMounted } from 'vue'; import { BasicTable, useTable, FormSchema } from '@/components/Table'; import { getBasicColumns } from './tableData'; import { demoListApi } from '@/api/demo/table'; const schemas: FormSchema[] = [ { field: `field11`, label: `Slot示例`, component: 'Select', // slot: 'custom', componentProps: { options: [ { label: '段强', value: 1 }, { label: '潘霞', value: 3 }, { label: '康军', value: 2 }, ], }, colProps: { xl: 12, xxl: 8, }, }, ]; const [registerTable, { getForm, reload }] = useTable({ title: '开启搜索区域', api: demoListApi, columns: getBasicColumns(), useSearchForm: true, formConfig: { schemas: schemas, showResetButton: false, // 隐藏按钮 submitButtonOptions: { text: '其他操作', }, submitFunc: handleSubmit, }, showTableSetting: false, showIndexColumn: false, rowKey: 'id', rowSelection: { type: 'checkbox', }, showSelectionBar: false, // 显示多选状态栏 beforeFetch: beforeFetch, }); function beforeFetch(params) { console.log(params, 'params'); } function getFormValues() { console.log(getForm().getFieldsValue()); } async function handleSubmit() { await console.log('其他操作'); } onMounted(() => { getForm().updateSchema({ field: 'field11', componentProps: { onChange: (e) => { reload(); }, }, }); }); </script>

`

MD语法不香么？大神可能一眼看出症结所在

[xiao-shu-sheng]

` <BasicTable @register="registerTable"> <template #form-custom> custom-slot <template #toolbar> <a-button type="primary" @click="getFormValues">获取表单数据

<script lang="ts" setup> import { onMounted } from 'vue'; import { BasicTable, useTable, FormSchema } from '@/components/Table'; import { getBasicColumns } from './tableData'; import { demoListApi } from '@/api/demo/table'; const schemas: FormSchema[] = [ { field: `field11`, label: `Slot示例`, component: 'Select', // slot: 'custom', componentProps: { options: [ { label: '段强', value: 1 }, { label: '潘霞', value: 3 }, { label: '康军', value: 2 }, ], }, colProps: { xl: 12, xxl: 8, }, }, ]; const [registerTable, { getForm, reload }] = useTable({ title: '开启搜索区域', api: demoListApi, columns: getBasicColumns(), useSearchForm: true, formConfig: { schemas: schemas, showResetButton: false, // 隐藏按钮 submitButtonOptions: { text: '其他操作', }, submitFunc: handleSubmit, }, showTableSetting: false, showIndexColumn: false, rowKey: 'id', rowSelection: { type: 'checkbox', }, showSelectionBar: false, // 显示多选状态栏 beforeFetch: beforeFetch, }); function beforeFetch(params) { console.log(params, 'params'); } function getFormValues() { console.log(getForm().getFieldsValue()); } async function handleSubmit() { await console.log('其他操作'); } onMounted(() => { getForm().updateSchema({ field: 'field11', componentProps: { onChange: (e) => { reload(); }, }, }); }); </script>

`

MD语法不香么？大神可能一眼看出症结所在

稍等啊

[xiao-shu-sheng]

<template>
  <BasicTable @register="registerTable">
    <template #form-custom> custom-slot </template>
    <template #toolbar>
      <a-button type="primary" @click="getFormValues">获取表单数据</a-button>
    </template>
  </BasicTable>
</template>
<script lang="ts" setup>
  import { onMounted } from 'vue';
  import { BasicTable, useTable, FormSchema } from '@/components/Table';
  import { getBasicColumns } from './tableData';

  import { demoListApi } from '@/api/demo/table';

  const schemas: FormSchema[] = [
    {
      field: `field11`,
      label: `Slot示例`,
      component: 'Select',
      // slot: 'custom',
      componentProps: {
        options: [
          { label: '段强', value: 1 },
          { label: '潘霞', value: 3 },
          { label: '康军', value: 2 },
        ],
      },
      colProps: {
        xl: 12,
        xxl: 8,
      },
    },
  ];

  const [registerTable, { getForm, reload }] = useTable({
    title: '开启搜索区域',
    api: demoListApi,
    columns: getBasicColumns(),
    useSearchForm: true,
    formConfig: {
      schemas: schemas,
      showResetButton: false, // 隐藏按钮
      submitButtonOptions: {
        text: '其他操作',
      },
      submitFunc: handleSubmit,
    },
    showTableSetting: false,
    showIndexColumn: false,
    rowKey: 'id',
    rowSelection: {
      type: 'checkbox',
    },
    showSelectionBar: false, // 显示多选状态栏
    beforeFetch: beforeFetch,
  });

  function beforeFetch(params) {
    console.log(params, 'params');
  }

  function getFormValues() {
    console.log(getForm().getFieldsValue());
  }

  async function handleSubmit() {
    await console.log('其他操作');
  }

  onMounted(() => {
    getForm().updateSchema({
      field: 'field11',
      componentProps: {
        onChange: (e) => {
          reload();
        },
      },
    });
  });
</script>

[xiao-shu-sheng]

吐槽一下：这东西是真的难用啊

[xachary]

吐槽一下：这东西是真的难用啊

use多了，凌乱了

[xiao-shu-sheng]

吐槽一下：这东西是真的难用啊

use多了，凌乱了
唉，过度封装了

[xachary]

@gui-gu-zi
在 reload(); 前面加一个 await nextTick(); 试试。

// nextTick import 一下
onChange: async (e) => {
  await nextTick();
  reload();
},

另外，这个和 updateSchema 没关系，即使直接放在 schemas 里，也一样的问题。

[xiao-shu-sheng]

@gui-gu-zi 在 reload(); 前面加一个 await nextTick(); 试试。

// nextTick import 一下
onChange: async (e) => {
  await nextTick();
  reload();
},

另外，这个和 updateSchema 没关系，即使直接放在 schemas 里，也一样的问题。

我试试

[xiao-shu-sheng]

可以了，谢谢

[xiao-shu-sheng]

另外，希望各位大神有时间把文档更新一下吧，孩子们快被文档折磨死了

[xachary]

原因应该是 #3573
如果大神通过此 pr，就无需 nextTick 了
@gui-gu-zi