TS 类型

这里只列出在配置项中有关联的 TS 类型，并非所有表单 TS 类型。

BaseValueType

表单数据类型

export type BaseValueType =
  | string
  | number
  | boolean
  | null
  | undefined
  | Date
  | string[]
  | number[]
  | boolean[]
  | Date[]
  | [Date, Date]
  | [number, number]
  | [string, string]
  | string[][]
  | number[][]
  | Record<any, any>;

FormItemRenderParams

render、插槽参数类型

export interface FormItemRenderParams<T = Record<string, any>> {
  /**
   * 当前值
   */
  value: unknown;
  /**
   * 当前表单数据
   */
  model: T;
  /**
   * 当前描述列表标签
   */
  label: string;
  /**
   * 字典枚举
   */
  options: ElOption[];
  /**
   * el 组件的 props
   */
  elProps: Recordable;
  /**
   * el-form-item 的 props
   */
  formItemProps: Partial<FormItemProps>;
  /**
   * 更新当前 prop 的表单值函数
   */
  update: (value: unknown) => void;
  /**
   * 当前列配置
   */
  column: FormItemColumnProps<T>;
}

OptionsParams

options 字典数据参数。

export interface OptionsParams<T = Record<string, any>> {
  /**
   * 表单数据
   */
  model?: T;
  /**
   * 字典枚举数据缓存，key 为 prop，value 为 options
   */
  optionsMap?: Map<string, Record<string, any>>;
  /**
   * 当前列配置
   */
  prop?: string;
  /**
   * 额外拓展
   */
  [key: string]: any;
}

ElOption

字典数据类型。

export interface ElOption {
  /**
   * 选项框显示的文字
   */
  label?: string;
  /**
   * 选项框值
   */
  value?: any;
  /**
   * 是否禁用此选项
   */
  disabled?: boolean;
  /**
   * 为树形选择时，可以通过 children 属性指定子选项
   */
  children?: ElOption[];
  /**
   * 拓展其他选项，如 ProTable 也是用该类型，可以接收 tagType、tagEffect 等 ElTag 相关属性
   */
  [key: string]: any;
}

ElOptionField

自定义字典的 key。

export type ElOptionField = {
  label?: string;
  value?: string;
  disabled?: string;
  children?: string;
};

ElProps

el 组件的 Props 类型。

export type ElProps =
  | InputProps
  | InputNumberProps
  | ExtractPropTypes<SelectProps>
  | ExtractPropTypes<SelectV2Props>
  | TreeProps
  | CustomTreeProps
  | CascaderProps
  | DatePickerProps
  | TimePickerDefaultProps
  | TimeSelectProps
  | SwitchProps
  | SliderProps
  | RadioProps
  | RadioGroupProps
  | RadioButtonProps
  | CheckboxProps
  | CheckboxGroupProps
  | AutocompleteProps
  | RateProps
  | ColorPickerProps
  | TransferProps
  | DividerProps
  | UploadProps
  | { labelSize?: "default" | "small" | "large" } // ElDivider 字体大小
  | Record<string, any>;

FormColumn

ProForm 表单配置项。

export interface FormColumn<T = Recordable> extends FormItemColumnProps<T> {
  /**
   * ElFormItem 的 prop 属性，当表单数据 model 为对象时，prop 也是 model 的 key
   */
  prop: NonNullable<FormItemColumnProps<T>["prop"]>;
  /**
   * ElCol Props
   */
  colProps?: MaybeRef<Partial<ColProps>>;
  /**
   * 表单属性的默认值
   */
  defaultValue?:
    | MaybeRef<BaseValueType>
    | Promise<BaseValueType>
    | ((defaultValueParams: DefaultValueParams) => BaseValueType | Promise<BaseValueType>);
  /**
   * 表单排序（从大到小）
   */
  order?: number;
  /**
   * 是否销毁表单，true 销毁，false 不销毁，类似于 v-if
   * @default false
   */
  destroy?: MaybeRef<boolean> | ((model: T) => MaybeRef<boolean>);
  /**
   * 是否隐藏表单，true 隐藏，false 不隐藏，类似于 v-show
   *
   * @default false
   */
  hidden?: MaybeRef<boolean> | ((model: T) => MaybeRef<boolean>);
  /**
   * 指定 Options 的 key，如果设置了则优先从缓存获取对于 key 的 Options 数据
   */
  optionsProp?: string;
  /**
   * 其他拓展
   */
  [key: string]: any;
}

