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


Posted in Javascript onJune 17, 2020

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

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

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
9个JavaScript评级/投票插件
Jan 18 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
js获得当前系统日期时间的方法
May 06 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
详解关于element级联选择器数据回显问题
Feb 20 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
vue iview实现动态新增和删除
Jun 17 #Javascript
vue如何搭建多页面多系统应用
Jun 17 #Javascript
vue2.0实现列表数据增加和删除
Jun 17 #Javascript
使用next.js开发网址缩短服务的方法
Jun 17 #Javascript
vue实现前端分页完整代码
Jun 17 #Javascript
JS实现网站楼层导航效果代码实例
Jun 16 #Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 #Javascript
You might like
PHP开发中常用的字符串操作函数
2011/02/08 PHP
PHP文件上传原理简单分析
2011/05/29 PHP
php获取从html表单传递数组的方法
2015/03/20 PHP
PHP中实现crontab代码分享
2015/03/26 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
英国复古服装和球衣购买网站:3Retro Football
2018/07/09 全球购物
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
销售行业个人求职自荐信
2013/09/25 职场文书
大学生创业策划书
2014/02/02 职场文书
管理失职检讨书
2014/02/12 职场文书
写求职信有什么意义
2014/02/17 职场文书
离职证明标准格式
2014/09/15 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python