vbenjs / vue-vben-admin

A modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. It's fast!

Home Page:https://www.vben.pro

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

useTable开启useSearch后,无法使用多个updateSchema

mengluo04 opened this issue · comments

1、使用useTable创建表格,使用useSearch开启搜索表单
2、在表单formConfig数组中,使用componentProps: ({ formModel, formActionType }) 来处理数据
3、有多个select使用之后只有第一个能正常生效
4、如果第二个使用了componentProps: ({ formModel, formActionType }) =>return {},然后在第一个里面使用updateSchema更新componentProps会直接覆盖fields对应的
5、如果第二个没有用return就是正常的
实例:

  • 正常情况:
  {
    field: "dwid",
    label: "单位名称",
    component: "ApiSelect",
    colProps: {
      span: 6,
    },
    componentProps: ({ formModel, formActionType }) => {
      return {
        api: getCompanyOptions,
        fieldNames: {
          label: "dwmc",
          value: "id",
        },
        onChange: async (value) => {
          const { updateSchema, setFieldsValue } = formActionType;
          setFieldsValue({ rwid: null });
          if (value) {
            updateSchema({
              field: "rwid",
              componentProps: { options: await getTaskOptionsByCompanyId({ dwid: value }) },
            });
          } else {
            updateSchema({
              field: "rwid",
              componentProps: { options: [] },
            });
          }
        },
      };
    },
  },
  {
    field: "rwid",
    label: "任务名称",
    component: "Select",
    colProps: {
      span: 6,
    },
    componentProps: {
      options: [],
      fieldNames: {
        label: "rwmc",
        value: "id",
      },
    },
  },
  • 异常情况
{
    field: "dwid",
    label: "单位名称",
    component: "ApiSelect",
    colProps: {
      span: 6,
    },
    ifShow: ({ values }) => values.isdw === "2",
    componentProps: ({ formModel, formActionType }) => {
      return {
        api: getCompanyOptions,
        fieldNames: {
          label: "dwmc",
          value: "id",
        },
        onChange: async (value) => {
          const { updateSchema, setFieldsValue } = formActionType;
          setFieldsValue({ rwid: null });
          if (value) {
            updateSchema({
              field: "rwid",
              componentProps: { options: await getTaskOptionsByCompanyId({ dwid: value }) },
            });
          } else {
            updateSchema({
              field: "rwid",
              componentProps: { options: [] },
            });
          }
        },
      };
    },
  },
  {
    field: "rwid",
    label: "任务名称",
    component: "Select",
    colProps: {
      span: 6,
    },
    ifShow: ({ values }) => values.isdw === "2",
    componentProps: ({ formModel, formActionType }) => {
      return {
        options: [],
        fieldNames: {
          label: "rwmc",
          value: "id",
        },
        // onChange: async (value) => {
        //   const { updateSchema, setFieldsValue } = formActionType;
        //   setFieldsValue({ fzid: null });
        //   if (value) {
        //     updateSchema({
        //       field: "fzid",
        //       componentProps: { options: await getfzOptionsByRwId({ rwid: value }) },
        //     });
        //   } else {
        //     updateSchema({
        //       field: "fzid",
        //       componentProps: { options: [] },
        //     });
        //   }
        // },
      };
    },
  },
  {
    field: "fzid",
    label: "分组名称",
    component: "Select",
    colProps: {
      span: 6,
    },
    ifShow: ({ values }) => values.isdw === "2",
    componentProps: {
      options: [],
      fieldNames: {
        label: "fzmc",
        value: "id",
      },
    },
  },