@rrc-materials/form

---

showNav: true

Form

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

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

<script> import Basic from './demo/basic.md' import Inline from './demo/inline.md' import Position from './demo/position.md' import Validate from './demo/validate.md' import ValidateCustom from './demo/validate.custom.md' import ValidateInline from './demo/validate.inline.md' import HiddenFooter from './demo/hidden.footer.md' import InlineBr from './demo/inlinebr.md' export default { components: { Basic, Inline, Position, Validate, ValidateCustom, ValidateInline, HiddenFooter, InlineBr } } </script>

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))