一、引入

import { defineComponent, ref } from 'vue';
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
import { formSchema } from '../index'; // 表单字段

二、注册

export default defineComponent({
    components: { BasicForm },
    setup() {
      return {};
    },
  });

三、常用配置

const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
        labelWidth: 140, //  label 宽度
        labelAlign: 'right', // label 布局 可选：left,right
        schemas: schema, // 表单配置
        showActionButtonGroup: false, // 是否显示操作按钮(重置/提交)
        autoSubmitOnEnter: true, // 在input中输入时按回车自动提交
        submitOnReset: true, // 重置时是否提交表单
      });

四、表单常用配置

export const searchFormSchema: FormSchema[] = [
  {
    field: 'sampleClassify', // 字段名
    label: '样品分类', //     标签名
    component: 'Select', // 组件类型
    labelWidth:120, // 覆盖统一设置的 labelWidth
    colProps: { span: 6 }, // 操作按钮外层 Col 组件配置
    defaultValue:'请输入...', // 所渲渲染组件的初始值
    componentProps: { // 所渲染的组件的 props
      options: classNameList,
    },
    dynamicRules: ({ values }) => { // 动态判断当前组件校验规则, 配置动态校验后普通校验配置无效，可以配置在动态校验中
      return values.eventSource === '1' ? [{ required: true, message: '报警人电话必填',pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ }] : [];
    },
  },
 ]

五、schema 内组件的可选类型

export type ComponentType =
  | 'Input'
  | 'InputGroup'
  | 'InputPassword'
  | 'InputSearch'
  | 'InputTextArea'
  | 'InputNumber'
  | 'InputCountDown'
  | 'Select'
  | 'ApiSelect'
  | 'TreeSelect'
  | 'RadioButtonGroup'
  | 'RadioGroup'
  | 'Checkbox'
  | 'CheckboxGroup'
  | 'AutoComplete'
  | 'Cascader'
  | 'DatePicker'
  | 'MonthPicker'
  | 'RangePicker'
  | 'WeekPicker'
  | 'TimePicker'
  | 'Switch'
  | 'StrengthMeter'
  | 'Upload'
  | 'IconPicker'
  | 'Render'
  | 'Slider'
  | 'Rate'
  | 'Divider';  // v2.7.2新增

六、常用方法

const [register, methods] = useForm(props);
const [register, {getFieldsValue, resetFields...}] = useForm(props);

1. 获取表单值：getFieldsValue

   类型: () => Recordable;

2. 设置表单字段值：resetFields

   类型: <T>(values: T) => Promise<void>

3. 重置表单值：resetFields

   类型: ()=> Promise<any>

4. 校验整个表单：validate

   类型: (nameList?: NamePath[]) => Promise<any>

5. 提交表单：submit

   类型: () => Promise<void>

6. 清空校验：clearValidate

   类型: (name?: string | string[]) => Promise<void>

七、案例

<template>
  <BasicForm @register="registerPlanForm" :key="newKey"></BasicForm>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { formSchema } from './index';
export default defineComponent ({
     components: { BasicForm },
     setup() {
         const [registerForm, { resetFields, setFieldsValue, validate, updateSchema }] = useForm({
          labelWidth: 110,
          schemas: schema,
          showActionButtonGroup: false,
        });
         return {
             registerForm
         }
    }
})
</script>

<style>

</style>