学习vue-iview动态新增和删除的方法

前端  /  管理员 发布于 6年前   429

本文实例为大家分享了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教程

以上就是学习vue-iview动态新增和删除的方法的详细内容，更多请关注其它相关文章！