转Vue中对From表单中的Table表格中的输入项进行验证

在实际使用中经常会遇到需要在 From 表单中使用 table 表格进行表单提交，同时又需要对 From 表单中的字段进行校验，效果如图所示：

这个校验中，最关键的问题在于如何给 el-form-item 动态绑定 prop。
好了，话不多说直接上代码 (html)

<template>
 <div class="app-container">
   <div class="filter-container">
     <el-button type="primary" @click="init()" icon="el-icon-circle-plus">add</el-button>
   </div>
   <el-dialog title="表单 Table" :visible.sync="dialogFormVisible">
     <el-form :model="fromData" ref="from">
       <el-table :data="fromData.domains">
         <el-table-column label="姓名">
           <template slot-scope="scope">
             <el-form-item :prop="'domains.'+scope.$index+'.name'" :rules="fromaDataRules.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="'domains.'+scope.$index+'.desc'" :rules="fromaDataRules.desc">
               <el-input v-model="scope.row.desc"></el-input>
             </el-form-item>
           </template>
         </el-table-column>
       </el-table>
     </el-form>
     <el-button type="warning" @click="submit('from')">submit</el-button>
   </el-dialog>
 </div>
</template>

js 代码如下：

<script>
  export default {data() {
      return {
        dialogFormVisible:false,
        fromData:{domains:undefined},
        fromaDataRules:{name:[{ required: true, message: '请输入活动名称', trigger: 'blur'}],
          desc:[{ required: true, message: '请填写活动形式', trigger: 'blur'}]
        },
        domains:[],}
    },
    mounted(){this.initDomains()
    },
    methods:{initDomains(){
        this.domains=[
          {
            name: undefined,
            desc: undefined
          },
          {
            name:undefined,
            desc:undefined
          }
        ]
      },
      init(){
        this.dialogFormVisible = true
        this.$set(this.fromData,'domains',this.domains)
      },
      submit(formName){this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');
          } else {console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>

上述代码中比较关键的部分有一下两点：

1、:prop=”‘domains.’+scope.$index+’.name’”，用于动态绑定 prop 到 el-form-item；
2、this.$set(this.fromData,‘domains’,this.domains)，用于为 fromData 设置 domains 这个节点。
————————————————
版权声明：本文为 CSDN 博主「running horse」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xiaojun…