需求:为表格内的每一行input输入框添加表单验证(每行有多个input框)
效果:
html部分:
<el-form :model="forms" ref="forms" :rules="rules">
<el-table ref="multipleTable"
:data="forms.tableData"
:height="tableHeight"
stripe
style="width: 100%"
:header-cell-style="thStyle"
:cell-style="tdStyle">
<el-table-column prop="ropeSkippingScore" label="跳绳成绩" min-width="115">
<template slot-scope="scope">
<el-form-item :prop="'tableData.'+scope.$index+'.ropeSkippingScore'" :rules="rules.ropeSkippingScore" v-if="scope.row.updated">
<el-input v-model="scope.row.ropeSkippingScore" size="mini" placeholder="跳绳成绩"/>
</el-form-item>
<span v-if="!scope.row.updated">{{scope.row.ropeSkippingScore||'-'}}</span>
</template>
</el-table-column>
<el-table-column prop="ropeSkippingFraction" label="跳绳分数" min-width="115">
<template slot-scope="scope">
<el-form-item :prop="'tableData.'+scope.$index+'.ropeSkippingFraction'" :rules="rules.ropeSkippingFraction" v-if="scope.row.updated">
<el-input v-model="scope.row.ropeSkippingFraction" align='center' size="mini" maxlength="5" placeholder="跳绳分数" @input="changeAllScore(scope.row)"/>
</el-form-item>
<span v-if="!scope.row.updated">{{scope.row.ropeSkippingFraction||'-'}}</span>
</template>
</el-table-column>
<el-table-column prop="chuckBallScore" label="实心球成绩" min-width="115">
<template slot-scope="scope">
<el-form-item :prop="'tableData.'+scope.$index+'.chuckBallScore'" :rules="rules.chuckBallScore" v-if="scope.row.updated">
<el-input v-model="scope.row.chuckBallScore" size="mini" placeholder="实心球成绩"/>
</el-form-item>
<span v-if="!scope.row.updated">{{scope.row.chuckBallScore||'-'}}</span>
</template>
</el-table-column>
<el-table-column prop="chuckBallFraction" label="实心球分数" min-width="115">
<template slot-scope="scope">
<el-form-item :prop="'tableData.'+scope.$index+'.chuckBallFraction'" :rules="rules.chuckBallFraction" v-if="scope.row.updated">
<el-input v-model="scope.row.chuckBallFraction" size="mini" maxlength="5" placeholder="实心球分数" @input="changeAllScore(scope.row)"/>
</el-form-item>
<span v-if="!scope.row.updated">{{scope.row.chuckBallFraction||'-'}}</span>
</template>
</el-table-column>
<el-table-column prop="langRunScore" label="长跑成绩" min-width="115">
<template slot-scope="scope">
<el-form-item :prop="'tableData.'+scope.$index+'.langRunScore'" :rules="rules.langRunScore" v-if="scope.row.updated">
<el-input v-model="scope.row.langRunScore" size="mini" placeholder="长跑成绩"/>
</el-form-item>
<span v-if="!scope.row.updated">{{scope.row.langRunScore||'-'}}</span>
</template>
</el-table-column>
<el-table-column prop="langRunFraction" label="长跑分数" min-width="115">
<template slot-scope="scope">
<el-form-item :prop="'tableData.'+scope.$index+'.langRunFraction'" :rules="rules.langRunFraction" v-if="scope.row.updated">
<el-input v-model="scope.row.langRunFraction" size="mini" maxlength="5" placeholder="长跑分数" @input="changeAllScore(scope.row)"/>
</el-form-item>
<span v-if="!scope.row.updated">{{scope.row.langRunFraction||'-'}}</span>
</template>
</el-table-column>
<el-table-column label="操作" min-width="90" >
<template slot-scope="scope">
<el-button size="mini" @click="updated(scope)">{{scope.row.updated==true?'保存':'修改'}}</el-button>
</template>
</el-table-column>
</el-table>
</el-form>
data部分:
forms:{
tableData: []
},
rules:{ //$rules是我自己封装的,这里rules可以按照elementui规则自己填写
ropeSkippingScore:this.$rules.focusGrade,
ropeSkippingFraction:this.$rules.focusScore,
chuckBallScore:this.$rules.focusGrade,
chuckBallFraction:this.$rules.focusScore,
langRunScore:this.$rules.focusGrade,
langRunFraction:this.$rules.focusScore,
},
注意:
1.这里的el-form要在el-table的外面,且data中el-table的绑定数据tableData是forms对象里的
2.rules和prop要一一对应,比如 :prop="‘tableData.’+scope.$index+’.langRunScore’" 和:rules="rules.langRunScore"里的langRunScore是一致的
现在表格里就为每个input添加了表单验证,但是由于表格里添加了表单元素,原来的布局就会混乱,表格内的input框和同行内容不再对齐。我这里是通过el-table里的:cell-style="tdStyle"来调整含有input框的列的样式
代码:
tdStyle(val){
let col = val.columnIndex==7||val.columnIndex==8||val.columnIndex==9||val.columnIndex==10||val.columnIndex==11||val.columnIndex==12
if(col&&val.row.updated==true){
return "text-align:center;padding-bottom:0px;padding-top:12px"
}
}
然后就是保存后校验所有input框
代码:
updated(scope) { //切换保存、修改按钮
let that = this
let errorMessage = false //判断验证项是否全部成功
if (scope.row.updated) {
let colIndex = ['tableData.'+scope.$index+'.ropeSkippingScore','tableData.'+scope.$index+'.ropeSkippingFraction',
'tableData.'+scope.$index+'.chuckBallScore','tableData.'+scope.$index+'.chuckBallFraction',
'tableData.'+scope.$index+'.langRunScore','tableData.'+scope.$index+'.langRunFraction']
this.$refs['forms'].validateField(colIndex,(valid) => {
if(valid!='') errorMessage = true //有一个验证不成功就不在继续执行
})
if(!errorMessage){ //所有验证项均成功再执行后续代码
that.changeScore(scope.row)
this.$set(scope.row,'updated',false)
}
} else {
that.$set(scope.row, 'updated', true)
}
},