vue iview实现动态新增和删除

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

<Form ref="capsuleAttr" :model="capsuleAttr" :label-width="100" style="width: 80％">
 <ul>
 <li v-for="(item, index) in capsuleAttr.attrList" v-if="item.status" :key="index">
 <FormItem
  style="width:50％;"
  label="属性名称："
  :prop="'attrList.' + index + '.AttrName'"
  :rules="{required: true, message: '属性名称不能为空', trigger: 'blur'}"
 >
  <Col span="7">
  <Input v-model.trim="item.AttrName" placeholder="属性名称" />
  </Col>
  <Col span="2" style="margin-left:1％;">
  <Button @click="handleRemove(item,index)" type="error" icon="md-close">删除</Button>
  </Col>
 </FormItem>
 <FormItem
  style="width:20％;"
  label="温度："
  :prop="'attrList.' + index + '.Temperature'"
  :rules="{required: true, message: '温度不能为空', trigger: 'blur',type:'string', transform(val) {
 return String(val)}}"
 >
  <Input v-model.trim="item.Temperature" placeholder="温度" />
 </FormItem>
 <FormItem
  style="width:20％;"
  label="流量："
  :prop="'attrList.' + index + '.Volume'"
  :rules="{required: true, message: '流量不能为空', trigger: 'blur'}"
 >
  <Input v-model.trim="item.Volume" placeholder="流量" />
 </FormItem>
 <FormItem label="推荐流量：" style="width:20％;">
  <Input v-model.trim="item.RcommendVolume" placeholder="流量" />
 </FormItem>
 <FormItem label="吹气时间：" style="width:20％;">
  <Input v-model.trim="item.Blow" placeholder="吹气时间" />
 </FormItem>
 <FormItem label="浸泡时间：" style="width:20％;">
  <Input v-model.trim="item.Soak" placeholder="浸泡时间" />
 </FormItem>

<FormItem
  label="作业过程描述："
  style="width:40％;"
  :prop="'attrList.' + index + '.WorkDesc'"
  :rules="{required: true, message: '作业过程描述不能为空', trigger: 'blur'}"
 >
  <Input
  v-model="item.WorkDesc"
  type="textarea"
  :autosize="{minRows: 5,maxRows: 10}"
  placeholder="输入作业过程描述..."
  />
 </FormItem>
 <FormItem style="width:20％;" label="作业顺序：">
  <!-- :rules="ruleWorkSort" -->
  <Input v-model.trim="item.WorkSort" placeholder="作业顺序" />
 </FormItem>
 <Divider dashed />
 </li>
 </ul>

<FormItem>
 <Row>
 <Col span="8">
  <Button type="dashed" long @click="handleAttrAdd" icon="md-add">增加属性</Button>
 </Col>
 </Row>
 </FormItem>
 <FormItem>
 <Button type="primary" @click="handleAttrSubmit('capsuleAttr')">保存</Button>
 <Button @click="$router.go( -1)" style="margin-left: 8px">返回</Button>
 </FormItem>
</Form>

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

来源：https://blog.csdn.net/qq_40190624/article/details/101282491