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







  • style="width:50%;"

    label="属性名称："

    :prop="'attrList.' + index + '.AttrName'"

    :rules="{required: true, message: '属性名称不能为空', trigger: 'blur'}"

    >
















    style="width:20%;"

    label="温度："

    :prop="'attrList.' + index + '.Temperature'"

    :rules="{required: true, message: '温度不能为空', trigger: 'blur',type:'string', transform(val) {

    return String(val)}}"

    >






    style="width:20%;"

    label="流量："

    :prop="'attrList.' + index + '.Volume'"

    :rules="{required: true, message: '流量不能为空', trigger: 'blur'}"

    >

























    label="作业过程描述："

    style="width:40%;"

    :prop="'attrList.' + index + '.WorkDesc'"

    :rules="{required: true, message: '作业过程描述不能为空', trigger: 'blur'}"

    >


    v-model="item.WorkDesc"

    type="textarea"

    :autosize="{minRows: 5,maxRows: 10}"

    placeholder="输入作业过程描述..."

    />















































  • style="width:50%;"

    label="属性名称："

    :prop="'attrList.' + index + '.AttrName'"

    :rules="{required: true, message: '属性名称不能为空', trigger: 'blur'}"

    >
















    style="width:20%;"

    label="温度："

    :prop="'attrList.' + index + '.Temperature'"

    :rules="{required: true, message: '温度不能为空', trigger: 'blur',type:'string', transform(val) {

    return String(val)}}"

    >






    style="width:20%;"

    label="流量："

    :prop="'attrList.' + index + '.Volume'"

    :rules="{required: true, message: '流量不能为空', trigger: 'blur'}"

    >

























    label="作业过程描述："

    style="width:40%;"

    :prop="'attrList.' + index + '.WorkDesc'"

    :rules="{required: true, message: '作业过程描述不能为空', trigger: 'blur'}"

    >


    v-model="item.WorkDesc"

    type="textarea"

    :autosize="{minRows: 5,maxRows: 10}"

    placeholder="输入作业过程描述..."

    />







































data:
capsuleAttr: {
//胶囊属性
index: 1,
attrList: [

{

AttrName: "",

Temperature: "",

Volume: "",

CapsuleId: "", //属性ID

RcommendVolume: "", //推荐流量

WorkDesc: "",

Blow: "", //吹气时间

Soak: "", //浸泡时间

WorkSort: "",

index: 1,

status: 1

}
]
},
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("保存失败!");
}
});
},
// 添加属性
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.js组件学习教程vue学习教程请阅读专题《vue实战教程》《vue实战教程》以上就是本文的全部内容，希望对大家的学习有所帮助。