showNav: true

Form

@rrc-materials/form for rrc fork element-ui form

支持使用数据配置表单项，可以配置表单项为输入框、选择器、单选框、多选框等，支持收集、校验、提交数据

Form 表单

当需要收集、校验、提交数据的时候，可以使用表单组件，使用数据配置表单项

:::tip

注意： Element-UI 的属性和方法都适用。 :::

典型表单

行内表单

行内表单换行

对齐方式

全局表单验证

单行表单验证

自定义校验规则

隐藏默认底部按钮

Attributes

| 参数 | 说明 | 可选值 | 类型 | 默认值 | |---------|-------- |---------- |-------- |---------- | | data | 需要渲染的数据 | - | Object | - | | rules | 表单验证规则 | - | Object | - | | has-footer | 是否需要底部按钮 | - | Object | - | | inline | 行内表单模式 | - | Boolean | false | | label-position | 表单域标签的位置 | right/left/top | String | right | | label-width | 表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值 | - | String | - | | label-suffix | 表单域标签的后缀 | - | String | - | | show-message | 是否显示校验错误信息 | - | Boolean | true | | status-icon | 是否在输入框中显示校验结果反馈图标 | - | Boolean | false | | reset-button | 是否显示重置按钮 | - | Boolean | false | | confirm-button-text | 确认按钮文案 | - | String | 确认 | | hasFooter | 是否有底部按钮组 | - | Boolean | true | | ... | 其他属性请看 ElementUI文档 | - | - | - |

Events

| 事件名称 | 说明 |回调参数 | |---------- |-------- |---------- | | validate | 任一表单项被校验后触发 | 被校验的表单项 prop 值，校验是否通过 |

Methods

| 方法名 | 说明 | 参数 | |---------- |-------- |---------- | | validate | 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise | Function(callback: Function(boolean, object)) | | validateField | 对部分表单字段进行校验的方法 | Function(prop: string, callback: Function(errorMessage: string)) |