表单元素

名称类型动态必传默认值描述
dataIndexstring-yes-绑定表单数据的key
关联到modelValueprops字段上
labelstringyesyes-描述,支持 markdown
ruleArrayyesno-表单配置项验证规则,element-plus 的表单验证规则
vIf(data)=>boolean-no3是否渲染
propsobjectyesno-表单元素属性
不同的表单元素有不同的属性类型
export interface BaseItem<
  T extends object, 
  Key extends DeepKey<T> = DeepKey<T>
>{
  /**
   * 占用多个区域
   */
  colSpan?: number
  /**
   * 对应的字段
   */
  dataIndex: Key
  /**
   * label #1
   */
  label: DynamicDef<T, string> 
  /**
   * 验证规则
   */
  rule?: DynamicDef<T, ValidationRule[]>
  /**
   * 是否渲染
   */
  vIf?: DynamicDef<T, boolean>
}
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

DynamicDef

所有DynamicDef声明的类型,都是可以动态计算的类型

export interface _DynamicDef<T, Option> {
  (data: T): Option
}
/**
 * @param {T} 表单form的数据,即传入`From`的`form`属性
 */
export type DynamicDef<T, Option> =
  | Option
  | _DynamicDef<T, Option>;
1
2
3
4
5
6
7
8
9

关于属性配置

我们只是对表单元素的属性配置进行了微调,以实现快速配置渲染
若您在使用中遇到相关配置问题,您可以优先遵循 element-plus 官方配置文档