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>
        <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>
</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>

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