网站编辑面试,深圳有多少网站建设公司,软件开发基础教程,盛盾科技网站建设这里记录一下#xff0c;写项目时遇到的一个问题#xff1a;就是动态渲染的表单项#xff0c;加验证规则后一直不通过#xff01;#xff01;#xff01; 原代码
html部分#xff1a; el-form-itemv-for(teaclass,index) in addFom.classIds:label写项目时遇到的一个问题就是动态渲染的表单项加验证规则后一直不通过 原代码
html部分 el-form-itemv-for(teaclass,index) in addFom.classIds:label班级${index1}propclassIdel-row :gutter12el-col :span12el-select v-modelteaclass.classId placeholder请选择el-optionv-for(item) in filterOptions[index]:labelitem.className:valueitem.classId:keyitem.classId//el-select/el-colel-col :span5el-button typedanger iconel-icon-delete circle clickremoveClassId(index)//el-col/el-row/el-form-itemel-form-itemel-button typesuccess clicksubmitTake(ruleForm)提交/el-buttonel-button clickaddClassId :disableddisabled添加班级/el-button/el-form-item js部分 return {tableData: [],teaName: ,page: 1,total: 0,pageSize: 12,classData: [],show: false,dra: false,direction: rtl,addFom: {teaName: ,teaSex: true,teaType: true,teaPhone: ,seniority: 0,classIds: [{}]},classAll: [],disabled: false,rules: {teaName: [{ required: true, message: 请输入教师名称, trigger: blur }],teaSex: [{ required: true, message: 请选择性别, trigger: blur }],teaType: [{ required: true, message: 请选择类型, trigger: blur }],teaPhone: [{ required: true, message: 请输入联系电话, trigger: blur },{ min: 11, max: 11, message: 请输入长度11位的大陆号码, trigger: blur }],seniority: [{ required: true, message: 请输入教龄, trigger: blur }],classId: [{ required: true, message: 请选择班级, trigger: change }]}}
结果 可以看到按照官网的写法动态渲染的表单项是无法进行校验验证的。这里就是无论选中没选中值都校验不通过。 解决 修改prop、rules el-form-itemv-for(teaclass,index) in addFom.classIds:label班级${index1}:propclassIds. index .classId:rulesrules.NotEmptyel-row :gutter12el-col :span12el-select v-modelteaclass.classId placeholder请选择el-optionv-for(item) in filterOptions[index]:labelitem.className:valueitem.classId:keyitem.classId//el-select/el-colel-col :span5el-button typedanger iconel-icon-delete circle clickremoveClassId(index)//el-col/el-row/el-form-item rules: {teaName: [{ required: true, message: 请输入教师名称, trigger: blur }],teaSex: [{ required: true, message: 请选择性别, trigger: blur }],teaType: [{ required: true, message: 请选择类型, trigger: blur }],teaPhone: [{ required: true, message: 请输入联系电话, trigger: blur },{ min: 11, max: 11, message: 请输入长度11位的大陆号码, trigger: blur }],seniority: [{ required: true, message: 请输入教龄, trigger: blur }],NotEmpty: [{ required: true, message: 请选择班级, trigger: change }]}
结果
