本文实例为大家分享了vue-iview动态新增和删除的具体代码，供大家参考，具体内容如下
参考链接：vue iview动态新增和删除
我根据上面的博客进行了test和小修改，效果如下：
源码如下：
立即学习“前端免费学习笔记（深入）”；
html代码
登录后复制
JS代码
export default { data () { return { capsuleAttr: { // 胶囊属性 index: 1, attrList: [ { AttrName: '', Temperature: '', Volume: '', CapsuleId: '', // 属性ID RcommendVolume: '', // 推荐流量 WorkDesc: '', Blow: '', // 吹气时间 Soak: '', // 浸泡时间 WorkSort: '', index: 1, status: 1 } ] } } }, method: { // 添加属性 handleAttrAdd () { this.capsuleAttr.index++ this.capsuleAttr.attrList.push({ AttrName: '', Temperature: '', Volume: '', WorkDesc: '', WorkSort: '', RcommendVolume: '', // 推荐流量 Blow: '', // 吹气时间 Soak: '', // 浸泡时间 index: this.capsuleAttr.index, status: 1 }) }, handleRemove (item, index) { console.log(item.Id) if (item.Id) { this.$Modal.confirm({ title: '删除本条记录', onOk: () => { ProductModule.getCapsuleAttributeDel(item.Id).then(res => { if (res.data.Success) { this.capsuleAttr.attrList[index].status = 0 this.$Message.success('删除成功') } }) }, onCancel: () => { console.log('onCancel') } }) return } this.capsuleAttr.attrList[index].status = 0 }, // 胶囊属性保存新增 handleAttrSubmit (name) { this.$refs[name].validate(valid => { if (valid) { if (this.userId) { this.getCapsuleAttrEditAdd() } else { if (this.capsuleId) { this.getSaveAttrCreate() } else { this.$Message.error('请先保存胶囊数据') } } } else { this.$Message.error('保存失败!') } }) } }}
登录后复制
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
相关学习推荐：javascript教程
以上就是学习vue-iview动态新增和删除的方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2726359.html
