代码实现:
页面部分: 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)}}
参考文档
【element+vue】点击加号增加一行,点击减号删除一行_vue点击加号增加一组-CSDN博客