代码实现:
页面部分: 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)