这篇文章主要为大家详细介绍了vue iview实现动态新增和删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue iview动态新增和删除的具体代码，供大家参考，具体内容如下
<ul> <li> <col span="7"></Col><col span="2" style="margin-left:1%"><button type="error">删除</button></Col> <!-- :rules="ruleWorkSort" --></li></ul> <col span="8"><button type="dashed">增加属性</button></Col> <button type="primary">保存</button><button style="margin-left: 8px">返回</button>
data:
capsuleAttr: { //胶囊属性 index: 1, attrList: [ { AttrName: "", Temperature: "", Volume: "", CapsuleId: "", //属性ID RcommendVolume: "", //推荐流量 WorkDesc: "", Blow: "", //吹气时间 Soak: "", //浸泡时间 WorkSort: "", index: 1, status: 1 } ] },
methods:
// 添加属性 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组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战
本文来源gaodai.ma#com搞#代!码网_
教程》
以上就是vue iview实现动态新增和删除的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue iview实现动态新增和删除
转载请注明原文链接：vue iview实现动态新增和删除
