uniapp多级动态表单规则

news2024/11/22 14:36:13

最近有个新的业务、主要涉及多层级的动态表单提交，其中又涉及很多类型，踩了很多坑之后，终于研发完毕。

传来的数据格式处理

传来的数据格式涉及比较多的内容，以下举例一个，涉及到规则的填写
规则写法有两种，一种是直接在表单里添加规则，一种是在字段中添加规则

表单里规则添加，以下是第一级的写法

我这里字段的定义是因为有其他数据要一并提交，可按照自己需求来
1、字段里label-width我设定的是300，是因为会有比较长的字段。根据返回文本，自行调节
2、：name字段主要是为了寻找key值，这个必填，
dynamicLists为数组,index为数组下标位置，value


<uni-forms ref="dynamicForm" :modelValue="dynamicFormData" label-position="top" label-width="300px">
    <view v-for="(item, index) in dynamicFormData.dynamicLists" :key="item.inspectionItemId">
      <uni-forms-item :label="index+1+'.'+ide+1+'、'+ite.itemName"  label-width="100%"
		:rules="[{required: true,errorMessage: '请填写'}]"
		:name="['dynamicLists',index,'value']" required>
		<uni-data-checkbox  v-model="dynamicFormData.dynamicLists[index].value"
         :localdata="ite.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 :label="index+1+'.'+ide+1+'、'+ite.itemName"  label-width="100%"
		:rules="item.rules"
		:name="['dynamicLists',index,'value']" required>
		<uni-data-checkbox  v-model="dynamicFormData.dynamicLists[index].value"
         :localdata="ite.itemValueList" />										
	   </uni-forms-item>

子级的表单编写

子级的表单与父级一致，主要添加了以下字段

父级表单提交

 <uni-forms-item :label="index+1+'.'+ide+1+'、'+ite.itemName"  label-width="100%"
		:rules="[{required: true,errorMessage: '请填写'}]"
		:name="['dynamicLists',index,'value']" required>
		<uni-data-checkbox  v-model="dynamicFormData.dynamicLists[index].value"
         :localdata="ite.itemValueList" />										
	   </uni-forms-item>

子级表单填写就是在父级字段加了children，ide

<uni-forms-item :label="index+1+'.'+ide+1+'、'+ite.itemName" required
		:rules="ite.rules"
		:name="['dynamicLists',index,'children',ide,'value']">
	<uni-easyinput class="easyinput" trim="all" :autoHeight="true" 
       maxlength="500"type="textarea"
	   v-model="dynamicFormData.dynamicLists[index].children[ide].value"
		placeholder="请输入内容" />
</uni-forms-item>