以下.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>
寄语:
人的成熟,是一个从迷茫到自知、从自知到坚定的过程。
在这个过程中,每个人都要慢慢学会扛起自己的责任,学会独自面对生活中的风风雨雨。
所谓成熟,不是年龄长了就叫成熟;而是成长了,能自己去扛事,那才是真正的成熟。