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 相关文章推荐
jQuery getJSON 处理json数据的代码
Jul 26 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
JS的参数传递示例介绍
Feb 08 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 Javascript
微信小程序实现倒计时调用相机自动拍照功能
Jun 10 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
浅析Vue下的components模板使用及应用
Nov 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
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
Jquery ui css framework
2010/06/28 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
Python 实现一个简单的web服务器
2021/01/03 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
C++面试题目
2013/06/25 面试题
生产经理的自我评价分享
2013/11/07 职场文书
如何写一份好的自荐信
2014/01/02 职场文书
幼儿园元旦活动感言
2014/03/02 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
影视后期实训报告
2014/11/05 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
师德先进个人材料
2014/12/20 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
教你怎么用Python操作MySql数据库
2021/05/31 Python
Redis可视化客户端小结
2021/06/10 Redis
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android