Vue 点击添加一行和删除一行

我用的是：vue + element ui 直接代码。

逻辑

注释：

1.通过对数组的 *** 作，进行添加和删除；

2.这里应注意index这个索引，用于删除时，知道删的是哪一个值；

3.删完对应的值，要对数组的index这个索引重组，否则再删除时会出错；

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">身份z号</span>

<input type="text" placeholder="请输入身份z号" 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'

    })

}

}

---