表单
快速开始
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
2
3
4
5
6
7
8
9
10
11
12
13
14
属性
表单Form的属性完全继承了element-plus的表单Form属性
额外的添加了如下属性
| 名称 | 类型 | 必传 | 默认值 | 描述 |
|---|---|---|---|---|
form | object | yes | - | 表单绑定数据 |
items | Array | yes | - | 描述，支持 markdown |
search | boolean | no | false | 是否为搜索表单 |
row | number | no | 3 | 一行显示几列 |
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
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