vue for循环表单并且要验证

循环表单的验证：

• 1、el-form-item 绑定 :prop="stations[${index}][stationId]" :rules="dataRules.stationId"    

注意不循环的表单每个el-form-item 不需要单独加:rules="dataRules.stationId"     

然后prop的名字要与data中的rules数组对象的名称相同即可

• 2、js判断时，此处的stationId也就是data中的rules中的名称

<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
      <el-row :gutter="24">
        <el-col :span="12" class="mb20">
          <el-form-item label="名称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入名称"
              style="width: 400px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="列数" prop="colNum">
            <el-input-number
              controls-position="right"
              :min="1"
              :max="20"
              clearable
              v-model="form.colNum"
              placeholder="请输入列数"
              align="left"
              style="width: 200px"
              @blur="blurNumber"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="process_rows">
        <el-row :gutter="20">
          <el-col :span="8" class="mt20" v-for="(item, index) in form.stations" :key="index">
            <el-form-item :label="`第${index + 1}列`"  :prop="`stations[${index}][stationId]`" :rules="dataRules.stationId" labelWidth="60px">
              <el-tree-select
                v-model="form.stations[index].stationId"
                :data="stationTreeOption"
                :props="{ value: 'deviceId', label: 'name', children: 'children' }"
                clearable
                :check-strictly="false"
                :render-after-expand="false"
                :placeholder="`请选择第${index + 1}列`"
                @change="changeStationTree"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    
    
    const form = reactive({
	name: null,
	colNum: 0,
	stations: [
		{
			columnNumber: 0,
			stationId: null,
		}
	]
    });
    const dataRules = ref({
	name: [{ required: true, message: '请选择', trigger: 'blur' }],
	colNum: [{ required: true, message: '请输入', trigger: 'blur' }],
	stationId: [{ required: true, message: '请选择监测属性', trigger: 'blur' }],
    });