uniap新增表单怎么实现

最新推荐文章于 2024-09-06 22:20:29 发布

once111

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量128

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/once111/article/details/141329137

版权

实现效果：

思路：

使用form表单，在表单中定义一个数组carry: [{ }],把需要新增的字段内容写到这个数组中，在点击“+”的时候，往数组里push一个空对象就行。

代码实现：

<u--form labelPosition="top" :model="ruleForm" ref="ruleForm" labelWidth="150rpx">
					<u-form-item label="姓名" prop="name" required borderBottom>
						<u--input v-model="ruleForm.name" placeholder="请输入姓名" border="none"
							style="margin-top: 10rpx;"></u--input>
					</u-form-item>
					<u-form-item label="警号" prop="policeNumber" required borderBottom>
						<u--input v-model="ruleForm.policeNumber" placeholder="请输入警号" border="none"
							style="margin-top: 10rpx;"></u--input>
					</u-form-item>
					<view class="">
						<view class="titleForm">
							<p style="margin-right: 15rpx;">申请下架设备信息</p>
							<u-icon name="plus-circle-fill" color="#1E90FF" size="23px" @click="addItem(2)"></u-icon>
						</view>
						<view class="sxBox" v-for="(item, index) in ruleForm.carry" :key="item.key">
							<u-icon name="close-circle" color="#ff0000" size="20px"
								@click="removeDomain(item, index, 2)" class="icon"></u-icon>
							<u-form-item label="设备类型" :prop="'carry.' + index + '.unit'" borderBottom>
								<u--input v-model="item.type" placeholder="请输入设备类型" border="none"
									style="margin-top: 10rpx;"></u--input>
							</u-form-item>
							<u-form-item label="设备型号" :prop="'carry.' + index + '.unit'" borderBottom>
								<u--input v-model="item.code" placeholder="请输入随行人员单位" border="none"
									style="margin-top: 10rpx;"></u--input>
							</u-form-item>
						</view>
					</view>
				</u--form>

js:

data() {
			return {
				dialogVisible: false,
				row: {},
				ruleForm: {
					policeNumber: "",
					name: "",
					phone: "",
					unit: "",
					accompany: [{}],
					carry: [{}],
				},
			}
		},

// 新增用品项
			addItem(type) {
				if (type == 1) {
					this.ruleForm.accompany.push({});
				} else if (type == 2) {
					this.ruleForm.carry.push({});
				}
			},
			// 删除新增表单
			removeDomain(item, index, type) {
				if (type == 1) {
					const itemList = this.ruleForm.accompany.indexOf(item);
					if (itemList !== -1) {
						this.ruleForm.accompany.splice(index, 1);
					}
				} else {
					const itemList = this.ruleForm.carry.indexOf(item);
					if (itemList !== -1) {
						this.ruleForm.carry.splice(index, 1);
					}
				}
			},