网站seoapp,网站开发实训小结,衡水做wap网站建设,临沂网站建设技术托管针对el-form的数据源是对象嵌套对象#xff0c;在进行数据绑定和校验时和单层的对象有一点区别#xff0c; 具体是下面两部分#xff1a; 数据源#xff1a;
fromData: {name: ,health: {height: }
}1、 给 el-form-item 的 prop设为#xff1a;prophealth.height在进行数据绑定和校验时和单层的对象有一点区别 具体是下面两部分 数据源
fromData: {name: ,health: {height: }
}1、 给 el-form-item 的 prop设为prophealth.height 。 v-model 设为: v-modelfromData.health.height el-form-item label身高 prophealth.heightel-input v-modelfromData.health.height clearable //el-form-item2、校验规则rules对象对应的key设置为数据源内部的值: health.height
rules: {health.height: [{ required: true, message: 请输入身高, trigger: blur }]
}具体代码
templatedivel-form reffromRef :modelfromData :rulesrulesel-form-item label姓名 propnameel-input v-modelfromData.name clearable //el-form-itemel-form-item label身高 prophealth.heightel-input v-modelfromData.health.height clearable //el-form-item/el-formel-button clickonSubmit()提交/el-button/div
/templatescript
export default {data() {return {fromData: {name: ,health: {height: }},rules: {name: [{ required: true, message: 请输入姓名, trigger: blur }],health.height: [{ required: true, message: 请输入身高, trigger: blur }]}}},methods: {onSubmit() {this.$refs[fromRef].validate((valid) {if (valid) {console.log(校验通过)console.log(fromData, JSON.stringify(this.fromData))}})}}
}
/scriptstyle scoped/style
