一般情况下(form中的组件都是element提供的组件)在使用elm的表单校验时我们是这么使用的:
// 栗子.vue
<template>
<el-form :model="formData" :rule="rules" ref="formRef">
<el-form-item prop="inputValue">
<el-input v-model="formData.inputValue"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="submit">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
.......省略
data() {
return {
formData: {
inputValue: ''
},
rules: {
inputValue: [
{
required: true, message: '请输入活动名称', trigger: 'blur' },
]
}
}
},
methods: {
submit() {
this.$refs.formRef.validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
}
</script>
但是当我们在<el-form-item>
组件中添加自定义的组件时,你还继续按照上面这中用法是无效的,翻阅element-ui源码就能发现其中原因。
element-ui的form组件的表单验证是由<el-form-item>
组件配合触发的,在el-form-item
中的源码如下:
// el-form-item源码
mounted() {
if (this.prop) {
this.dispatch('ElForm&#