// 表单参数 form: { jobName: "", jobNo: "", produceList: [ { orderNum: "", todayProductNum: "", }, ], }, // 表单校验 rules: { jobName: [{ required: true, message: "内容不能为空", trigger: "blur" }], jobNo: [{ required: true, message: "内容不能为空", trigger: "blur" }], orderNum: [{ required: true, message: "内容不能为空", trigger: "blur" } ], todayProductNum: [{ required: true, message: "内容不能为空", trigger: "blur" }, {type: "number", required: true,message: "内容必须为数字值",},], //验证 <el-form label-position="left" ref="form" :model="form" :rules="rules" > <el-form-item label="姓名" prop="jobName"> <el-input v-model="form.jobName" placeholder="姓名" /> </el-form-item > <el-form-item label="工号" prop="jobNo"> <el-input v-model="form.jobNo" placeholder="工号" /> </el-form-item > <el-form label-position="left" :ref="`form${index}`" :model="item" :rules="rules" label-width="100px" v-for="(item, index) in form.produceList" :key="index" > <template> <el-form-item label="订单号" prop="orderNum"> <el-input v-model="form.orderNum" placeholder="订单号" /> </el-form-item > <el-form-item label="生产数量" prop="todayProductNum"> <el-input v-model.number="form.todayProductNum" placeholder="生产数量" /> </el-form-item > </template> </el-form> </el-form> //提交 onSubmit() { Promise.all([ //非数组部分的表单 this.validateForm("form"), //数组部分的表单，用map返回验证函数的调用 ...this.form.produceReportSlaveList.map((item, index) => this.validateForm(`form${index}`) ), ]) .then((res) => { if (res) { // 全部表单验证通过 } }) .catch((err) => { console.log(err); }); }, validateForm(refs) { //获取到form表单的dom，如果是对象直接拿到，如果是数组，就拿第一个 //elementui对循环的form包装成了数组 let valiForm = this.$refs?.[refs].validate ? this.$refs?.[refs] : this.$refs?.[refs][0]; return new Promise((resolve, reject) => { //在Promise里进行验证，如果通过就resolve() valiForm.validate((res) => { if (res) { resolve(res); } else reject(); }); }); },
标签：form,res,refs,表单,ui,message,element,true From： https://www.cnblogs.com/shax/p/16624325.html