1.dom结构
<div class="liveInDetailList">
<div class="liveInDetail" v-for="(item,index) inPersonNamelist.guestList" :key="index">
<div class="infoDetail">
<span class="left">住客姓名</span>
<input type="text" placeholder="请输入姓名" class="searchRoomInp" autofocus="autofocus" v-model="item.name" ref="inputName" v-focus>
</div>
<div class="infoDetail">
<span class="left" >手机号</span>
<input type="text" placeholder="请输入手机号" class="searchRoomInp" v-model="item.mobilePhone" >
</div>
<div class="infoDetail">
<span class="left">身份证号</span>
<input type="text" placeholder="请输入身份证号" class="searchRoomInp" v-model="item.idCardNo">
</div>
<div class="handle" v-if="isShowDelete">
</div>
<div class="handle" v-else>
<i slot='rightIcon' class="iconfont icon-icon-shanchu deleterightIcon" @click.stop="delRoomCard(index)"></i>
</div>
</div>
</div>
2在data中定义
PersonNamelist:{
checkInRoomId:'',
guestList:[{id:"",name:"",mobilePhone:"",idCardNo:""}]
},
3.点击新增
1.定义一个obj
let obj={
id:"",
name:"",
mobilePhone:"",
idCardNo:""
}
2.点击一下将obj添加进数组PersonNamelist
4.该项目会从后台传来一个新增最多的人数所以需要判断下PersonNamelist中的guestList的长度
addPerson(){
let obj={
id:"",
name:"",
mobilePhone:"",
idCardNo:""
}
if(this.PersonNamelist.guestList.length<(后台数据))
this.PersonNamelist.guestList.push(obj)
}
else{
Toast({
message:'已超出该房间可住最大人数',
position:'bottom',
duration:1000,
className:'panduan'
});
}
}
