官网原话
Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
表单
el-form表单必备以下三个属性:
:model="ruleForm" 绑定的数据内容
:rules="rules" 动态绑定的rules,表单验证规则
ref="ruleForm" 绑定的对象
template模块
其实问题关键就在于如何给el-form-item动态绑定prop
:prop="'tableData.' + scope.$index + '.字段名'"
添加行数 baocun 删除
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' } ] } ]
费用调整
医疗服务操作
{{ item.clinicCchiCombineName }} (服务数量:{{ item.serviceCount }})
保存
之前一直是数组结合table 一层的校验,琢磨了很久才终于领悟 element-ui 的 form表单校验的精髓所在,
那就是 :prop 一定是遍历的数组'cchiCombineBill.' 加上(cchiCombineBill,index)中 的index,再加上具体要校验的字段。
以上这篇vue element table中自定义一些input的验证操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。