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 相关文章推荐
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
Jun 08 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
Jan 31 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
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执行linux系统命令的常用函数使用说明
2010/04/27 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
php中in_array函数用法探究
2014/11/25 PHP
php导入模块文件分享
2015/03/17 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
jquery 表单进行客户端验证demo
2009/08/24 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
[56:12]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第一场 6.3
2018/06/04 DOTA
Python计算三角函数之asin()方法的使用
2015/05/15 Python
Python实现大文件排序的方法
2015/07/10 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
Python常见数据类型转换操作示例
2019/05/08 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
Java语言的优势
2015/01/10 面试题
网络营销策划方案
2014/06/04 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
公诉意见书范文
2015/06/05 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
Vue实现动态查询规则生成组件
2021/05/27 Vue.js