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解決此類問題