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 相关文章推荐
Json对象替换字符串占位符实现代码
Nov 17 Javascript
有关javascript的性能优化 (repaint和reflow)
Apr 12 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
Dec 31 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
Vue.js如何实现路由懒加载浅析
Aug 14 Javascript
javascript计算对象长度的方法
Oct 25 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
浅析java线程中断的办法
Jul 29 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 Javascript
vue 单页应用和多页应用的优劣
Oct 22 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中根据变量的类型 选择echo或dump
2012/07/05 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
RequireJs的使用详解
2017/02/19 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
使用python绘制二元函数图像的实例
2019/02/12 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
中科软测试工程师面试题
2012/06/16 面试题
DOM和JQuery对象有什么区别
2016/11/11 面试题
音乐器材管理制度
2014/01/31 职场文书
银行职员自我鉴定
2014/04/20 职场文书
关于运动会的口号
2014/06/07 职场文书
优秀英文求职信范文
2015/03/19 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
Java实现房屋出租系统详解
2021/10/05 Java/Android