本文例項為大家分享了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: "",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("儲存失敗!");
  }
  });
 },

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。