校验table行内的form编辑

// dom

<el-table-column
              prop="Name"
              :show-overflow-tooltip="false"
              label="name"
            >
              <template slot-scope="scope">
                <div>
                  <span v-if="scope.row.butStatus">{{ scope.row.resGroupName}}</span>
                  <el-form
                    v-if="!scope.row.butStatus"
                    :model="scope.row"
                    :rules="scopeRowRules"
                    ref="scopeRowRuleForm"
                  >
                    <el-form-item
                      prop="resGroupName"
                      :rules="scopeRowRules.resGroupName"
                    >
                      <el-input
                        @blur="changePartitionKey(scope, 'resGroupName')"
                        v-if="!scope.row.butStatus"
                        v-model="scope.row.resGroupName"
                        placeholder="请输入字段"
                      />
                    </el-form-item>
                  </el-form>
                </div>
              </template>
</el-table-column>

　　

// 定义表单校验字段

private scopeRowRules = {
      resGroupName: [
        {
          required: true,
          message: '提示信息',
        }
      ],
}

　　

// 实现方法

private validateScopeRow() {
      let valid = true;
       //   （ts）scopeRowRuleForm 和table绑定的ref一致
      const settingScopedRowFormElms = <Array<any>>this.$refs["scopeRowRuleForm"];
      const len = settingScopedRowFormElms.length;
      for (let index = 0; index < len; index++) {
        valid = settingScopedRowFormElms[index]
          .validate()
          .catch(e => Promise.reject(index));
      }
      return valid;
    }