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 相关文章推荐
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
用JQuery调用Session的实现代码
Oct 29 Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
document.addEventListener使用介绍
2014/03/07 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
javascript自执行函数
2017/02/10 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
详解JavaScript的BUG和错误
2018/05/07 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
python实现马耳可夫链算法实例分析
2015/05/20 Python
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
python编程羊车门问题代码示例
2017/10/25 Python
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
python实现低通滤波器代码
2020/02/26 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
从python读取sql的实例方法
2020/07/21 Python
python中time.ctime()实例用法
2021/02/03 Python
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
会计电算化专业个人的自我评价
2013/11/24 职场文书
竟聘演讲稿范文
2013/12/31 职场文书
青年创业培训欢迎词
2014/01/08 职场文书
渡河少年教学反思
2014/02/12 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
法人委托书
2014/07/31 职场文书
安全生产学习心得体会
2016/01/18 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
民事调解协议书
2016/03/21 职场文书
OpenCV-Python实现油画效果的实例
2021/06/08 Python