# formConfig
formConfig 中有两个属性,formItems 和 config,config 主要用于控制 a-form-model 层,formItems 主要用于控制 a-form-model-item 层
# config
配置项 | 说明 | 类型 | 必填 | 默认值 |
---|---|---|---|---|
layout | 表单布局 | 'horizontal' | 'vertical' | 'inline' | string | 'horizontal' |
labelLayout | 标签布局 ,flex 状态下可配置固定宽度,grid 状态下可以控制栅格 | 'flex' | 'grid' | string | flex |
labelCol | 标签栅格数,仅在 labelLayout = 'grid'状态下生效,可参考ant-design-vue (opens new window) | Object | 否 | - |
wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 labelCol | Object | 否 | - |
hideRequiredMark | 隐藏必选标记 | boolean | 否 | false |
disabled | 禁用整个表单 | boolean | 否 | false |
# formItems
v-form-create
通过 formItems
来渲染表单,您可以根据以下配置,灵活的渲染表单,来达到您的需求
配置项 | 说明 | 类型 | 必填 | 默认值 |
---|---|---|---|---|
type | 控件类型,用于渲染不同的控件 | string | 是 | - |
label | 表单项 label | string | 否 | - |
rules | 表单校验规则,参照ant-design-vue (opens new window) | Array | 否 | - |
span | 表单项占用栅格数,仅在 horizontal 布局下生效 | number|string | 否 | - |
hidden | 隐藏表单项 | boolean | 否 | false |
hiddenLabel | 隐藏表单的标签 | boolean | 否 | false |
width | 控件宽度 ,需要带单位,如 200px、80%等 | string | 否 | - |
help | 提示信息 ,用于描述表单项功能 | string | 否 | - |
props | 传递给控件的 props,此处绑定的 props 讲全部作为控件的 props 传入,如果您不准备传递属性给控件,请您依然保持传递空对象 | Object | 是 | {} |
on | 此属性监听控件所有的事件 | Object | 否 | - |
field | 表单项绑定到 formData 中的字段 | string | 是 | - |
link | 监听指定字段联动时触发表单的 update 方法 | Array | 否 | - |
update | 当 link 中的字段发生变化时,或者表单项本身字段发生变化时触发,示例 | Function(field,value,formItem,fApi) | 否 | - |
labelCol | label 标签布局,可参考ant-design-vue (opens new window) | Object | 否 | - |
wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 labelCol | Object | 否 | - |
← v-form-create 自定义控件 →