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

本文主要是介绍【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)}}

参考文档

【element+vue】点击加号增加一行，点击减号删除一行_vue点击加号增加一组-CSDN博客

vue 实现动态表单，点击新增 增加一行输入框 - 爱喝可乐的靓仔 - 博客园 (cnblogs.com)

这篇关于【element+vue】点击加号增加一行，点击减号删除一行的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---