概述

更新: 7/29/2025 字数: 0 字 时长: 0 分钟

常见的表单组件封装。

配置字段

fragmentKey

组件映射字段。

fragmentKey	描述
renderInput	输入框
renderInputNumber	可计数的输入框
renderTextarea	文本域
renderSelect	下拉选择器
renderMonthPicker	月份选择器
renderDatePicker	日期选择器
renderRangePicker	日期范围选择器
renderCheckbox	多选框
renderRadio	单选框
renderSwitch	swith切换器
renderCascader	级联选择器
renderUpload	文件上传

key

双向绑定中的对应字段，配置了 key 可以不用再配置 name 属性。

originProps

对表单项 a-form-item的一些属性配置，比如 label、name等。

elProps

ant-design-vue表单组件的props配置，比如a-inupt中传递 placeholder、allowClear。

所有组件 elProps 默认配置如下。

{
  allowClear: true,
  style: { width: '100%' },
  placeholder: '请输入',
};

renderRangePicker, renderDatePicker时间类型的组件，增加了如下默认配置。

{
  allowClear: true,
  style: { width: '100%' },
  valueFormat: 'YYYY-MM-DD',
  format: 'YYYY-MM-DD',
  placeholder: undefined
}

/** 当配置了showTime:true属性时，设置了如下默认配置： */
{
  allowClear: true,
  style: { width: '100%' },
  valueFormat: 'YYYY-MM-DD HH:mm:ss',
  format: 'YYYY-MM-DD HH:mm:ss',
  placeholder: undefined
}

renderMonthPicker选择月份组，增加了如下默认配置。

{
  allowClear: true,
  style: { width: '100%' },
  valueFormat: 'YYYY-MM',
  format: 'YYYY-MM',
  placeholder: '请选择'
}

options

配置下拉选项。

setOption

设置下拉选项，通过异步发请求去获取,返回值会被设置为 option。

display

是否显示此表单，返回布尔值。

everyTimeLoad

是否每次点击都请求url，用于下拉和级联等组件去实时更新下拉选项。

mountedLoad

在组件挂载阶段自动请求一次 setOption方法。

colProps

Col栅格配置。如：

colProps: {
  // span:12
  xs: 24,
  sm: 24,
  md: 24,
  lg: 16,
  xl: 12,
  xxl: 12,
}

uploadConfig

RUpload配置项。

rangePickerConfig

RRangePicker配置项。带tab时间控件的renderRangePicker组件，默认占两个搜索项的宽度。

changeHandler

组件的内部change事件向外扩散，如select、cascader。

除了组件库导出的参数外，还额外导出了一个setCurrentValue，用于设置当前的值；cascader还多导出了一个options。
如果是动态表单，changeHandler 则会额外传入 setForm 函数，方便动态改变 form 值。

changeHandler: ({ value, options, setCurrentValue, selectedOptions }) => {
  //...
},

动态场景

r-from 支持动态表单主要用于动态下拉，动态显示等。

动态下拉

后者的下拉依赖于前者的选项值，此时可以使用 setOption 来动态设置，此函数调用时会传入 2 个参数。第一个是 form 表单的值，第二个是依赖值，根据表单的某一项值来动态返回 option 即可。

由于每次后者选项每次都是应该是最新的，需设置 everyTimeLoad: true。

const optionData = await setOption(props.form!, props.config.deps?.map(d => unref(d)) || []);

动态显示

有时候一些搜索表单是有权限的，通过 display 来控制表单的显隐。此函数调用时会传入两个参数，可以根据参数去动态决定，同时也可以通过依赖注入的方式，在第二个参数获取依赖值来判断。

注意⚠️，在注入依赖时必须注入 Ref 对象，否则会失去响应式。

const bool = ref(false)
// ✅
const deps = { select: [ bool ]}
// 🙅‍♂️
const deps = { select: [ bool.value ]}

调用函数

!item.display || (isFunction(item.display) && item.display!(formData.value, deps?.map(d => unref(d)) || []))

示例

动态表单

表单验证

通过 formRef 来进行表单验证。

基本使用

Input 配置生成示例。

带请求的下拉

时间筛选

分组选择

级联

上传文件

具体配置参考 Upload 文档

API

Props

属性	描述	类型	默认值
value (v-model)	表单对象	Record<string, any>	—
form-group	表单配置	FormGroupItem[]	—
originProps	form-item 标签属性	FormProps	—
rowProps	行配置	RowProps	—
grid	是否栅格布局	Boolean	true
gridConfig	栅格配置	GridConfig	—
formDependencies	动态表单依赖项	Record<string,any[]>	{}
buttonColProps	按钮的 Col 栅格配置	ColProps	span:24
unfold	“更多筛选”按钮展开的数量	number	—