element-ui表格嵌套表单实现表单校验

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

下面来实现这种效果

首先我们要先创建一个表单并且在表单里创建一个表格。

 <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>

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