vue 表单动态添加，删除（最后一行）数据

动态添加，删除（最后一行）数据

1.html 代码

<p>教练员: <i class="el-icon-plus" @click="addInfo"></i><i class="el-icon-minus" @click="delInfo"></i></p>
<div class="main_classinput" v-for="(item,index) in info" :key="index">
    <el-form-item label="姓名:" style="width: 33%;">
        <el-input v-model="item.name" class="classinput"></el-input>
    </el-form-item>
    <el-form-item label="职务:" style="width: 33%;">
        <el-input v-model="item.duty" class="classinput"></el-input>
    </el-form-item>
    <el-form-item label="联系电话:" style="width: 33%;">
        <el-input v-model="item.tel" class="classinput"></el-input>
    </el-form-item>
</div>

 2. 在return中定义一个数组

data() {
  return {
    info: [] //信息数组
  }
},

3.用数组的push与splice方法

 // 添加教练员
 addInfo(){
    this.info.push({
       name:'',
       duty:'',
       tel:''
     })
 },
// 删除最后一行数据
delInfo(){
   this.info.splice(this.info.length-1,1)
}