重庆网站seo公司哪家好,网站建设人文类,北京中国建设银行招聘信息网站,新闻发布会新闻通稿最近有个新的业务、主要涉及多层级的动态表单提交#xff0c;其中又涉及很多类型#xff0c;踩了很多坑之后#xff0c;终于研发完毕。
传来的数据格式处理
传来的数据格式涉及比较多的内容#xff0c;以下举例一个#xff0c;涉及到规则的填写 规则写法有两种#xff…最近有个新的业务、主要涉及多层级的动态表单提交其中又涉及很多类型踩了很多坑之后终于研发完毕。
传来的数据格式处理
传来的数据格式涉及比较多的内容以下举例一个涉及到规则的填写 规则写法有两种一种是直接在表单里添加规则一种是在字段中添加规则
表单里规则添加以下是第一级的写法
我这里字段的定义是因为有其他数据要一并提交可按照自己需求来 1、字段里label-width我设定的是300是因为会有比较长的字段。根据返回文本自行调节 2、name字段主要是为了寻找key值这个必填 dynamicLists为数组,index为数组下标位置value uni-forms refdynamicForm :modelValuedynamicFormData label-positiontop label-width300pxview v-for(item, index) in dynamicFormData.dynamicLists :keyitem.inspectionItemIduni-forms-item :labelindex1.ide1、ite.itemName label-width100%:rules[{required: true,errorMessage: 请填写}]:name[dynamicLists,index,value] requireduni-data-checkbox v-modeldynamicFormData.dynamicLists[index].value:localdataite.itemValueList / /uni-forms-item/view
/uni-forms
script
export default {data(){return{dynamicFormData:{dynamicLists:[],}}}
}
/script第二种规则里填写
首先要对数据处理 在数据里添加rules规则
rules: [{required: true,errorMessage: 请填写 this.detail[i].itemName//这里写你想校验的内容}],
this.detail是我从后台返回的数据其中内容做了处理。按照自己的值编辑
this.dynamicFormData.dynamicLists.push({label: this.detail[i].itemName,value: ,itemType: this.detail[i].itemType,rules: [{required: true,errorMessage: 请填写 this.detail[i].itemName}], inspectionId: this.detail[i].inspectionId, itemValueList: itemValueList,children: children,includeImage: this.detail[i].includeImage,
})uni-forms-item :labelindex1.ide1、ite.itemName label-width100%:rulesitem.rules:name[dynamicLists,index,value] requireduni-data-checkbox v-modeldynamicFormData.dynamicLists[index].value:localdataite.itemValueList / /uni-forms-item子级的表单编写
子级的表单与父级一致主要添加了以下字段
父级表单提交 uni-forms-item :labelindex1.ide1、ite.itemName label-width100%:rules[{required: true,errorMessage: 请填写}]:name[dynamicLists,index,value] requireduni-data-checkbox v-modeldynamicFormData.dynamicLists[index].value:localdataite.itemValueList / /uni-forms-item子级表单填写就是在父级字段加了childrenide
uni-forms-item :labelindex1.ide1、ite.itemName required:rulesite.rules:name[dynamicLists,index,children,ide,value]uni-easyinput classeasyinput trimall :autoHeighttrue maxlength500typetextareav-modeldynamicFormData.dynamicLists[index].children[ide].valueplaceholder请输入内容 /
/uni-forms-item编辑完毕 图例1、验证不通过未填写 图例2、填写数据、校验规则消失
