这篇文章主要介绍了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 + ‘.字段名'”
<div class="TestWorld"> 添加行数baocun 删除 </div>
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' } ] }, { info<div>本文来源gaodai.ma#com搞#代!码网_</div>Id: '1816', clinicCchiCombineName: '星期五', clinicCchiCombineId: '3', serviceCount: '1', cchis: [ { cchiCode: 'CAAJ1000' }, { cchiCode: 'CAAJ1400' } ] } ]
<div class="bill-wrapper"> <p class="title-p">费用调整</p> <section class="pay-section"> <p class="pay-p"> <span class="pay-span">医疗服务操作</span></p><div> <section> <p class="tip-p"> {{ item.clinicCchiCombineName }} <span class="tip-span">（服务数量：{{ item.serviceCount }}）</span></p> </section></div></section><p class="new-p"> <!-- 返回 -->保存</p></div> .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的验证操作的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue element table中自定义一些input的验证操作
转载请注明原文链接：vue element table中自定义一些input的验证操作
