diff --git a/docs/src/components/common-ui/vben-form.md b/docs/src/components/common-ui/vben-form.md index ea3c53a5bd1..ce27e1f26ec 100644 --- a/docs/src/components/common-ui/vben-form.md +++ b/docs/src/components/common-ui/vben-form.md @@ -316,6 +316,7 @@ useVbenForm 返回的第二个参数,是一个对象,包含了一些表单 | commonConfig | 表单项的通用配置,每个配置都会传递到每个表单项,表单项可覆盖 | `FormCommonConfig` | - | | schema | 表单项的每一项配置 | `FormSchema` | - | | submitOnEnter | 按下回车健时提交表单 | `boolean` | false | +| submitOnChange | 字段值改变时提交表单 | `boolean` | false | ### TS 类型说明 diff --git a/docs/src/demos/vben-vxe-table/form/index.vue b/docs/src/demos/vben-vxe-table/form/index.vue index a5e8a547b8d..b5be6c65da1 100644 --- a/docs/src/demos/vben-vxe-table/form/index.vue +++ b/docs/src/demos/vben-vxe-table/form/index.vue @@ -76,6 +76,8 @@ const formOptions: VbenFormProps = { submitButtonOptions: { content: '查询', }, + // 是否在字段值改变时提交表单 + submitOnChange: false, // 按下回车时是否提交表单 submitOnEnter: false, }; diff --git a/packages/@core/ui-kit/form-ui/src/form-api.ts b/packages/@core/ui-kit/form-ui/src/form-api.ts index 08318f3cfda..4c96f3d8719 100644 --- a/packages/@core/ui-kit/form-ui/src/form-api.ts +++ b/packages/@core/ui-kit/form-ui/src/form-api.ts @@ -36,6 +36,7 @@ function getDefaultState(): VbenFormProps { showCollapseButton: false, showDefaultActions: true, submitButtonOptions: {}, + submitOnChange: false, submitOnEnter: false, wrapperClass: 'grid-cols-1', }; diff --git a/packages/@core/ui-kit/form-ui/src/types.ts b/packages/@core/ui-kit/form-ui/src/types.ts index 5855ccc60df..30daaee2eef 100644 --- a/packages/@core/ui-kit/form-ui/src/types.ts +++ b/packages/@core/ui-kit/form-ui/src/types.ts @@ -342,6 +342,12 @@ export interface VbenFormProps< */ submitButtonOptions?: ActionButtonOptions; + /** + * 是否在字段值改变时提交表单 + * @default false + */ + submitOnChange?: boolean; + /** * 是否在回车时提交表单 * @default false diff --git a/packages/@core/ui-kit/form-ui/src/vben-use-form.vue b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue index 0401d48eea6..107bb4bf353 100644 --- a/packages/@core/ui-kit/form-ui/src/vben-use-form.vue +++ b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue @@ -6,7 +6,9 @@ import type { ExtendedFormApi, VbenFormProps } from './types'; import { useForwardPriorityValues } from '@vben-core/composables'; // import { isFunction } from '@vben-core/shared/utils'; -import { useTemplateRef } from 'vue'; +import { useTemplateRef, watch } from 'vue'; + +import { useDebounceFn } from '@vueuse/core'; import FormActions from './components/form-actions.vue'; import { @@ -56,6 +58,14 @@ function handleKeyDownEnter(event: KeyboardEvent) { formActionsRef.value?.handleSubmit?.(); } + +watch( + () => form.values, + useDebounceFn(() => { + state.value.submitOnChange && props.formApi?.submitForm(); + }, 300), + { deep: true }, +);