AcroDynamicForm ( Acro 动态表单 )

基于 Arco Design Vue 封装的动态表单组件

注意

该组件仅支持 Vue 3

基础用法

组件插槽&表单项插槽

API

<acro-dynamic-form /> Props

参数名	描述	类型	默认值
fields	字段配置列表	DynamicFormField[]	-
model	表单数据	Record<string, any>	-
showActionButtonArea	是否显示操作按钮区域 (提交/重置)	boolean	true
showSubmitButton	是否显示提交按钮	boolean	true
submitButtonText	提交按钮文本	string	'提交'
showResetButton	是否显示重置按钮	boolean	true
resetButtonText	重置按钮文本	string	'重置'

<acro-dynamic-form /> Methods

鼠标悬停查看方法类型定义

validate; // 校验全部表单数据
validateField; // 校验部分表单数据
resetFields; // 重置表单数据
clearValidate; // 清除校验状态
setFields; // 设置表单项的值和状态
scrollToField; // 滚动到指定表单项

reset; // 重置表单数据, 是 `resetFields` 方法的别名

<acro-dynamic-form /> Data

参数名	描述	类型
data	表单数据	Record<string, any>

<acro-dynamic-form /> Events

事件名	描述	回调参数
submit	点击了提交按钮的事件	model: Record<string, any>
reset	点击了重置按钮的事件	-

对外导出工具方法

方法名	描述	参数	返回值
defineAcroDynamicFormField	定义单个字段配置	field: DynamicFormField	DynamicFormField
defineAcroDynamicFormFields	定义字段配置列表	fields: DynamicFormField[]	DynamicFormField[]

类型定义

/** 字段配置 */
type AcroDynamicFormField = AcroDynamicFormComponentField | AcroDynamicFormFieldBase;

/** 字段通用配置 */
interface AcroDynamicFormFieldBase {
  /** 字段名 */
  field: string;
  /** 标签 */
  label?: string;
  /** 默认值 */
  defaultValue?: any;
  /** 校验规则 */
  rules?: FieldRule | FieldRule[];
  /**
   * 触发校验的事件
   * @default ['change', 'blur']
   */
  validateTrigger?: FormItemInstance['validateTrigger'];
  /** 传递给 FormItem 组件的参数 */
  formItemProps?: Omit<FormItemInstance['$props'], 'field' | 'label' | 'rules' | 'validateTrigger'>;
  /** 传递给 FormItem 组件的插槽 */
  formItemSlots?: Record<string, (...args: any[]) => VNodeChild>;
  /** 字段类型 */
  type?: string;
  /** 传递给组件的参数 */
  componentProps?: Record<string, any>;
  /** 传递给组件的插槽 */
  componentSlots?: Record<string, (...args: any[]) => VNodeChild>;
}

/** 组件字段配置 */
type AcroDynamicFormComponentField = {
  [T in AcroDynamicFormFieldType]: Omit<AcroDynamicFormFieldBase, 'type' | 'componentProps'> & {
    /** 字段类型 */
    type: T;
    /** 传递给组件的参数 */
    componentProps?: Omit<AcroDynamicFormFieldComponentPropsMap[T], 'modelValue'>;
  };
}[AcroDynamicFormFieldType];

/** 字段类型 */
type AcroDynamicFormFieldType = keyof AcroDynamicFormFieldComponentPropsMap;

/** 字段配置组件参数映射 */
interface AcroDynamicFormFieldComponentPropsMap {
  'input': InputInstance['$props'];
  'input-group': InputGroupInstance['$props'];
  'input-number': InputNumberInstance['$props'];
  'input-password': InputPasswordInstance['$props'];
  'input-search': InputSearchInstance['$props'];
  'input-tag': InputTagInstance['$props'];
  'textarea': TextareaInstance['$props'];
  'select': SelectInstance['$props'];
  'cascader': CascaderInstance['$props'];
  'cascader-panel': CascaderPanelInstance['$props'];
  'tree-select': TreeSelectInstance['$props'];
  'date-picker': DatePickerInstance['$props'];
  'time-picker': TimePickerInstance['$props'];
  'year-picker': YearPickerInstance['$props'];
  'month-picker': MonthPickerInstance['$props'];
  'quarter-picker': QuarterPickerInstance['$props'];
  'week-picker': WeekPickerInstance['$props'];
  'range-picker': RangePickerInstance['$props'];
  'checkbox': CheckboxInstance['$props'];
  'checkbox-group': CheckboxGroupInstance['$props'];
  'radio': RadioInstance['$props'];
  'radio-group': RadioGroupInstance['$props'];
  'switch': SwitchInstance['$props'];
  'upload': UploadInstance['$props'];
  'transfer': TransferInstance['$props'];
  'slider': SliderInstance['$props'];
  'rate': RateInstance['$props'];
  'auto-complete': AutoCompleteInstance['$props'];
  'mention': MentionInstance['$props'];
  'verification-code': VerificationCodeInstance['$props'];
  'color-picker': ColorPickerInstance['$props'];
}