關於el-table中的el-form-item的表單校驗，以及只校驗部分（el-table中的）表單

一些說明：table中的數據data，必須要在form對象下，其他的參考下面的代碼

下面是我項目中的一段代碼：

<template>
    <el-form ref="tableForm" size="mini" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="18">
            <el-col :span="8">
                <el-form-item label="學生姓名：" prop="studentName">
                    <el-input disabled v-model="form.studentName"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="學生編號：" prop="studentNumber">
                    <el-input disabled v-model="form.studentNumber"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="年級：" prop="grade">
                    <el-input disabled v-model="form.grade"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="18">
            <el-col :span="24">
                <div class="admission">
                    <span class="admission-title">招生錄取：</span>
                    <span v-show="!scoreListIsEdit" class="admission-icon" @click="editTable"><i class="el-icon-edit"></i>編輯</span>
                    <span v-show="scoreListIsEdit" class="admission-icon" @click="submitTable"><i class="el-icon-document-checked"></i>確定</span>
                </div>
                <el-table class="jr-table" :class="scoreListIsEdit ? 'active' : ''" :data="form.schoolDetail.scoreList" highlight-current-row>
                    <el-table-column align="center" label="年份">
                        <template slot-scope="scope">
                            <el-form-item label-width="0" :rules="rules.year" :prop="'schoolDetail.scoreList['+scope.$index+'].year'">
                                <span v-show="!scoreListIsEdit">{{ scope.row.year || '-' }}</span>
                                <el-date-picker v-show="scoreListIsEdit" v-model="scope.row.year" type="year" value-format="yyyy" placeholder="年份"/>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="批次">
                        <template slot-scope="scope">
                            <el-form-item label-width="0" :rules="rules.batch" :prop="'schoolDetail.scoreList['+scope.$index+'].batch'">
                                <span v-show="!scoreListIsEdit">{{ scope.row.batch || '-' }}</span>
                                <el-input v-show="scoreListIsEdit" v-model="scope.row.batch" placeholder="批次"/>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="錄取人數">
                        <template slot-scope="scope">
                            <el-form-item label-width="0">
                                <span v-show="!scoreListIsEdit">{{ scope.row.passNum || '-' }}</span>
                                <el-input oninput="this.value= this.value.match(/^\d*/g) ? this.value.match(/^\d*/g)[0] : ''" v-show="scoreListIsEdit" v-model="scope.row.passNum" placeholder="錄取人數"/>
                            </el-form-item>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="addScoreList" v-if="scoreListIsEdit">
                    <el-button @click="addScoreList" size="mini">+ 添加</el-button>
                </div>
            </el-col>
        </el-row>
    </el-form>
</template>

<script>
export default {
    data() {
        return {
            scoreListIsEdit: false,//學校招生信息是否在編輯狀態；
            form: {
                studentName: '',//學生姓名
                studentNumber: '',//學生編號
                grade: '',//年級
                 //學校校信息
                schoolDetail: {
                introduce: "", //學校簡介
                scoreList: [] //分數線列表
                },
            },
            rules: {
                'studentName': {required: true, message: '請輸入學生姓名', trigger: 'blur'},
                'studentNumber': {required: true, message: '請輸入學生編號', trigger: 'blur'},
                'grade': {required: true, message: '請輸入年級', trigger: 'blur'},
                'year': {required: true, message: '請選擇年份', trigger: 'blur'},
                'batch': {required: true, message: '請輸入批次', trigger: 'blur'},
            },
        }
    },

    mounted() {
        /**
        *@desc 編輯招生政策
        */
        editTable() {
            this.scoreListIsEdit = true;
        },

        /**
        *@desc 點擊保存招生政策按鈕,校驗招生錄取表格中的數據   此處就是部分表單校驗
        */
        submitTable() {
            let fieldToValidate = []
            this.form.schoolDetail.scoreList.forEach((item, index) => {
                fieldToValidate.push(`schoolDetail.scoreList[${index}].year`, `schoolDetail.scoreList[${index}].batch`)
            })
            let that = this;
            Promise.all(
                fieldToValidate.map(item => {
                    let p = new Promise((resolve, reject) => {
                        that.$refs['tableForm'].validateField(item, valid => {
                            resolve(valid)
                        })
                    })
                    return p
                })
            ).then(res => {
                res = res.filter(item => item)
                if(!res.length) {
                this.scoreListIsEdit = false;
                }
            })
        },

        /**
        *@desc 招生錄取信息刪除
        */
        deleteScoreList(index) {
            this.form.schoolDetail.scoreList.splice(index, 1)
        },

        /**
        *@desc 招生錄取信息新增
        */
        addScoreList() {
            this.form.schoolDetail.scoreList.push({
                batch: "",
                pitchingLine: 0,
                ranking: 0,
                passNum: 0,
                year: this.$M().format('yyyy'),
            })
        },
    }
}
</script>
<style lang="scss">
    .admission {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 32px;
        line-height: 32px;
        font-size: 12px;
        .admission-title {
            width: 120px;
            box-sizing: border-box;
            padding-right: 12px;
            text-align: right;
            color: #777e84;
            font-weight: bold;
        }
        .admission-icon {
          cursor: pointer;
          color: #409EFF;
        }
    }
    .admissionTable {
      width: 100%;
      padding-left: 120px;
      box-sizing: border-box;
      margin-bottom: 20px;
      font-size: 12px;
      .jr-table {
        font-size: 12px;
        .el-form-item__content {
          font-size: 12px;
        }
      }
      .jr-table.active .el-table__body .el-form-item--mini {
        margin-bottom: 12px;
      }

      .jr-table .el-table__body .el-form-item--mini {
        margin-top: 0;
        margin-bottom: 0;
      }
    }
</style>