php做电子商城网站,创业找项目,清远市发布,手工制作大全图片简单应用场景#xff1a; 在form表单内#xff0c;动态生成一个数组类型的一组数据#xff0c;要求对生成的每一组数据内容进行表单验证。例如动态添加人员#xff0c;并对每个人的人员的信息输入框进行表单验证。
解决思路#xff1a; 把rules的验证规则循环写在element ui的…应用场景 在form表单内动态生成一个数组类型的一组数据要求对生成的每一组数据内容进行表单验证。例如动态添加人员并对每个人的人员的信息输入框进行表单验证。
解决思路 把rules的验证规则循环写在element ui的el-form-item的标签上动态绑定prop的值使用index生成不同的prop来进行动态绑定。每次添加一个人员的时候就是增加一个对象push到数组内进行循环表单验证。
代码实现 div v-for(data, index) in formData.dataArray :keyindexel-form-item classcustom-price :propdataArray. index .name :rulesrules.nameel-input v-modeldata.name/el-input/el-form-item/divimport { reactive, toRefs } from vue;const state reactive({formData:{dataArray:[]},rules:{name: [{required: true, message: 此项目为必填项, trigger: change}],}
})const { formData, rules } toRefs(state);
