关于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>