关于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>
 
posted @ 2021-04-09 19:25  小灬和灬尚  阅读(2996)  评论(0编辑  收藏  举报