主要内容
上一篇文章中,分析了el-form和el-form-item是如何配合进行校验的,下面就来看看el-form除了model之前其他的props
rules
我们可以传入一个rules对象,然后el-form回去监听这个rules,其实还涉及到了另外一个propsvalidate-on-rule-change,如果validate-on-rule-change的值为true,那么它就会在rules的值发生改变时,立刻自动调用this.validate(() => {})来触发校验,否则就是在rules改变时,只做removeValidateEvents,在做addValidateEvents操作,rules的值会被el-form-item通过getRules方法拿到,getRules方法会先合并el-form-item本身的rules如果有的话,没有的话就合并el-form的rules,如果经过getRules操作之后,rules有值的话并且required不等于undefined,addValidateEvents就开始监听el-form-blur和el-form-change了
// el-form
watch: {
rules() {
// remove then add event listeners on form-item after form rules change
this.fields.forEach((field) => {
field.removeValidateEvents();
field.addValidateEvents();
});
if (this.validateOnRuleChange) {
this.validate(() => {});
}
},
},
// el-form-item methods
addValidateEvents() {
const rules = this.getRules();
if (rules.length || this.required !== undefined) {
this.$on('el.form.blur', this.onFieldBlur);
this.$on('el.form.change', this.onFieldChange);
}
},
removeValidateEvents() {
this.$off();
}
inline
如果inline为true就会加上相应的样式
<form
class="el-form"
:class="[
labelPosition ? 'el-form--label-' + labelPosition : '',
{ 'el-form--inline': inline },
]"
>
<slot></slot>
</form>
label-position
给label-position传入不同的值,也会添加的不同的样式,如上
label-width
会被传入el-form-item该值,可以为auto,如果el-form-item也设置了该值,就优先使用el-form-item的labelWidth
hide-required-asterisk
如果传入了该值,就会给el-form-item添加该样式
'is-no-asterisk': elForm && elForm.hideRequiredAsterisk
disabled
如果传入了该值,这element-ui一些表单的控件会被disabled,为什么el-form会provide一个el-form实例,每个表单空间都会inject注入这个实例,然后执行类似的代码
inputDisabled() {
return this.disabled || (this.elForm || {}).disabled;
},
总结
不写了,太简单了,el-form的介绍就这些吧,后面没啥看的