uniapp的动态表单实现

目录

1.说明

2.示例

 3.总结

---

1.说明

①在 formData 中定义个数组变量用来接受同一个字段的多个结果。

dynamicFormData: {
	email: '',
	// domains 字段下会有多个结果
	domains: []
}

②使用 uni-forms-item 的 rules 属性定义单个表单域的校验规则。

	...

③name 需要动态指定，动态表单推荐使用 Array 类型，内容从左到右为绑定值的调用链。['domains',index,'value'] 等同于 dynamicFormData.domains[index].value

	...

④需要绑定值的组件的 v-model 也需要动态指定 dynamicFormData.domains[index].value

2.示例

html层：

js层：

	const resetForm = () => {
		return {
			bsNo: stationInfo.bsNo,
			bsName: stationInfo.deptNm,
			fieldNo: '',
			fieldNm: '',
			cropKey: '',
			cropValue: '',
			mediNm: '',
			mediAcreage: '',
			saKey: '',
			saValue: '',
			mediPerMu: '',
			dosageMediKey: '',
			dosageMediValue: '',
			mediTotalMu: '',
			mediContent: '',
			mediModeKey: '',
			mediModeValue: '',
			participants: '',
			parts: [{ value: getUser().userName, id: Date.now() }],
			workTime: [{ value: [moment.now(), moment.now()], id: Date.now() }],
			timeList: [] as any,
			tempCount: NaN,
			mediType: 6
		}
	};
	// 初始表单数据设置
	let formData = ref(resetForm());

 3.总结

当某个字段为动态时，要用数组来存放多个值；要注意校验规则的写法。

我使用的是包含id及value的对象结构用来存在动态表单的数据。