vue table表格中的form表单校验

查看时需要奖表单 禁用 :disabled="forms.changeType == 3"

<el-form ref="jsonDataRules" size="mini" :model="form" :rules="jsonDataRules" label-width="100px"
                 label-suffix=":" :disabled="forms.changeType == 3">
            <el-table :data="form.jsonData" border style="width: 100%; margin-top: 10px;">
                <el-table-column label="序号" width="50">
                    <template slot-scope="scope">
                        <div style="margin-bottom: 20px">
                            {{ scope.$index + 1 }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="姓名">
                    <template slot-scope="scope">
                        <el-form-item :prop="'jsonData.'+scope.$index+'.extra2ZcryId'" label-width="0px"
                                      :rules='jsonDataRules.extra2ZcryId'>
                            <el-select required v-model="scope.row.extra2ZcryId" placeholder="请选择" size="mini"
                                       @change="getCheckVal(scope.row)">
                                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>

重点就是form中有一个数组

form: {
  jsonData: [{
    extra2ZcryId: undefined
  }],
｝

jsonDataRules: {
  extra2ZcryId: [{required: true, message: "姓名不能为空", trigger: "blur"}],
  extra2Post: [{required: true, message: "职务(职称)不能为空", trigger: "blur"}],
  extra2PostTime: [{required: true, message: "任职(聘任)时间不能为空", trigger: "blur"}],
},

校验

this.$refs.jsonDataRules.validate((valid) => {
  if (valid) {
    flag = true
  } else {
    return false;
  }
});