一键免费做网站,企业网站 实名认证,大连本地服务信息网,南昌 网站制作需求是VUE2框架用elementUI写复杂表单组件#xff0c;比如#xff0c;3个相同功能的表单共用一个提交按钮#xff0c;把相同功能的表单写成一个子组件#xff0c;另一个父组件包含子组件的重复调用和一个提交按钮#xff0c;并且要求提交时校验必填项。 注意#xff1a; …需求是VUE2框架用elementUI写复杂表单组件比如3个相同功能的表单共用一个提交按钮把相同功能的表单写成一个子组件另一个父组件包含子组件的重复调用和一个提交按钮并且要求提交时校验必填项。 注意
1.validate函数不传参数就会返回一个promise
2.子组件中写了this.$refs.form?.map...是因为真实项目中el-form是进行了循环的这里可以自定义修改
3.父组件中要用promise来处理调用子组件的方法 子组件
templateel-form refform :modelformData :rulesformRules label-width120pxel-form-item label姓名 propnameel-input v-modelformData.name/el-input/el-form-itemel-form-item label邮箱 propemailel-input v-modelformData.email/el-input/el-form-item!-- 其他表单项 --/el-form
/templatescript
export default {data() {return {formData: {name: ,email: // 其他表单项},formRules: {name: [{ required: true, message: 请输入姓名, trigger: blur }],email: [{ required: true, message: 请输入邮箱, trigger: blur }]// 其他表单项的校验规则}};},methods: {validateForm() {const validatePromises this.$refs.form?.map(v {return v.validate();});if (validatePromises) {return Promise.all(validatePromises).then(results {// 检查结果数组如果所有项都是 true则返回 true否则返回 falsereturn results.every(result result);}).catch(() {// 如果有任何验证 Promise 失败则捕获错误return false;});} else {// 如果 this.$refs.form 不存在直接返回 false 或抛出错误return false;}}}
};
/script 父组件
templatedivFormComponent v-for(ref,index) in formRefs :keyindex :refref/FormComponentel-button typeprimary clicksubmitForms提交/el-button/div
/templatescript
import FormComponent from ./FormComponent.vue;export default {data() {return {formRefs: []};},components: {FormComponent},mounted() {// 根据需要调用表单的次数此处假设为10次for (let i 0; i 10; i) {this.formRefs.push(form${i 1});}},methods: {async onSubmit() {// 1、pc端:一次性校验所有题Promise.all(this.formRefs?.map(v {return this.$refs?.[v]?.[0]?.validateForm();})).then(res {if (res?.every(v v)) {const formDataList this.formRefs?.map(v {return this.$refs?.[v]?.[0]?.form;});// 2、提交问卷console.log(formDataList, formDataList);} else {// 找出所有校验不通过的表单const falseFormList res.filter(v !v);// TODO 自定义操作}}).catch(() {this.$alert(请稍后重试, 提示, {dangerouslyUseHTMLString: true});});}}
};
/script
