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 相关文章推荐
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
Aug 27 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
Nov 12 Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
May 18 Javascript
vue点击按钮实现简单页面的切换
Sep 08 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采集腾讯微博的实现代码
2012/01/19 PHP
PHP闭包实例解析
2014/09/08 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
清空上传控件input file的值
2010/07/03 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
Python Web服务器Tornado使用小结
2014/05/06 Python
Python实现八大排序算法
2016/08/13 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
《维生素c的故事》教学反思
2014/02/18 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
婚宴来宾致辞
2015/07/28 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers