vbenjs / vue-vben-admin

A modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. It's fast!
https://www.vben.pro
MIT License
24.23k stars 6.6k forks source link

useTable下 formConfig设置submitOnChange: true ,schemas 属性下有设置defaulfValue时会重复请求 #3224

Closed zs555zs closed 10 months ago

zs555zs commented 10 months ago

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

描述 Bug

使用 useTable,设置

api: getTable,
useSearchForm: true,
    formConfig: {
      schemas: billSearchSchema,   // 下面的表格项设置 defaulfValue
      submitOnChange: true,  // 为true 
    },

schemas 下有设置 defaulfValue, submitOnChange: true 时,会执行两次请求 getTable

复现 Bug

请描述在演示页面中复现 Bug 的详细步骤,以确保我们可以理解并定位问题。部分 Bug 如果未在 Demo 中涉及,请务必提供关键代码

系统信息

DesignHhuang commented 10 months ago

如果一次是默认请求,一次是表格项OnChange导致的话,可以试试将immediate设为false image

zs555zs commented 10 months ago

如果一次是默认请求,一次是表格项OnChange导致的话,可以试试将immediate设为false image

这样确实可以

Jzow commented 10 months ago

这个参数在table里一点效果没有

 const [registerTable, { getSelectRows, reload }] = useTable({
      title: '操作',
      rowKey: 'id',
      columns: ReceiptColumn,
      api: getReceipt,
      searchInfo: {
        "type": type.value,
        "subType": subType.value,
      },
      rowSelection: {
        type: 'radio',
      },
      formConfig: {
        labelWidth: 110,
        schemas: searchSchema,
      },
      showIndexColumn: false,
      bordered: true,
      showTableSetting: true,
      canResize: true,
      tableSetting: { fullScreen: true },
      useSearchForm: true,
      clickToRowSelect: true,
      immediate: false,
    });

他放在table里的目的又是什么 如果只是为了解决ApiSelect

DesignHhuang commented 10 months ago

这个参数在table里一点效果没有

 const [registerTable, { getSelectRows, reload }] = useTable({
      title: '操作',
      rowKey: 'id',
      columns: ReceiptColumn,
      api: getReceipt,
      searchInfo: {
        "type": type.value,
        "subType": subType.value,
      },
      rowSelection: {
        type: 'radio',
      },
      formConfig: {
        labelWidth: 110,
        schemas: searchSchema,
      },
      showIndexColumn: false,
      bordered: true,
      showTableSetting: true,
      canResize: true,
      tableSetting: { fullScreen: true },
      useSearchForm: true,
      clickToRowSelect: true,
      immediate: false,
    });

他放在table里的目的又是什么 如果只是为了解决ApiSelect

image 在有api的情况下,这个参数可以控制表格是否立即去请求数据。

Jzow commented 10 months ago

在有api的情况下,这个参数可以控制表格是否立即去请求数据。

就上面的demo当他为false的时候他是可以阻止打开table去直接请求,但是什么时候触发true 请求

DesignHhuang commented 10 months ago

在有api的情况下,这个参数可以控制表格是否立即去请求数据。

就上面的demo当他为false的时候他是可以阻止打开table去直接请求,但是什么时候触发true 请求

reload(),或者控制fetch

Jzow commented 10 months ago

在有api的情况下,这个参数可以控制表格是否立即去请求数据。

就上面的demo当他为false的时候他是可以阻止打开table去直接请求,但是什么时候触发true 请求

reload(),或者控制fetch

    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
      setModalProps({confirmLoading: false, destroyOnClose: true, width: 1200});
      type.value = data.type
      subType.value = data.subType
      getTitle.value = data.title
      reload({
        "type": type.value,
        "subType": subType.value,
      });
    });

    export function getReceipt(params: queryReceipt, type: string, subType: string) {
    console.info(params)
    console.info(type)
    console.info(subType)
    return defHttp.get<BaseDataResp<ReceiptResp>>(
        {
            url: API.GetOtherReceipt,
            params: params
        }
    );
}

这样的话它好像并没有把值传到Api当中 打印出的结果都是undefined,显然我在传递之前确保他肯定是有值

Jzow commented 10 months ago

1407 #3269