vue element table中自定义一些input的验证操作

官网原话

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

表单

el-form表单必备以下三个属性：

:model="ruleForm" 绑定的数据内容

:rules="rules" 动态绑定的rules，表单验证规则

ref="ruleForm" 绑定的对象

template模块

其实问题关键就在于如何给el-form-item动态绑定prop

:prop="'tableData.' + scope.$index + '.字段名'"

vuejs 代码

export default {
 name:'TestWorld',
 data() {
  return {
    formdata:{
     rules:{
     name:{ 
type:"string",
required:true,
message:"必填字段",
trigger:"blur"
},
     volume1:{ 
 type:"number",
 required:true,
 message:"册数必须为数字值",
 trigger:"change"
},
     data1:{ 
type:"date",
required:true,
message:"请选择日期",
trigger:"change"
}
     },
     tabledata:[{
     bookname: '',
     bookbuytime: '',
     bookbuyer: '',
     bookborrower: '',
     bookvolume:''
     }]
    }
  }
 },
 methods:{
  addLine(){ //添加行数
   var newValue = {
     bookname: '',
     bookbuytime: '',
     bookbuyer: '',
     bookborrower: '',
     bookvolume:''
    };
   //添加新的行数
   this.formData.tableData.push(newValue);
  },
  handleDelete(index){ //删除行数
   this.formData.tableData.splice(index, 1)
  },
  save(formName){ //保存
   this.$refs[formName].validate((valid,model) => {
    console.log(valid)
    console.log(JSON.stringify(model))
   if (valid) {
    alert('submit!');
   } else {
    console.log('error submit!!');
    return false;
   }
 
   });
  },
  handleDelete(index){ //删除行数
   console.log(index)
   this.formData.tableData.splice(index, 1)
  }
 }
 
}

补充知识：element-ui 跟form 和table 动态表单校验，数组的深层次校验

首先数据结构是这样的

 let cchiCombineBill = [
   {
    infoId: '1716',
    clinicCchiCombineName: '星期四',
    clinicCchiCombineId: '3',
    serviceCount: '1',
    cchis: [
     {
      cchiCode: 'CAAJ1000'
     },
     {
      cchiCode: 'CAAJ1400'
     }
    ]
   },
   {
    infoId: '1816',
    clinicCchiCombineName: '星期五',
    clinicCchiCombineId: '3',
    serviceCount: '1',
    cchis: [
     {
      cchiCode: 'CAAJ1000'
     },
     {
      cchiCode: 'CAAJ1400'
     }
    ]
   }
  ]

.bill-wrapper {
 min-width: 1110px;
 margin: 0 auto;
 padding: 20px;
 /deep/ .el-divider--horizontal {
  margin-top: 8px;
 }
 // /deep/ .el-form-item {
 //  margin-bottom: 30px;
 // }
 .return-p {
  margin-bottom: 20px;
 }
 .new-p {
  margin-top: 40px;
  text-align: center;
  .btn:first-child {
   margin-right: 30px;
  }
 }
 .pay-section {
  margin-top: 50px;
  .pay-p {
   padding-left: 10px;
   // border: 1px solid #e8e8e8;
   height: 30px;
   line-height: 30px;
   font-size: 14px;
   margin-top: 20px;
   background: #409eff;
   color: white;
  }
 }
 .sub-title {
  color: #444;
  margin-top: 30px;
 }
 .tip-p {
  margin-top: 15px;
  color: #409eff;
  font-size: 14px;
  margin-bottom: 5px;
  .tip-span {
   font-size: 12;
  }
 }
}

之前一直是数组结合table 一层的校验，琢磨了很久才终于领悟 element-ui 的 form表单校验的精髓所在，

那就是 :prop 一定是遍历的数组'cchiCombineBill.' 加上（cchiCombineBill，index）中 的index，再加上具体要校验的字段。

以上这篇vue element table中自定义一些input的验证操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。