vue+element 实现批量新增多行
vue+element 实现批量新增多行
·
实现如下批量新增
- 样式
<div v-for = "(item, index) in form.list" :key = "index">
<el-form-item label = "选项"
:rules = "{required:true, message:'请输入', trigger: ''change}"
:prop = " 'list.' + index + '.name' ">
<el-input type= 'test' v-model = "item.name"
placeholder = "请输入" clearable>
</el-input>
</el-form-item>
<el-form-item>
<el-button v-if = "index+q = form.list.length"
type = "primary" icon = " el-icon-plus" @click = "addRow">
</el-button>
<el-button v-if = "index !== 0" type = "primary"
icon = " el-icon-minus" @click = "delRow(item, index)">
</el-button>
</el-form-item>
</div>
- 参数声明
form: {
list:[{id:'',name:''}]
}
- js方法
// 新增一行
addRow(){
if(this.form.list){
var index = this.form.list.length - 1;
var lastItem = JSON.parse(JSON.stringify(this.form.list[index]))
lastItem.id = ''
lastItem.name = ''
this.form,list.push(lastItem)
}
}
// 删除一行
delRow(item, index){
this.form.list.splice(index, 1)
}
更多推荐
已为社区贡献3条内容
所有评论(0)