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实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
浅谈Node.js中的定时器
Jun 18 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
javascript表单正则应用
Feb 04 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
Jan 23 Javascript
用ES6写全屏滚动插件的示例代码
May 02 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
Vue组件系列开发之模态框
Apr 18 Javascript
TS 类型兼容教程示例详解
Sep 23 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中正确的使用json
2013/08/06 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
2019/11/14 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
Python脚本实现下载合并SAE日志
2015/02/10 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
《母鸡》教学反思
2014/02/25 职场文书
合作意向书
2014/07/30 职场文书
农村党员对照检查材料
2014/09/24 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
三人合伙协议书范本
2014/10/29 职场文书
安全保证书格式
2015/02/28 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android