在写表格的时候，可能会遇到这样的需要表格嵌套表单，使表格中的数据都要进行校验。如下图

上面来实现这种成果

  1. 首先咱们要先创立一个表单并且在表单里创立一个表格。
 <el-form label-width="auto">  <el-table  tooltip-effect="dark"  size="small"  >   <el-table-column label="名称">   </el-table-column>   <el-table-column label="性别">   </el-table-column>   <el-table-column label="年龄">   </el-table-column>  </el-table> </el-form> <el-button>点击校验</el-button>

2.增加表格和表格的元数据
首先在data中增加表格的元数据与表单校验。

data() { return {  formData: {   inforData: [   {    name: '',    sex: '男',    age: ''   },   {    name: '',    sex: '男',    age: ''   },   {    name: '',    sex: '男',    age: ''   },   {    name: '',    sex: '男',    age: ''   }  ], inforRules: {   name: [{ required: true, message: '请输出姓名' }],   sex: [{ required: true, message: '请输出性别' }],   age: [{ required: true, message: '请输出年龄' }]    }   }  } }, methods: { //点击校验  rules() {   this.$refs.formData.validate(valid=> {     if(valid) {      console.log(true)     }else {      console.log(false)    }   })  } }

而后在模板中写入表格与表单的元数据与校验的格局

 <el-form :model="formData" ref="formData" label-width="auto">  <el-table  :data="formData.inforData"  tooltip-effect="dark"  size="small"  >    <el-table-column label="名称">    <template slot-scope="scope">    <el-form-item    :prop="'inforData.'+scope.$index+'.name'"    :rules="formData.inforRules.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="'inforData.'+scope.$index+'.sex'"    :rules="formData.inforRules.sex"    >    <el-input v-model="scope.row.sex"></el-input>    </el-form-item>    </template>    </el-table-column>    <el-table-column label="年龄">    <template slot-scope="scope">    <el-form-item    :prop="'inforData.'+scope.$index+'.age'"    :rules="formData.inforRules.age"    >    <el-input v-model="scope.row.age"></el-input>    </el-form-item>    </template>    </el-table-column>  </el-table> </el-form> <el-button @click="rules">点击校验</el-button>

如果本篇文章帮到了你，欢送点赞评论 + 珍藏。