【vue】vue使用Element组件时v-for循环里的表单项验证方法

需求是：在点击加号动态添加的，要在点击提交按钮的时候做校验，没值不能提交。

HTML代码：

<span @click="addRow" style="border-radius:4px;cursor:pointer;color:#fff;font-size:12px;display:inline-block;margin-top:8px;background:#409EFF;padding:5px;" class="btnsp"><i class="el-icon-plus"></i></span>
                  <span v-for="(nalist, index) in temp.invoiceInfos" :key="index">
                  <el-row>
                  <el-col :span="13">
                  <el-form-item label="监控参数" :prop="'invoiceInfos.'+index+'.code'" :rules="productGroupRules.productGroupCode">
                  <el-radio-group v-model="nalist.code">
                    <el-radio :label="3">温度</el-radio>
                    <el-radio :label="6">湿度</el-radio>
                    <el-radio :label="8">速度</el-radio>
                    <el-radio :label="9">压力</el-radio>
                  </el-radio-group>
                  </el-form-item>
                  </el-col>
                  </el-row>
    
                   <el-row>
                  <el-col :span="8">     
                  <el-form-item label="标准值" :prop="'invoiceInfos.'+index+'.price'" :rules="productGroupRules.productGroupPrice">
                  <el-input v-model="nalist.price" style="width:190px" :disabled='siteCodeState?true:false' class="enter medium-input" placeholder="请输入标准值" ></el-input>
                  </el-form-item>
                  </el-col>
                  <el-col :span="8">
                  <el-form-item label="最低值" :prop="'invoiceInfos.'+index+'.date'" :rules="productGroupRules.productGroupDate"> 
                  <el-input v-model="nalist.date"  style="width:190px" class="enter medium-input" placeholder="请输入最低值" ></el-input>
                  </el-form-item>
                  </el-col>
                   <el-col :span="8">
                  <el-form-item label="最高值" :prop="'invoiceInfos.'+index+'.nopt'" :rules="productGroupRules.productGroupNopt"> 
                  <el-input v-model="nalist.nopt" style="width:190px" class="enter medium-input" placeholder="请输入最高值" ></el-input>
                  </el-form-item>
                  </el-col>
                  </el-row>
                 </span>

这个是所有代码：

参考的地址是：1.https://www.cnblogs.com/shangxiaofei/p/9809025.html
2.http://menvscode.com/detail/5ba0aac5d3d05c50444aff01

这是这个页面的所有代码：

