应用场景：
在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交，同时又需要对table的字段进行校验，效果如图所示：
这个校验中，最关键的问题在于如何给el-form-item 动态绑定prop。
:prop=”‘tableData.’ + scope.$index + ‘.字段名'”
方法一：
<template>
<div class="app-container">
<el-form :model="fromData" ref="from">
<el-table :data="fromData.domains">
<el-table-column label="姓名">
<template slot-scope="scope">
<el-form-item :prop="'domains.'+scope.$index+'.name'" :rules="fromaDataRules.name">
<el-input v-model="scope.row.name"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="地址">
<template slot-scope="scope">
<el-form-item :prop="'domains.'+scope.$index+'.desc'" :rules="fromaDataRules.desc">
<el-input v-model="scope.row.desc"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
<el-button type="warning" @click="submit('from')">submit</el-button>
</div>
</template>
<script>
export default {
data() {
return {
fromData:{
domains:undefined
},
fromaDataRules:{
name:[{ required: true, message: '请输入', trigger: 'blur' }],
desc:[ { required: true, message: '请填写', trigger: 'blur' }]
},
domains:[],
}
},
mounted(){
this.initDomains()
},
methods:{
initDomains(){
this.domains=[
{
name: "小红",
desc: "11123"
},
{
name: "小红",
desc: "11123"
}
]
},
init(){
this.$set(this.fromData,'domains',this.domains)
},
submit(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
}
</script>
上述代码中比较关键的部分有一下两点：
1、:prop=”‘domains.’+scope.$index+’.name'” ，用于动态绑定prop到el-form-item；
2、this.$set(this.fromData,‘domains’,this.domains) ，用于为fromData设置domains这个节点。
方法二：
<template>
<div class="app-container">
<el-form :model="fromData" ref="from">
<el-table :data="fromData.domains">
<el-table-column label="姓名">
<template slot-scope="scope">
<el-form-item :prop="'domains.'+scope.$index+'.name'" :rules="fromData.fromaDataRules.name">
<el-input v-model="scope.row.name"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="地址">
<template slot-scope="scope">
<el-form-item :prop="'domains.'+scope.$index+'.desc'" :rules="fromData.fromaDataRules.desc">
<el-input v-model="scope.row.desc"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
<el-button type="warning" @click="submit('from')">submit</el-button>
</div>
</template>
<script>
export default {
data() {
return {
fromData:{
fromaDataRules:{
name:[{ required: true, message: '请输入', trigger: 'blur' }],
desc:[ { required: true, message: '请填写', trigger: 'blur' }]
},
domains:[],
},
}
},
mounted(){
this.initDomains()
},
methods:{
initDomains(){
this.fromData.domains=[
{
name: <div style="color:transparent">本文来源gaodai.ma#com搞##代!^码@网*</div>"小红",
desc: "11123"
},
{
name: "小红",
desc: "11123"
}
]
},
init(){
},
submit(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
}
</script>
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：使用element-ui +Vue 解决 table 里包含表单验证的问题
转载请注明原文链接：使用element-ui +Vue 解决 table 里包含表单验证的问题
