微客导航 » 文章资讯 » vue iview实现动态新增和删除

vue iview实现动态新增和删除

2023-07-22 22:27:08 73

本文实例为大家分享了vueiview动态新增和删除的具体代码，供大家参考，具体内容如下









删除
































增加属性




保存
返回

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实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

vue iview实现动态新增和删除

热门推荐

随机推荐