uniapp如何添加多个表单数组？

秃头馒头

已于 2024-01-30 09:38:58 修改

阅读量1.6k

点赞数 20

文章标签： uni-app

于 2024-01-29 17:59:50 首次发布

本文链接：https://blog.csdn.net/weixin_54721820/article/details/135916726

版权

一、实现思路

1.在 data 中定义一个数组，用于存储表单项的数据

2.在模板中使用 v-for 指令渲染表单项

3.在 methods 中定义添加和删除表单项的方法

每点击一次 “添加表单项” 按钮，就会新增一个表单项

并且你可以通过输入框的 v-model 来动态修改表单项的值。点击对应的 “删除” 按钮可以移除对应的表单项。

二、实现步骤

①view部分展示

<view style="background-color: #e5e5e5;padding: 32rpx;">
			<view class="publish-top-two" style="margin: 32rpx; ">
				<template v-for="(item,index) in exigencyList">
					<view class="publish-top" style="position: relative; padding: 32rpx;" :key="index">
						<view class="upload-title">紧急联系人{{ item.num }}</view>
						<view class="person-item">
							<view class="flex">
								<view class="asterisk">*</view>
								<view class="item-left">姓名</view>
							</view>
							<u-input v-model="item.name" border="none" placeholder="请输入姓名"
								placeholderStyle="color: #999"></u-input>
						</view>
						<view class="person-item">
							<view class="flex">
								<view class="asterisk">*</view>
								<view class="item-left">手机号</view>
							</view>
							<u-input v-model="item.telephone" border="none" placeholder="请输入手机号"
								placeholderStyle="color: #999"></u-input>
						</view>
						<view class="person-item">
							<view class="flex">
								<view class="asterisk">*</view>
								<view class="item-left">关系</view>
							</view>
							<u-input v-model="item.relation" border="none" placeholder="请输入关系"
								placeholderStyle="color: #999"></u-input>
						</view>
						<view style="position: absolute;top: -5px;left: -5px;width: 40rpx;height: 40rpx;"
							v-if="index != 0" @click.stop="reduceGoods(index)">
							<!-- 								<u-icon name="minus-circle" color="Error" size="22"></u-icon> -->
							<image style="width: 100%;height: 100%;"
								src="../../pagesLeave/static/information/reduce.png" mode="aspectFill"></image>
						</view>
					</view>
				</template>
			</view>
			<view class="addexigencybth" @click="getadd">添加联系人</view>
		</view>

②JavaScript 内容

<script>
	export default {
		data() {
			return {
				exigencyList: [{
						num: '1',
						name: '',
						telephone: '',
						relation: '',
					},
					{
						num: '2',
						name: '',
						telephone: '',
						relation: '',
					}
				],
			}
		},
		methods: {
			// 添加紧急联系人
			getadd() {
				this.exigencyList.push({
					num: '1',
					name: '',
					telephone: '',
					relation: '',
				})
				//新增默认加 0.1
				// this.form.salary += 0.1
			},
			//减少紧急联系人
			reduceGoods(index) {
				this.exigencyList.splice(index, 1)
				// 需要去除减少物品的价格
				let count = 0
				for (let i = 0; i < this.tabList; i++) {
					count += this.tabList[i].fetchMoney
				}
				// this.form.salary = count
			},

		

		}
	}
</script>

③css中样式展示

<style lang="scss" scoped>
	.publish-top {
		margin: 12px 16px 0px 16px;
		background-color: #fff;
		border-radius: 16rpx;

		.person-item {
			display: flex;
			align-items: center;
			padding: 32rpx;
			border-bottom: 1px solid #E6E6E8;
		}

		//紧急联系人
		.publish-top-two {
			position: absolute;
			left: auto;
			top: 104px;

			.publish-top {
				position: relative;
				background-color: #fff;
				border-radius: 16rpx;

				.reduce-btn {
					position: absolute;
					top: 0px;
					left: 0px;
					width: 40rpx;
					height: 40rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	.asterisk {
		color: rgba(255, 128, 128, 1);
		margin-right: 10rpx;
		margin-top: 12rpx;
	}

	.item-left {
		color: #1A1A1A;
		font-family: MiSans-Medium, MiSans;
		font-weight: 500;
		font-size: 32rpx;
		margin-right: 32rpx;
	}

	.item-right {
		text-align: right;
		font-size: 32rpx;
		color: #333
	}

	.addexigencybth {
		height: 88rpx;
		margin: 12px 16px 0px 16px;
		background-color: #fff;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #1A1A1A;
		font-size: 32rpx;
		font-weight: 500;
	}
</style>

三、效果展示

点击添加按钮就会添加一个输入框

点击减少，就会减少输入框

四、小结 + 注意事项

总结模板：

在模板中使用 v-for 指令渲染表单项 <div>
<div v-for="(item, index) in formItems" :key="index">
<input type="text" v-model="item.value">
<button @click="removeFormItem(index)">删除</button>
</div>
<button @click="addFormItem">添加表单项</button>
</div>

在 data 中定义一个数组，用于存储表单项的数据
data() {
return {
formItems: []
}
}

在 methods 中定义添加和删除表单项的方法

methods: {
addFormItem() {
this.formItems.push({ value: '' });
},
removeFormItem(index) {
this.formItems.splice(index, 1);
}
}

这样就完成了在uni-app中添加多个表单数组的功能。每次点击“新增”按钮时，会自动添加一个新的表单项；而点击已存在的表单项右侧的“删除”按钮时，则会从列表中移除该表单项。

表单中至少保留一条表单项，必须要有添加按钮，和移除按钮