图书电子商务网站建设,wordpress底部友情链接,网站用什么服务器,网页建站价格一般很大的表单都会被拆解开#xff0c;校验#xff0c;#xff0c;不会写在一个页面#xff0c;#xff0c;就会有多个 el-form #xff0c;#xff0c;主页要集合所有el-form的数据#xff0c;#xff0c;所以有一个map来接收#xff0c;传送表单数据#xff0c;校验不会写在一个页面就会有多个 el-form 主页要集合所有el-form的数据所以有一个map来接收传送表单数据map的key就是 表单的ref这样就可以通过遍历map的key来循环校验 el-form 子表单的校验结果返回 boolean值使用 every() 每一个都满足返回true表示校验通过 通过之后将子表单的 数据都集中在 formDataMap中 子表单的 :data 绑定相同的值 formData通过遍历 map的key 点上相同的 formData属性就能统一获取子表单的值 代码
template
divwaterkid :waterkidformDataMap.waterkid refwaterkid/waterkidhrcc :ccformDataMap.cc refcc/cchrel-button clickhandleSubmit submit /el-buttonel-button clickhandleClickbtn/el-button
/div
/templatescript
import {myMixin} from /views/cc/card/mixin;
import share from /views/cc/card/share;
import waterkid from /views/cc/card/component/waterkid;
import cc from /views/cc/card/component/cc;
export default {components:{waterkid,cc},mixins:[myMixin,share],name: index,created() {console.log(index created)this.sharedMethod()console.log(this.msg)},data(){return{formDataMap:{waterkid:{username:waterkid},cc:{username:cc,address:}},componentRefs:{}}},mounted() {// this.componentRefs.waterkid this.$refs.waterkid// this.componentRefs.cc this.$refs.cc},methods:{handleClick(){this.$refs[waterkid].submitForm()},handleSubmit(){var keys Object.keys(this.formDataMap);let validateArr keys.map(item{return this.$refs[item].submitForm()})console.log(validateArr,777)let validate validateArr.every(item{return item})console.log(validate,validate)if (validate){// 验证成功keys.forEach(item{this.formDataMap[item] this.$refs[item].formDataconsole.log(this.$refs[item].formData,666)})console.log(obj,this.formDataMap)}}}
}
/scriptstyle scoped/style
子表单
template
el-formrefwaterkid:modelformData:rulesrules
el-form-item labelusername propusernameel-input v-modelformData.username/el-input/el-form-itemel-form-itemel-button typeprimary clicksubmitForm(ruleForm)立即创建/el-buttonel-button clickresetForm(ruleForm)重置/el-button/el-form-item/el-form
/templatescript
export default {name: waterkid,props:[waterkid],data(){return{rules:{username:[{required:true,message:please input your username,trigger:blur}]},formData:{username:}}},created() {console.log(this.waterkid,111)this.formData this.waterkid},watch:{waterkid:function (val){if (val){this.formData val}}},methods:{test(){console.log(test)},submitForm(){let result falsethis.$refs[waterkid].validate((valid){if (valid){console.log(waterkid submit)result true}else{console.log(error ...)return false}})return result}}
}
/scriptstyle scoped/style
template
el-formrefcc:modelformData:rulesrules:inlinetrue
el-form-item labelusername propusernameel-input v-modelformData.username/el-input/el-form-itemel-form-item labeladdress propaddressel-input v-modelformData.address/el-input/el-form-itemel-form-itemel-button typeprimary clicksubmitForm(ruleForm)立即创建/el-buttonel-button clickresetForm(ruleForm)重置/el-button/el-form-item/el-form
/templatescript
export default {name: cc,props:[cc],data(){return{rules:{username:[{required:true,message:please input your username,trigger:blur}],address:[{required:true,message:please input your address,trigger:blur}]},formData:{username:,address:}}},created() {this.formData this.cc},watch:{cc:function (val){if (val){this.formData val}}},methods:{test(){console.log(test)},submitForm(){let result falsethis.$refs[cc].validate((valid)valid (result true))return result}}
}
/scriptstyle scoped/style