<template>
      <div class="app-container">
        <!--外部容器 -->
        <el-container>
          <!-- 顶部搜索 -->
          <el-header style="margin-bottom:30px">
            <div class="filter-container">
              <div class="formSearch">
                <el-form :inline="true">
                  <el-form-item label="设备编号">
                  <el-input class="minier-input" v-model="listQuery.equipmentCode" placeholder="请输入设备编号" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="设备名称" class="seat">
                  <el-input v-model="listQuery.equipmentName"  placeholder="请输入设备名称" clearable></el-input>
                  </el-form-item>
                  <el-form-item>
                  <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-header>
          <!-- 内容容器 -->
          <el-container>
            <el-container>
              <!-- 主要区域容器 -->
              <el-main>
                <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" icon="el-icon-plus" type="primary" v-if="addnewly">新增</el-button>
                <el-table :data="listyst" v-loading="listLoading" border fit highlight-current-row
                  style="width:100%;min-height:500px;margin-top:8px" height="550" :header-cell-style="{background:'#199ED8'}">
                  <el-table-column prop="equipmentCode" align="center" label="设备编号">
                     <!--  <template slot-scope="scope">
                      <span>{{scope.row.equipmentCode}}-={{scope.row.equipmentName}}</span>
                       </template>  -->
                  </el-table-column>
                  <el-table-column prop="equipmentName" align="center" label="设备名称">
                  </el-table-column>
                  <el-table-column prop="useDepartment" align="center" label="使用部门">
                  </el-table-column>
                  <el-table-column prop="lineType" align="center" label="拉别">
                  </el-table-column>
                  <el-table-column prop="productType" align="center" label="产品型号">
                  </el-table-column>
                  <el-table-column prop="paramList[0].monitorParamName" align="center" label="监控参数">
                  </el-table-column>
                  <el-table-column prop="paramList[0].standard" align="center" label="标准值/最低值/最高值" min-width="158">
                  <template slot-scope="scope">
                      <span>{{scope.row.paramList[0].standard!==null?scope.row.paramList[0].standard:''}}{{scope.row.paramList[0].standard!==null?'/':''}}{{scope.row.paramList[0].min!==null?scope.row.paramList[0].min:''}}{{scope.row.paramList[0].standard!==null?'/':''}}{{scope.row.paramList[0].max!==null?scope.row.paramList[0].max:''}}</span>
                   </template>
                  </el-table-column>
                   <el-table-column prop="paramList[1].monitorParamName" align="center" label="监控参数">
                  </el-table-column>
                  <el-table-column prop="paramList[1].standard" align="center" label="标准值/最低值/最高值" min-width="158">
                    <template slot-scope="scope">
                      <span>{{scope.row.paramList[1].standard!==null?scope.row.paramList[1].standard:''}}{{scope.row.paramList[1].standard!==null?'/':''}}{{scope.row.paramList[1].min!==null?scope.row.paramList[1].min:''}}{{scope.row.paramList[1].standard!==null?'/':''}}{{scope.row.paramList[1].max!==null?scope.row.paramList[1].max:''}}</span>
                   </template> 
                  </el-table-column>
                  <el-table-column prop="paramList[2].monitorParamName" align="center" label="监控参数">
                  </el-table-column>
                  <el-table-column prop="staLevel" align="center" label="标准值/最低值/最高值" min-width="158">
                   <template slot-scope="scope">
                      <span>{{scope.row.paramList[2].standard!==null?scope.row.paramList[2].standard:''}}{{scope.row.paramList[2].standard!==null?'/':''}}{{scope.row.paramList[2].min!==null?scope.row.paramList[2].min:''}}{{scope.row.paramList[2].standard!==null?'/':''}}{{scope.row.paramList[2].max!==null?scope.row.paramList[2].max:''}}</span>
                   </template> 
                  </el-table-column>
                  <el-table-column prop="paramList[3].monitorParamName" align="center" label="监控参数">
                  </el-table-column>
                  <el-table-column prop="staLevel" align="center" label="标准值/最低值/最高值" min-width="158">
                   <template slot-scope="scope">
                      <span>{{scope.row.paramList[3].standard!==null?scope.row.paramList[3].standard:''}}{{scope.row.paramList[3].standard!==null?'/':''}}{{scope.row.paramList[3].min!==null?scope.row.paramList[3].min:''}}{{scope.row.paramList[3].min!==null?'/':''}}{{scope.row.paramList[3].max!==null?scope.row.paramList[3].max:''}}</span>
                   </template> 
                  </el-table-column>
                   <el-table-column prop="remark" align="center" label="备注">
                  </el-table-column>
                  <el-table-column align="center" label="操作" min-width="150" fixed="right">
                    <template slot-scope="scope">
                      <el-button title="编辑" type="primary" size="mini" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-if="edit"></el-button>
                      <el-button title="删除" type="danger" icon="el-icon-delete" size="mini"  @click="deleteBtn(scope.row)" v-if="cutout"></el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-main>
              <!-- 底栏容器 -->
              <el-footer>
                <!-- 分页 -->
                <div class="pagination-container">
                  <el-pagination background 
                  @size-change="handleSizeChange" 
                  @current-change="handleCurrentChange" 
                  :current-page="listQuery.pageNum" 
                  :page-sizes="[10,20,30,40]" 
                  :page-size="listQuery.pageSize" 
                  layout="total, sizes, prev, pager, next, jumper" 
                  :total="total">
                  </el-pagination>
                </div>
              </el-footer>
              <!-- 新增和编辑是同一个弹出框 -->
              <el-dialog :close-on-click-modal="false" width="960px" :title="textMap[dialogStatus]" top="5vh" v-dialogDrag :visible.sync="dialogFormVisible">
                <el-form :rules="rules" ref="dataForm" :model="temp" label-width="100px">
                  <el-row>
                  <el-col :span="8">     
                  <el-form-item label="设备编号" prop="equipmentCode">
                  <el-select v-model="temp.equipmentCode" clearable
                    filterable remote
                    placeholder="请输入设备编号"
                    :remote-method="getEquipeName" @change="getpstly(temp.equipmentCode)">
                    <el-option
                      v-for="item in euipeTypeList"
                      :key="item.index"
                      :label="item.value"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  </el-form-item>
                  </el-col>
                  <el-col :span="8">
                  <el-form-item label="设备名称" prop="equipmentName"> 
                  <el-input v-model="temp.equipmentName" style="width:190px" disabled class="enter medium-input" placeholder="请输入设备名称" ></el-input>
                  </el-form-item>
                  </el-col>
                   <el-col :span="8">
                  <el-form-item label="使用部门" prop="useDepartment"> 
                  <el-input v-model="temp.useDepartment"  style="width:190px" disabled class="enter medium-input" placeholder="请输入使用部门" ></el-input>
                  </el-form-item>
                  </el-col>
                  </el-row>
    
                   <el-row>
                  <el-col :span="8">     
                  <el-form-item label="拉别" prop="lineType">
                  <el-input v-model="temp.lineType" style="width:190px" disabled class="enter medium-input" placeholder="请输入拉别" ></el-input>
                  </el-form-item>
                  </el-col>
                  </el-row>
    
                  <el-row>
                  <el-col :span="8">     
                  <el-form-item label="产品型号" prop="productType">
                  <el-input v-model="temp.productType" maxlength="32" style="width:190px"  class="enter medium-input" placeholder="请输入产品型号" ></el-input>
                  </el-form-item>
                  </el-col>
                  </el-row>
    
                 
                  <span @click="addRow" style="border-radius:4px;cursor:pointer;color:#fff;font-size:12px;display:inline-block;margin-top:8px;background:#409EFF;padding:5px;" class="btnsp"><i class="el-icon-plus"></i></span>
                  <span v-for="(nalist, index) in temp.paramList" :key="index">
                  <el-row>
                  <el-col :span="13">
                  <el-form-item label="监控参数" :prop="'paramList.'+index+'.monitorParam'" :rules="productGroupRules.productGroupCode">
                  <el-radio-group v-model="nalist.monitorParam">
                    <el-radio :label="1">温度</el-radio>
                    <el-radio :label="2">湿度</el-radio>
                    <el-radio :label="3">速度</el-radio>
                    <el-radio :label="4">压力</el-radio>
                  </el-radio-group>
                  </el-form-item>
                  </el-col>
                  </el-row>
    
                   <el-row>
                  <el-col :span="8">     
                  <el-form-item label="标准值" :prop="'paramList.'+index+'.standard'" :rules="productGroupRules.productGroupPrice">
                  <el-input v-model="nalist.standard" style="width:190px"  class="enter medium-input" placeholder="请输入标准值" oninput="this.value=this.value.replace(/[^0-9\.]/g,'')"></el-input>
                  </el-form-item>
                  </el-col>
                  <el-col :span="8">
                  <el-form-item label="最低值" :prop="'paramList.'+index+'.min'" :rules="productGroupRules.productGroupDate"> 
                  <el-input v-model="nalist.min"  style="width:190px" class="enter medium-input" placeholder="请输入最低值" oninput="this.value=this.value.replace(/[^0-9\.]/g,'')"></el-input>
                  </el-form-item>
                  </el-col>
                   <el-col :span="8">
                  <el-form-item label="最高值" :prop="'paramList.'+index+'.max'" :rules="productGroupRules.productGroupNopt"> 
                  <el-input v-model="nalist.max" style="width:190px" class="enter medium-input" placeholder="请输入最高值" oninput="this.value=this.value.replace(/[^0-9\.]/g,'')"></el-input>
                  </el-form-item>
                  </el-col>
                  </el-row>
                 </span>
                
                  
                  <el-form-item label="备注" prop="remark">
                    <el-input type="textarea" v-model="temp.remark" style="width:510px" maxlength="256" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入备注">
                    </el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">保存</el-button>
                  <el-button v-else type="primary" @click="updateData">保存</el-button>
                  <el-button @click="dialogFormVisible = false">取消</el-button>
                </div>
              </el-dialog>
              
            </el-container>
          </el-container>
        </el-container>
      </div>
    </template>
    
    
    <script>
    import { fetchList, createArticle, updateArticle, fetchPv, eqCodes, euipeTypeQuery } from '@/api/equipmentMonitor/parameter'
    import waves from '@/directive/waves' // 水波纹指令
    import { fetchButton } from '@/api/common/button'
    import { menuList } from '@/store/modules/permission'// 按钮权限
    export default {
      name: 'gather',
      directives: {
        waves
      },
      data() {
        return {
          euipeTypeList: [], // 设备编号
          codeList: [],
          listyst: [],
          lookList: [],
          grite: '',
          total: null,
          listQuery: {
            pageNum: 1,
            pageSize: 20
    
          },
          // 编辑和新增的字段设置
          temp: {
            equipmentCode: null,
            equipmentName: null,
            useDepartment: null,
            lineType: null,
            paramList: [{
              monitorParam: null,
              standard: null,
              min: null,
              max: null
            }]
          },
          wenp: '',
          // 按钮权限
          addnewly: false, // 新
          edit: false, // 编
          cutout: false, // 删
          // 弹框显示
          dialogFormVisible: false,
          dialogStatus: '',
          textMap: {
            update: '编辑',
            create: '新增'
          },
          isAdd: false, // 新增or编辑
          siteDetail: false, // 新增、编辑弹窗
          listLoading: true, // 远程搜索加载动画
    
          siteCodeState: '', // 岗位编码禁用状态
          sendCustomer_options: [], // 新增里的岗位类别
          dropdownlists_options: [], //   新增里岗位等级下拉框
          // 弹框内输入框不填显示的提示信息
          rules: {
            equipmentCode: [{ required: true, message: '请输入设备编号', trigger: 'change' }]
    
          },
          productGroupRules: {
            productGroupCode: [{ required: true, message: '请选择监控参数', trigger: 'blur' }],
            productGroupDate: [{ required: true, message: '请填写标准值', trigger: 'blur' }],
            productGroupPrice: [{ required: true, message: '请填写最低值', trigger: 'blur' }],
            productGroupNopt: [{ required: true, message: '请填写最高值', trigger: 'blur' }]
          }
        }
      },
      created() {
        this.getAA()
        this.getbttonst()
      },
      methods: {
        // 按钮的权限
        getbttonst() {
          menuList.forEach(item => {
            item.children.forEach(e => {
              if (e.name == 'parameter') {
                this.menuCode = e.code
              }
            })
          })
          const determine = {
            menuCode: this.menuCode,
            type: 'web'
          }
          fetchButton(determine).then(response => {
            if (response.data.code == 200) {
              const authority = response.data.data
              for (var i = 0; i < authority.length; i++) {
                if (authority[i].buttonName == '新增') {
                  this.addnewly = true
                } else if (authority[i].buttonName == '编辑') {
                  this.edit = true
                } else if (authority[i].buttonName == '删除') {
                  this.cutout = true
                }
              }
            } else {
              this.$notify({
                title: '警告',
                message: response.data.msg,
                type: 'warning',
                duration: 3000
              })
            }
          })
        },
        // 表格的接口
        getAA() {
          this.listLoading = true
          fetchList(this.listQuery).then(response => {
            console.log(response)
            this.listyst = response.data.data.results
            this.total = response.data.data.total
            this.$nextTick(() => {
              this.listLoading = false
            })
          })
        },
        // 加号新增
        addRow() {
          console.log(23443)
          if (this.temp.paramList.length === 4) {
            this.$notify({
              title: '提示',
              message: '最多可以添加四组',
              type: 'warning',
              duration: 3000
            })
          } else {
            this.temp.paramList.push({ monitorParam: null, standard: null, min: null, max: null })
          }
        },
        // 删除事件
        deleteBtn(row) {
          this.$confirm('确定删除本组设置信息吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            const deleteid = row.id
            fetchPv(deleteid).then(response => {
              this.getAA()
              const index = this.listyst.indexOf(row)
              this.listyst.splice(index, 1)
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        },
        // 搜索
        handleFilter() {
          this.listQuery.pageNum = 1
          this.getAA()
        },
        handleSizeChange(val) {
          this.listQuery.pageSize = val
          this.getAA()
        },
        handleCurrentChange(val) {
          this.listQuery.pageNum = val
          this.getAA()
        },
        // 重置表单
        resetForm() {
          for (const i in this.temp) {
            this.temp[i] = ''
          }
          this.temp.paramList = [{ monitorParam: null, standard: null, min: null, max: null }]
        },
        // 新增点击打开弹窗事件
        handleCreate() {
          this.resetForm()
          // this.getpstly()
          this.siteCodeState = false
          this.dialogStatus = 'create'
          this.dialogFormVisible = true
          this.$nextTick(() => {
            this.$refs['dataForm'].clearValidate()
          })
        },
    
        // 获取设备名称模糊查询数组
        getEquipeName(query) {
          if (query != '') {
            this.euipeTypeList = []
    
            const param1 = {
              equipmentCode: query
            }
            euipeTypeQuery(param1).then(response => {
              console.log(response)
              if (response.data.code === 200) {
                this.euipeTypeList = response.data.data.map(item => {
                  return { value: item.equipmentCode, label: item.equipmentCode }
                })
              }
            })
          } else {
            this.euipeTypeList = []
          }
        },
    
        //  根据设备编号来查询
        getpstly(name) {
          console.log(name)
          const code = {
            code: name
          }
          eqCodes(code).then(response => {
            if (response.data.code == 200) {
              if (response.data.data != null) {
                this.codeList = response.data.data
                this.temp.equipmentName = this.codeList.equipmentName
                this.temp.useDepartment = this.codeList.useDepartmentName
                this.temp.lineType = this.codeList.lineType
              } else {
                this.temp.equipmentName = ''
                this.temp.useDepartment = ''
                this.temp.lineType = ''
              }
            } else {
              this.$notify({
                title: '警告',
                message: response.data.msg,
                type: 'warning',
                duration: 2000
              })
            }
          })
        },
        // 新增提交按钮
        createData() {
          this.$refs['dataForm'].validate(valid => {
            if (valid) {
              createArticle(this.temp).then(response => {
                const msg = response.data.msg
                if (response.data.code !== 200) {
                  this.$notify({
                    title: '警告',
                    message: msg,
                    type: 'warning',
                    duration: 2000
                  })
                  return
                } else {
                  this.dialogFormVisible = false
                  this.getAA()
                  this.$notify({
                    title: '成功',
                    message: '创建成功',
                    type: 'success',
                    duration: 2000
                  })
                }
              })
            }
          })
        },
        // 编辑点击打开弹窗事件
        handleUpdate(row) {
          console.log(row)
          this.temp = Object.assign({}, row) // copy obj 复制obj
          if (row.paramList[0].monitorParam != null && row.paramList[1].monitorParam == null) {
            this.temp.paramList = [{ monitorParam: '', standard: '', min: '', max: '' }]
            this.temp.paramList[0].monitorParam = row.paramList[0].monitorParam
            this.temp.paramList[0].standard = row.paramList[0].standard
            this.temp.paramList[0].min = row.paramList[0].min
            this.temp.paramList[0].max = row.paramList[0].max
          } else if (row.paramList[1].monitorParam != null && row.paramList[2].monitorParam == null) {
            this.temp.paramList = [{ monitorParam: '', standard: '', min: '', max: '' }, { monitorParam: '', standard: '', min: '', max: '' }]
            this.temp.paramList[0].monitorParam = row.paramList[0].monitorParam
            this.temp.paramList[0].standard = row.paramList[0].standard
            this.temp.paramList[0].min = row.paramList[0].min
            this.temp.paramList[0].max = row.paramList[0].max
    
            this.temp.paramList[1].monitorParam = row.paramList[1].monitorParam
            this.temp.paramList[1].standard = row.paramList[1].standard
            this.temp.paramList[1].min = row.paramList[1].min
            this.temp.paramList[1].max = row.paramList[1].max
          } else if (row.paramList[2].monitorParam != null && row.paramList[3].monitorParam == null) {
            this.temp.paramList = [{ monitorParam: '', standard: '', min: '', max: '' }, { monitorParam: '', standard: '', min: '', max: '' }, { monitorParam: '', standard: '', min: '', max: '' }]
            this.temp.paramList[0].monitorParam = row.paramList[0].monitorParam
            this.temp.paramList[0].standard = row.paramList[0].standard
            this.temp.paramList[0].min = row.paramList[0].min
            this.temp.paramList[0].max = row.paramList[0].max
    
            this.temp.paramList[1].monitorParam = row.paramList[1].monitorParam
            this.temp.paramList[1].standard = row.paramList[1].standard
            this.temp.paramList[1].min = row.paramList[1].min
            this.temp.paramList[1].max = row.paramList[1].max
    
            this.temp.paramList[2].monitorParam = row.paramList[2].monitorParam
            this.temp.paramList[2].standard = row.paramList[2].standard
            this.temp.paramList[2].min = row.paramList[2].min
            this.temp.paramList[2].max = row.paramList[2].max
          }
    
          this.siteCodeState = true
          this.dialogStatus = 'update'
          this.dialogFormVisible = true
          this.$nextTick(() => {
            this.$refs['dataForm'].clearValidate()
          })
        },
        // 编辑提交按钮
        updateData() {
          // this.dialogFormVisible = false
          this.$confirm('编辑后的内容设置可能会影响到采集数据解析，确定保存？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            /*  this.$message({
              type: 'success',
              message: '删除成功!'
            }) */
            this.$refs['dataForm'].validate(valid => {
              if (valid) {
                const tempData = Object.assign({}, this.temp)
                updateArticle(tempData).then(response => {
                  const msg = response.data.msg
                  if (response.data.code == 200) {
                    for (const v of this.listyst) {
                      if (v.id === this.temp.id) {
                        const index = this.listyst.indexOf(v)
                        this.listyst.splice(index, 1, this.temp)
                        break
                      }
                    }
                    this.dialogFormVisible = false
                    this.getAA()
                    this.$notify({
                      title: '成功',
                      message: msg,
                      type: 'success',
                      duration: 2000
                    })
                  } else {
                    this.$notify({
                      title: '警告',
                      message: msg,
                      type: 'warning',
                      duration: 2000
                    })
                  }
                })
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消保存'
            })
          })
        }
      }
    }
    </script>
    <style scoped>
    .fiutr {
      float: left;
    }
    .seat {
      margin-left: 50px;
      padding-right: 15px;
    }
    .inline-input {
      width: 200px;
    }
    .futiop{
    text-decoration:underline
    }
    .formSearch {
      width: 100%;
      background: #fafafa;
      border: 1px solid #e9e9e9;
      border-radius: 3px;
      padding: 18px 10px 0;
      margin-bottom: 15px;
    }
    .btnsp{
        position: absolute;
        top:240px;
        right:30px;
        z-index: 800;
    }
    </style>