以下.vue文件Demo可直接复制运行:
重点:
1:表格数据定义在form里
2:prop需要加索引;索引前的变量不要加form,直接取里边的key,索引后的字段需要和表格里字段属性对应 。:prop="'tableInfo.list.' + scope.$index + '.name'"
<template>
<el-form ref="form" :model="form">
<el-table :data="form.tableInfo.list" border>
<el-table-column align="center" prop="name" label="姓名">
<template slot-scope="scope">
<el-form-item :prop="'tableInfo.list.' + scope.$index + '.name'" :rules="ruleForm.name">
<el-input v-model="scope.row.name" placeholder="请输入姓名"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column align="center" prop="age" label="年纪">
<template slot-scope="scope">
<el-form-item :prop="'tableInfo.list.' + scope.$index + '.age'" :rules="ruleForm.age">
<el-input-number placeholder="请输入年纪" v-model="scope.row.age" controls-position="right" :min="1"></el-input-number>
</el-form-item>
</template>
</el-table-column>
</el-table>
<el-button @click="handleSubmit()" type="button">提交</el-button>
</el-form>
</template>
<script>
export default {
components: {},
data() {
return {
form:{
tableInfo:{
list:[{
name:"",
age:""
},{
name:"",
age:""
}]
}
},
rules:{},
ruleForm:{
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
],
age: [
{ required: true, message: '请选择年龄', trigger: 'blur' },
],
}
}
},
methods:{
handleSubmit(){
let form = this.form;
this.$refs['form'].validate((valid) => {
if (valid) {
} else {
console.log('error submit!!');
return false;
}
});
}
}
}
</script>
<style>
</style>
寄语:
人的成熟,是一个从迷茫到自知、从自知到坚定的过程。
在这个过程中,每个人都要慢慢学会扛起自己的责任,学会独自面对生活中的风风雨雨。
所谓成熟,不是年龄长了就叫成熟;而是成长了,能自己去扛事,那才是真正的成熟。