实现效果:
思路:
使用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);
}
}
},