表单

快速开始

form 完全继承了 ElForm 的所有方法

export interface VFormInstance<T extends object> {
  /**
  * 触发表单验证
  */
  validate: (callback?: FormValidateCallback | undefined) => FormValidationResult;
  addField: (field: FormItemContext) => void;
  removeField: (field: FormItemContext) => void;
  resetFields: (props?: Arrayable<FormItemProp> | undefined) => void;
  clearValidate: (props?: Arrayable<FormItemProp> | undefined) => void;
  obtainValidateFields: (props: Arrayable<FormItemProp>) => FormItemContext[];
  doValidateField: (props?: Arrayable<FormItemProp>) => Promise<boolean>;
  validateField: (props?: Arrayable<FormItemProp> | undefined, callback?: FormValidateCallback | undefined) => FormValidationResult;
  scrollToField: (prop: FormItemProp) => void;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

属性

表单Form的属性完全继承了element-plus表单Form属性

额外的添加了如下属性

名称类型必传默认值描述
formobjectyes-表单绑定数据
itemsArrayyes-描述,支持 markdown
searchbooleannofalse是否为搜索表单
rownumberno3一行显示几列
export interface VFormProps<T extends object> extends Partial<Omit<FormProps, 'model'>> {
  /**
   * 是否是搜索表单
   *
   * 如果设置为`true` 会给form添加一个`is-search`的class
   *
   * @default false
   *
   */
  search?: boolean
  /**
   * 表单数据
   */
  form: T
  /**
   * 表单配置
   */
  items: VFormItem<T, any>[]
  /**
   * @default 3
   */
  row?: number
  /**
   * 按钮配置
   */
  buttons?: VFormButtonItem[]
  /**
   * 按钮点击事件
   * @param action
   */
  onButtonClick?(action: string): void
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32