惠州品牌网站建设,dede 子网站,网站建好了怎么做,天眼查企业查询入口官网在开发中遇到了这样一个需求 有一个form是通过v-for生成出来的#xff0c;并且数量不确定#xff0c;每个表单中的字段都需要做校验#xff0c;就将自己的解决方法记录了下来。 完整代码如下
templatediv classfor-formel-button type并且数量不确定每个表单中的字段都需要做校验就将自己的解决方法记录了下来。 完整代码如下
templatediv classfor-formel-button typeprimary clickaddHandle新 增/el-buttondiv classform-boxdiv classform-item v-for(item, index) in formList :keyindexel-form :modelitem :rulesrules label-widthauto stylemax-width: 300px label-positiontop:ref($event) handle($event, index)el-form-item label名称 propnameel-input v-modelitem.name placeholder请输入名称 //el-form-itemel-form-item label手机号 propphoneel-input v-modelitem.phone placeholder请输入手机号 //el-form-itemel-form-item label性别 propsexel-radio-group v-modelitem.sexel-radio :value1 sizesmall男/el-radioel-radio :value2 sizesmall女/el-radio/el-radio-group/el-form-itemel-form-item label爱好 prophobby v-ifitem.sex 2el-input v-modelitem.hobby placeholder请输入爱好 //el-form-item/el-form/div/divel-button typeprimary clicksaveHandle保 存/el-button/div
/templatescript setup langts
import { reactive, toRefs } from vueconst state reactive({form: {} as any,formList: [] as any,rules: {name: [{ required: true, message: Please input Activity name, trigger: blur },],},formRefs: [] as any
})const { formList, rules } toRefs(state)function addHandle() {state.formList.push({name: ,phone: ,sex: 1,hobby: ,})
}function handle(e: any, index: any) {// 保存下每个refstate.formRefs[index] e
}async function saveHandle() {let isSubmit: boolean[] []// 循环上面记录下来的ref对每个进行校验for (const el of state.formRefs) {await el.validate((valid: any) {// 每个 ref 校验成功或者失败都以布尔值存储下来if (valid) {isSubmit.push(true)} else {isSubmit.push(false)}})}// 只有当 isSubmit 存的值全是 true 时表示每个表单都校验成功了// 然后就可以提交了let has isSubmit.every(i i true)if (has) {console.log(可以提交)}console.log(state.formRefs)console.log(isSubmit)
}/scriptstyle scoped langscss
.form-box {display: flex;align-items: flex-start;.form-item {margin-right: 20px;}
}
/style