FormItemColumnProps

ProFormItem 的 props

export interface FormItemColumnProps<T = Record<string, any>> {
  /**
   * ElFormItem 的 prop 属性，当表单数据 model 为对象时，prop 也是 model 的 key
   */
  prop?: string;
  /**
   * 标签，ElFormItem 的 label 属性
   */
  label?: MaybeRefOrGetter<string | number>;
  /**
   * 是否显示 label
   *
   * @default true
   */
  showLabel?: MaybeRefOrGetter<boolean>;
  /**
   * 表单组件宽度
   */
  width?: MaybeRefOrGetter<string | number>;
  /**
   * 使用的表单组件名
   *
   * @default 'ElInput'
   */
  el?: MaybeRefOrGetter<FormElType>;
  /**
   * 表单组件的 Props，即会透传到表单组件
   */
  elProps?: MaybeRefOrGetter<ElProps> | ((model: T) => ElProps);
  /**
   * 表单组件的插槽
   */
  elSlots?: {
    [slotName: string]: (
      data: Omit<FormItemColumnProps, "options" | "label" | "elProps" | "formItemProps"> & {
        value: unknown;
        model: T;
        options: ElOption[];
        label: string;
        elProps: UnwrapRef<FormItemColumnProps["elProps"]>;
        formItemProps: UnwrapRef<FormItemColumnProps["formItemProps"]>;
      }
    ) => RenderTypes;
  };
  /**
   * 字典枚举数据
   */
  options?:
    | string[]
    | MaybeRef<ElOption[]>
    | Promise<ElOption[]>
    | ((optionsParams: OptionsParams) => ElOption[] | Promise<ElOption[]>);
  /**
   * 字典指定 label && value && children 的 key 值
   *
   * @default '{ label: "label", value: "value", children: "children", disabled: "disabled" }'
   */
  optionField?: ElOptionField;
  /**
   * ElFormItem props
   */
  formItemProps?: MaybeRefOrGetter<ElFormItemProps>;
  /**
   * 是否显示清除按钮
   *
   * @default true
   */
  clearable?: boolean;
  /**
   * Label 右侧 ElToolTip 提示
   */
  tooltip?:
    | MaybeRefOrGetter<string>
    | ({
        icon?: Component; // ElTooTip 绑定的元素图标
        render?: () => RenderTypes; // 自定义 ElTooTip 绑定的元素，将会覆盖图标，传入 ElTooTip 的 default 插槽里
        contentRender?: () => RenderTypes; // 自定义 ElTooTip 的内容，传入 ElTooTip 的 content 插槽里
      } & Partial<ElTooltipProps>);
  /**
   * 表单绑定的值格式，场景：select 下拉 value 为 "1"，而 value 值是 1 导致无法匹配，可以设置为 valueFormat: "string" 解决
   */
  valueFormat?: "string" | "number" | "boolean" | ((value: unknown) => unknown);
  /**
   * 自定义 label 标题
   */
  renderLabel?: (label: string, scope: FormItemColumnProps) => RenderTypes;
  /**
   * 自定义 Label 内容渲染（返回 HTML），优先级低于 render，高于插槽
   */
  renderLabelHTML?: (label: string, scope: FormItemColumnProps) => string;
  /**
   * 自定义渲染 el-form-item 下的表单组件
   */
  render?: (value: unknown, update: (value: unknown) => void, scope: FormItemColumnProps) => RenderTypes;
  /**
   * 是否为编辑态
   *
   * @default true
   */
  editable?: MaybeRefOrGetter<boolean>;
}