当前位置: 首页 > Web前端 > vue.js

element-ui表格嵌套表单实现表单校验

时间:2023-03-31 17:02:44 vue.js

在写表单的时候,可能会遇到这样的需求,即表单嵌套表单,这样表单中的数据就必须进行校验。要实现如下图所示的效果,首先我们需要创建一个窗体,并在窗体中创建一个表格。点击验证2.添加表格和表格元数据首先在数据中添加表格元数据和表格验证。data(){return{formData:{inforData:[{name:'',sex:'male',age:''},{name:'',sex:'male',age:''},{name:'',sex:'Male',age:''},{name:'',sex:'Male',age:''}],inforRules:{name:[{required:true,message:'PleaseEntername'}],sex:[{required:true,message:'Pleaseentergender'}],age:[{required:true,message:'Pleaseenterage'}]}}}},methods:{//clickvalidationrules(){this.$refs.formData.validate(valid=>{if(valid){console.log(true)}else{console.log(false)}})}}然后在模板规则中用于编写表格和表单元数据以及验证点击验证如果本文对您有帮助,请点赞、评论+收藏