vue iview实现动态新增和删除


Posted in Javascript onJune 17, 2020

本文实例为大家分享了vue iview动态新增和删除的具体代码,供大家参考,具体内容如下

<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:50%;"
   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:1%;">
   <Button @click="handleRemove(item,index)" type="error" icon="md-close">删除</Button>
   </Col>
  </FormItem>
  <FormItem
   style="width:20%;"
   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:20%;"
   label="流量:"
   :prop="'attrList.' + index + '.Volume'"
   :rules="{required: true, message: '流量不能为空', trigger: 'blur'}"
  >
   <Input v-model.trim="item.Volume" placeholder="流量" />
  </FormItem>
  <FormItem label="推荐流量:" style="width:20%;">
   <Input v-model.trim="item.RcommendVolume" placeholder="流量" />
  </FormItem>
  <FormItem label="吹气时间:" style="width:20%;">
   <Input v-model.trim="item.Blow" placeholder="吹气时间" />
  </FormItem>
  <FormItem label="浸泡时间:" style="width:20%;">
   <Input v-model.trim="item.Soak" placeholder="浸泡时间" />
  </FormItem>
 
  <FormItem
   label="作业过程描述:"
   style="width:40%;"
   :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:20%;" 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>

data:

capsuleAttr: {
 //胶囊属性
 index: 1,
 attrList: [
  {
  AttrName: "",
  Temperature: "",
  Volume: "",
  CapsuleId: "", //属性ID
  RcommendVolume: "", //推荐流量
  WorkDesc: "",
  Blow: "", //吹气时间
  Soak: "", //浸泡时间
  WorkSort: "",
  index: 1,
  status: 1
  }
 ]
 },

methods:

// 添加属性
 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("保存失败!");
 }
 });
 },

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

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

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

Javascript 相关文章推荐
JavaScript 加号(+)运算符号
Dec 06 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
javascript测试题练习代码
Oct 10 Javascript
JQUERY 设置SELECT选中项代码
Feb 07 Javascript
javascript验证身份证号
Mar 03 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 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
JS 5种遍历对象的方式
Jun 16 #Javascript
You might like
也谈 PHP 和 MYSQL
2006/10/09 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
img的onload的另类用法
2008/01/10 Javascript
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
django之常用命令详解
2016/06/30 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
python3 使用traceback定位异常实例
2020/03/09 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
收银出纳员岗位职责
2014/02/23 职场文书
2014年保洁工作总结
2014/11/24 职场文书
音乐会主持人开场白
2015/05/28 职场文书
学校安全管理制度
2015/08/06 职场文书