表格中的表单验证,就是在将表格放在表单中,将表格绑定的数据也放在表单中。
最重要的是要给表格中需要验证的字段动态添加prop,再给其绑定规则。
<el-form :model="tableForm" ref="tableForm">
<el-table
class="bankTable"
:data="tableForm.bankData"
border
style="width: 100%;margin:20px 0;"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="BANKA" label="开户行名称" width='250' show-overflow-tooltip></el-table-column>
<el-table-column label="银行所在省">
<template slot-scope="scope">
<el-form-item :prop="`bankData.${scope.$index}.KHHSF`" :rules="tableRules.KHHSF">
<el-input v-model="scope.row.KHHSF" :disabled="scope.row.search"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="KHHDS" label="银行所在市">
<template slot-scope="scope">
<el-form-item :prop="`bankData.${scope.$index}.KHHDS`" :rules="tableRules.KHHDS">
<el-input v-model="scope.row.KHHDS" :disabled="scope.row.search"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="BANKN" label="银行账号">
<template slot-scope="scope">
<el-form-item>
<el-input v-model="scope.row.BANKN" :disabled="scope.row.search"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="KOINH" label="户主">
</el-table-column>
</el-table>
</el-form>
data() {
return {
tableForm:{
bankData:[
{
BANKA:'',
KHHSF:'',
KHHDS:'',
BANKN:'',
KOINH:'',
}
],
},
tableRules:{
//银行所在省
KHHSF:[
{ required: true, message: '请输入银行所在省'},
{ max: 20, message: '长度在20个字符以内',}
],
//银行所在市
KHHDS:[
{ required: true, message: '请输入银行所在省'},
{ max: 20, message: '长度在20个字符以内'}
]
},
}
}