当前位置：首页 > news >正文

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

news 来源：原创 2024/5/13 14:47:38

一、实现思路

二、实现步骤

①view部分展示

②JavaScript 内容

③css中样式展示

三、效果展示

四、小结 + 注意事项

总结模板：

一、实现思路

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 = 0for (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中添加多个表单数组的功能。每次点击“新增”按钮时，会自动添加一个新的表单项；而点击已存在的表单项右侧的“删除”按钮时，则会从列表中移除该表单项。

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