ElementUI Form表单里使用 v-for循环创建表单元素校验

ElementUI Form表单里使用 v-for循环创建表单元素校验

1、表单的主数据是要写成对象形式 :model="ruleForm" 不过既然是要动态的，肯定是要循环呢，所以可以写成这样：

 data() {
   
    return {
   
        ruleForm:{
   
            title: "",
            checkGruopList: [{
   
                name: "",
                phone: "",
                idCard:"",
            }]
        },
    }
 }

• 因为是循环的，所以prop也要变成动态的了，要拼接上 index，就变成根据索引去找对应的校验项了，即为 :prop="'checkGruopList.' + index + '.name'" ，这样的话，就变成了：prop="checkGruopList.0.name"、prop="checkGruopList.1.name"、prop="checkGruopList.2.name" … 这样的话，就可以照顾到每一项中的每一个绑定的值了，校验就不会漏掉

• 最重要的是 el-form-item 标签里面一定要加校验规则 :rules="rules.name" ,否则页面上不会触发校验,并且必填的星号也不会出现

2、校验规则写成内联就可以触发校验函数 this.$refs["ruleForm"].validate((val) => {}) 了

<template>
    <el-form :model="ruleForm" ref="ruleForm" label-width="120px" class="ruleForm">
         <el-row :span="24">
            <el-col :span="8">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="ruleForm.title"></el-input>
                </el-form-item>
            </el-col>
         </el-row>