【element+vue】点击加号增加一行，点击减号删除一行

效果：

代码实现：

页面部分： vue+element

备注：v-if =“i>0” （保证第一行不出现减号）

 <div v-for="(item,i) in studentList">
   <el-form-item label="学生:" prop="name">
     <el-input v-model="studentList[i].name" clearable placeholder="姓名"></el-input>
   </el-form-item>
   <el-form-item prop="age">
      <el-input v-model="studentList[i].age" clearable placeholder="年龄"></el-input>
   </el-form-item>
   <el-button circle icon="el-icon-plus" @click="addList()"></el-button>
   <el-button circle icon="el-icon-minus" @click="subList(i)" v-if="i>0"></el-button>
 </div>

数据部分：赋一组空值，页面自动显示第一行

 data() {
       return {
         studentList: [
           {name: '', age: ''}
         ]
       }
     }

函数部分：点击加号，给数组新增一组空值，新增一行；点击减号，将行号传入，删除当前行

methods: {
        //加号
        addList() {
            this.studentList.push({name: '', age: ''})
        },
        //减号
        subList(index) {
          this.studentList.splice(index, 1)
        }
 }