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("保存失败!");
  }
  });
 },

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