关于javascript:elementui表格嵌套表单实现表单校验

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

上面来实现这种成果

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>

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