element-ui +Vue 解决 table 里包含表单验证

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

这个校验中,最关键的问题在于如何给el-form-item 动态绑定prop。
:prop="'tableData.' + scope.$index + '.字段名'"

方法一:

<template>
 <div class="app-container"> 
     <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>
 
 </div>
</template> 
<script>
  export default {
    data() {
      return { 
        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: "小红",
            desc: "11123"
          },
          {
             name: "小红",
            desc: "11123"
          }
        ]
      },
      init(){ 
        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这个节点。

方法二:

<template>
 <div class="app-container">
  
     <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="fromData.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="fromData.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> 
 </div>
</template> 
<script>
  export default {
    data() {
      return {
       
        fromData:{
	         fromaDataRules:{
	          name:[{ required: true, message: '请输入', trigger: 'blur' }],
	          desc:[ { required: true, message: '请填写', trigger: 'blur' }]
	        },
          domains:[],
        }, 
      }
    },
    mounted(){
      this.initDomains()
    },
    methods:{
      initDomains(){
        this.fromData.domains=[
          {
            name: "小红",
            desc: "11123"
          },
          {
            name: "小红",
            desc: "11123"
          }
        ]
      },
      init(){ 
      },
      submit(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script> 

参考文章:https://blog.csdn.net/xiaojun081004/article/details/82988549
参考文章:https://www.cnblogs.com/Kummy/p/9470393.html

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值