vue列表中表单的验证

先上效果图:

在点击确认的时候会验证带有验证的字段

 

 

嵌套逻辑:

表单
    表格
        表格项
            表单项
            表单项
        表格项
    表格
表单

 

代码部分:

<!-- 注意此处的model,需要一个对象,而我们的数据是一个列表,我们列表封装成一个对象放在这里就ok了 这里不需要指定rules-->
<el-form :model="{'sysDictDataList':sysDictDataList}"  ref="sysDictDataListRules">
        <el-table
          :data="sysDictDataList"
          style="width: 100%">
          <el-table-column
            label="字典类型">
            <template slot-scope="scope">
              <el-form-item>
                <el-input v-model="scope.row.dictType" :disabled="true"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            prop="dictType"
            label="数据标签">
            <template slot-scope="scope">
                            <!-- 注意此处的prop,需要使用此类型,不能直接填字段名  rules指向该字段的验证规则 -->
              <el-form-item :prop="'sysDictDataList.'+scope.$index+'.dictLabel'" :rules="sysDictDataListRules.dictLabel">
                <el-input v-model="scope.row.dictLabel" placeholder="请输入数据标签"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            prop="dictType"
            label="数据键值">
            <template slot-scope="scope">
              <el-form-item :prop="'sysDictDataList.'+scope.$index+'.dictValue'" :rules="sysDictDataListRules.dictValue">
                <el-input v-model="scope.row.dictValue" placeholder="请输入数据键值"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            prop="dictType"
            label="显示排序">
            <template slot-scope="scope">
              <el-form-item :prop="'sysDictDataList.'+scope.$index+'.dictSort'" :rules="sysDictDataListRules.dictSort">
                <el-input-number v-model="scope.row.dictSort" controls-position="right" :min="0"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            label="备注">
            <template slot-scope="scope">
              <el-form-item :prop="'sysDictDataList.'+scope.$index+'.remark'" :rules="sysDictDataListRules.remark">
                <el-input v-model="scope.row.remark" placeholder="请输入内容"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            label="状态">
            <template slot-scope="scope">
              <el-form-item>
                <el-radio-group v-model="scope.row.status">
                  <el-radio
                    v-for="dict in statusOptions"
                    :key="dict.dictValue"
                    :label="dict.dictValue"
                  >{{dict.dictLabel}}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-form-item>
                <el-button @click="deleteDetails(scope.$index,sysDictDataList)">删除</el-button>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>

数据:

            sysDictDataList: [],   // 字典详细列表
            sysDictDataListRules: { // 字典详细列表的验证
          dictLabel: [
            {required: true, message: "数据标签不能为空", trigger: "blur"}
          ],
          dictValue:[
            {required: true, message: "数据键值不能为空", trigger: "blur"}
          ],dictSort:[
            {required: true, message: "排序不能为空", trigger: "blur"}
          ],remark:[
            {required: true, message: "备注内容不能为空", trigger: "blur"}
          ]
        }

验证方法:

             this.$refs['sysDictDataListRules'].validate(valid =>{
                if (valid){
                  console.log('验证成功,提交');
                }
              });

 

注意:如果是根据不同条件展示不同验证表单,使用v-if可能会有意想不到的错误发生,我使用v-show解决此类问题