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

时空城_1103

已于 2022-09-13 13:57:24 修改

阅读量668

点赞数

文章标签： vue.js elementui javascript

于 2022-09-13 13:49:35 首次发布

本文链接：https://blog.csdn.net/ZM_1103/article/details/126829810

版权

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

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)
}