需求描述
在表单中,可能部分表单项需封装成自定义组件,如何在表单提交时,能同步触发自定义组件的表单校验?
解决方案
将表单绑定的变量传入自定义组件中,在自定义组件中定义表单校验规则
完整代码范例
表单
内嵌自定义组件
src\test\index.vue文章来源:https://www.toymoban.com/news/detail-623937.html
<template>
<div style="padding: 30px; width: 300px">
<el-form ref="formRef" :model="searchData" label-width="80px" size="mini">
<el-form-item
label="姓名"
prop="name"
:rules="{ required: true, message: '不能为空' }"
>
<el-input v-model="searchData.name"></el-input>
</el-form-item>
<SearchJob :searchData="searchData" />
<el-form-item>
<el-button type="primary" @click="search">搜索</el-button>
<el-button type="primary" @click="reset">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import SearchJob from "./search_job.vue";
export default {
components: {
SearchJob,
},
data() {
return {
searchData: {},
};
},
mounted() {},
methods: {
search() {
this.$refs.formRef.validate((valid) => {
if (valid) {
alert("通过表单校验,开始搜索!");
}
});
},
reset() {
this.searchData = {};
},
},
};
</script>
内嵌组件
src\test\search_job.vue文章来源地址https://www.toymoban.com/news/detail-623937.html
<template>
<el-form-item
label="工作"
prop="job"
:rules="{ required: true, message: '不能为空' }"
>
<el-input v-model="searchData.job"></el-input>
</el-form-item>
</template>
<script>
export default {
props: {
searchData: Object,
},
};
</script>
到了这里,关于vue + element UI 表单中内嵌自定义组件的表单校验触发方案的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!