学习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="&#39;attrList.&#39; + index + &#39;.AttrName&#39;"
   :rules="{required: true, message: &#39;属性名称不能为空&#39;, trigger: &#39;blur&#39;}"
  >
   <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="&#39;attrList.&#39; + index + &#39;.Temperature&#39;"
   :rules="{required: true, message: &#39;温度不能为空&#39;, trigger: &#39;blur&#39;,type:&#39;string&#39;, transform(val) {
  return String(val)}}"
  >
   <Input v-model.trim="item.Temperature" placeholder="温度" />
  </FormItem>
  <FormItem
   style="width:80%;"
   label="流量："
   :prop="&#39;attrList.&#39; + index + &#39;.Volume&#39;"
   :rules="{required: true, message: &#39;流量不能为空&#39;, trigger: &#39;blur&#39;}"
  >
   <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="&#39;attrList.&#39; + index + &#39;.WorkDesc&#39;"
   :rules="{required: true, message: &#39;作业过程描述不能为空&#39;, trigger: &#39;blur&#39;}"
  >
   <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(&#39;capsuleAttr&#39;)">保存</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: &#39;&#39;,
  Temperature: &#39;&#39;,
  Volume: &#39;&#39;,
  CapsuleId: &#39;&#39;, // 属性ID
  RcommendVolume: &#39;&#39;, // 推荐流量
  WorkDesc: &#39;&#39;,
  Blow: &#39;&#39;, // 吹气时间
  Soak: &#39;&#39;, // 浸泡时间
  WorkSort: &#39;&#39;,
  index: 1,
  status: 1
  }
 ]
 }
 }
 },
 method: {
 // 添加属性
 handleAttrAdd () {
 this.capsuleAttr.index++
 this.capsuleAttr.attrList.push({
 AttrName: &#39;&#39;,
 Temperature: &#39;&#39;,
 Volume: &#39;&#39;,
 WorkDesc: &#39;&#39;,
 WorkSort: &#39;&#39;,
 RcommendVolume: &#39;&#39;, // 推荐流量
 Blow: &#39;&#39;, // 吹气时间
 Soak: &#39;&#39;, // 浸泡时间
 index: this.capsuleAttr.index,
 status: 1
 })
 },
 handleRemove (item, index) {
 console.log(item.Id)
 if (item.Id) {
 this.$Modal.confirm({
  title: &#39;删除本条记录&#39;,
  onOk: () => {
  ProductModule.getCapsuleAttributeDel(item.Id).then(res => {
  if (res.data.Success) {
  this.capsuleAttr.attrList[index].status = 0
  this.$Message.success(&#39;删除成功&#39;)
  }
  })
  },
  onCancel: () => {
  console.log(&#39;onCancel&#39;)
  }
 })
 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(&#39;请先保存胶囊数据&#39;)
  }
  }
 } else {
  this.$Message.error(&#39;保存失败!&#39;)
 }
 })
 }
 }

}
</script>

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

相关学习推荐：javascript教程

以上是学习vue-iview动态新增和删除的方法的详细内容。更多信息请关注PHP中文网其他相关文章！