vue iview實現(xiàn)動態(tài)新增和刪除

更新時間：2020年06月17日 15:14:49 作者：周家大小姐.

這篇文章主要為大家詳細介紹了vue iview實現(xiàn)動態(tài)新增和刪除，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue iview動態(tài)新增和刪除的具體代碼，供大家參考，具體內容如下

<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="作業(yè)過程描述："
   style="width:40%;"
   :prop="'attrList.' + index + '.WorkDesc'"
   :rules="{required: true, message: '作業(yè)過程描述不能為空', trigger: 'blur'}"
  >
   <Input
   v-model="item.WorkDesc"
   type="textarea"
   :autosize="{minRows: 5,maxRows: 10}"
   placeholder="輸入作業(yè)過程描述..."
   />
  </FormItem>
  <FormItem style="width:20%;" label="作業(yè)順序：">
   <!-- :rules="ruleWorkSort" -->
   <Input v-model.trim="item.WorkSort" placeholder="作業(yè)順序" />
  </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("請先保存膠囊數(shù)據(jù)");
  }
  }
 } else {
  this.$Message.error("保存失敗!");
 }
 });
 },

關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。

更多vue學習教程請閱讀專題《vue實戰(zhàn)教程》

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

您可能感興趣的文章: