學習vue-iview動態新增和刪除的方法

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

參考鏈接：vue iview動態新增和刪除

我根據上面的博客進行了test和小修改，效果如下：

源碼如下：

html代碼

<template>  <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:80%;"    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:20%;">    <Button @click="handleRemove(item,index)" type="error" icon="md-close">刪除</Button>    </Col>   </FormItem>   <FormItem    style="width:80%;"    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:80%;"    label="流量："    :prop="'attrList.' + index + '.Volume'"    :rules="{required: true, message: '流量不能為空', trigger: 'blur'}"   >    <Input v-model.trim="item.Volume" placeholder="流量" />   </FormItem>   <FormItem label="推薦流量：" style="width:80%;">    <Input v-model.trim="item.RcommendVolume" placeholder="流量" />   </FormItem>   <FormItem label="吹氣時間：" style="width:80%;">    <Input v-model.trim="item.Blow" placeholder="吹氣時間" />   </FormItem>   <FormItem label="浸泡時間：" style="width:80%;">    <Input v-model.trim="item.Soak" placeholder="浸泡時間" />   </FormItem>    <FormItem    label="作業過程描述："    style="width:80%;"    :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:80%;" label="作業順序：">    <!-- :rules="ruleWorkSort" -->    <Input v-model.trim="item.WorkSort" placeholder="作業順序" />   </FormItem>   <pider 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> </template>

JS代碼

<script> export default {  data () {  return {  capsuleAttr: {  // 膠囊屬性  index: 1,  attrList: [   {   AttrName: '',   Temperature: '',   Volume: '',   CapsuleId: '', // 屬性ID   RcommendVolume: '', // 推薦流量   WorkDesc: '',   Blow: '', // 吹氣時間   Soak: '', // 浸泡時間   WorkSort: '',   index: 1,   status: 1   }  ]  }  }  },  method: {  // 添加屬性  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('保存失敗!')  }  })  }  }  } </script>

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

相關學習推薦：javascript教程