vue3 Element通过v-for循环渲染的form表单验证_vue3循环表单校验

在我们的业务开发中，有时候会经常遇到动态v-for循环渲染出el-form-item，那么这些动态生成的el-form-item如何来进行表单验证

<el-form :model="accountFormDatas" :inline="true" ref="accountFormRef" label-width="120px" :rules="rulesTwo">
      <div>
        <el-form-item label="RFID">
          <el-radio v-model="accountFormDatas.isRfid" label="1">有</el-radio>
          <el-radio v-model="accountFormDatas.isRfid" label="0">无</el-radio>
        </el-form-item>
      </div>
      <div style="margin-top: -10px">
        <el-form-item label="是否有编号">
          <el-radio-group v-model="accountFormDatas.isCode" @change="agreeChange">
            <el-radio label="1" :disabled="disables">有</el-radio>
            <el-radio label="0" :disabled="disabledAdd">无</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <div style="width: 860px; height: 130px; border: 1px solid gray; margin-bottom: 50px" v-show="addAccountForm" v-for="(item, index) in accountFormDatas.applyNeed" :key="index">
        <div style="display: flex; margin-top: 10px">
          <el-form-item label="工具编号" :prop="`applyNeed.${index}.code`" :rules="rulesTwo.code">
            <el-input v-model="item.code" :disabled="disables" style="width: 140px"></el-input>
          </el-form-item>
          <el-form-item label="状态" :prop="`applyNeed.${index}.status`" :rules="rulesTwo.status">
            <el-select v-model="item.status" placeholder="Select" size="small" :disabled="disables" style="width: 120px">
              <el-option label="正常" value="0"></el-option>
              <el-option label="维护" value="1"></el-option>
              <el-option label="修理" value="2"></el-option>
              <el-option label="停用" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="报废时间">
            <el-input v-model="item.scrapTime" :disabled="disables"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="条形码" :prop="`applyNeed.${index}.barCode`" :rules="rulesTwo.barCode">
            <el-input v-model="item.barCode" :disabled="disables"></el-input>
          </el-form-item>
          <el-form-item label="存放位置">
            <el-input v-model="item.storagePlace" :disabled="disables" style="width: 150px"></el-input>
          </el-form-item>
          <div style="text-align: right; padding: 0 10px;">
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteNeed(index)"></el-button>
            <el-button type="primary" icon="el-icon-plus" circle @click='addNeed'></el-button>
          </div>
        </div>
      </div>
    </el-form>

 el-form  的  :model="accountFormDatas"  需要和  

v-for="(item, index) in accountFormDatas.applyNeed"  保持一致 

const rulesTwo = { // 入库表单验证规则
      code: [
        { required: true, message: '请填写工具编号', trigger: 'blur' }
      ],
      name: [
        { required: true, message: '请填写工具名称', trigger: 'blur' }
      ],
      status: [
        { required: true, message: '请选择', trigger: 'change' }
      ],
      barCode: [
        { required: true, message: '请选择', trigger: 'blur' }
      ]
    }
 
 
return {
      rulesTwo
    }

 最后添加验证

const submitPopup = async () => { // 点击保存 关闭页面
      await accountFormRef.value.validate() // 正则判断
    }