uniapp的动态表单实现

目录

1.说明

2.示例

3.总结


1.说明

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

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

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

复制代码
<uni-forms-item :label="item.label+' '+index" required
	:rules="[{'required': true,errorMessage: '域名项必填'}]" :key="item.id">
	...
</uni-forms-item>

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

复制代码
<uni-forms-item 
	required
	:label="item.label+' '+index" 
	:name="['domains',index,'value']"
	:rules="[{'required': true,errorMessage: '域名项必填'}]" 
	:key="item.id"
	>
	...
</uni-forms-item>

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

复制代码
<uni-forms-item 
	required
	:label="item.label+' '+index" 
	:name="['domains',index,'value']"
	:rules="[{'required': true,errorMessage: '域名项必填'}]" 
	:key="item.id"
	>
	<uni-easyinput v-model="dynamicFormData.domains[index].value" placeholder="请输入域名" />
</uni-forms-item>

2.示例

html层:

复制代码
			<div v-for="(item,index) in formData.parts">
				<uni-forms-item class="is-direction-top" :label="index == 0?'参与人':''" :required="index == 0"
					:rules="[{'required': true,errorMessage: '请输入参与人'}]" :key="item.id" :name="['parts',index,'value']">
					<template v-slot:label v-if="index > 0">
						<div></div>
					</template>
					<view class="dmc">
						<uni-easyinput v-model="formData.parts[index].value" placeholder="请输入参与人" />
						<uni-icons class="dmc-btn" v-if="!index" @click="addParts" size="30" type="plus"
							color="#666"></uni-icons>
						<uni-icons class="dmc-btn" v-if="index" @click="delParts(index)" size="30" type="minus"
							color="#e43d33"></uni-icons>
					</view>
				</uni-forms-item>
			</div>
			<div v-for="(item,index) in formData.workTime">
				<uni-forms-item class="is-direction-top" :label="index == 0?'工作时间':''" :required="index == 0"
					:rules="[{'required': true,errorMessage: '请输入工作时间'}]" :key="item.id"
					:name="['workTime',index,'value']">
					<template v-slot:label v-if="index > 0">
						<div></div>
					</template>
					<view class="dmc">
						<uni-datetime-picker type="datetimerange" v-model="formData.workTime[index].value" hide-second :clear-icon="false"
							placeholder="请输入工作时间"  />
						<uni-icons class="dmc-btn" v-if="!index" @click="addWorkTime" size="30" type="plus"
							color="#666"></uni-icons>
						<uni-icons class="dmc-btn" v-if="index" @click="delWorkTime(index)" size="30" type="minus"
							color="#e43d33"></uni-icons>
					</view>
				</uni-forms-item>
			</div>

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的对象结构用来存在动态表单的数据。

相关推荐
小徐_23332 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮3 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw53 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !3 天前
uni-app中v-if使用”异常”
前端·uni-app
2501_915918413 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张3 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
00后程序员张3 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬3 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106323 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
xkxnq3 天前
Uniapp崩溃监控体系构建:内存泄漏三维定位法(堆栈/资源/线程)
uni-app