element ui表单 对象 数组验证

 // 表单参数

      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();

        });

      });

    },