vue-iview动态新增和删除的方法


Posted in Javascript onJune 17, 2020

本文实例为大家分享了vue-iview动态新增和删除的具体代码,供大家参考,具体内容如下

参考链接:vue iview动态新增和删除

我根据上面的博客进行了test和小修改,效果如下:

源码如下:

html代码

<template>
 <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:80%;"
   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:20%;">
   <Button @click="handleRemove(item,index)" type="error" icon="md-close">删除</Button>
   </Col>
  </FormItem>
  <FormItem
   style="width:80%;"
   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:80%;"
   label="流量:"
   :prop="'attrList.' + index + '.Volume'"
   :rules="{required: true, message: '流量不能为空', trigger: 'blur'}"
  >
   <Input v-model.trim="item.Volume" placeholder="流量" />
  </FormItem>
  <FormItem label="推荐流量:" style="width:80%;">
   <Input v-model.trim="item.RcommendVolume" placeholder="流量" />
  </FormItem>
  <FormItem label="吹气时间:" style="width:80%;">
   <Input v-model.trim="item.Blow" placeholder="吹气时间" />
  </FormItem>
  <FormItem label="浸泡时间:" style="width:80%;">
   <Input v-model.trim="item.Soak" placeholder="浸泡时间" />
  </FormItem>

  <FormItem
   label="作业过程描述:"
   style="width:80%;"
   :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:80%;" 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>
</template>

JS代码

<script>
export default {
 data () {
 return {
 capsuleAttr: {
 // 胶囊属性
 index: 1,
 attrList: [
  {
  AttrName: '',
  Temperature: '',
  Volume: '',
  CapsuleId: '', // 属性ID
  RcommendVolume: '', // 推荐流量
  WorkDesc: '',
  Blow: '', // 吹气时间
  Soak: '', // 浸泡时间
  WorkSort: '',
  index: 1,
  status: 1
  }
 ]
 }
 }
 },
 method: {
 // 添加属性
 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('保存失败!')
 }
 })
 }
 }

}
</script>

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Array对象方法参考
Oct 03 Javascript
javascript jQuery $.post $.ajax用法
Jul 09 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
javascript打开word文档的方法
Apr 16 Javascript
jQuery多个input求和的实现方法
Feb 12 Javascript
基于javascript实现单选及多选的向右和向左移动实例
Jul 25 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
深入分析jQuery.one() 函数
Jun 03 jQuery
vue iview实现动态新增和删除
Jun 17 #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
You might like
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
浅析SVN常见问题及解决方法
2013/06/21 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
JMS中Topic和Queue有什么区别
2013/05/15 面试题
见习期自我鉴定
2013/11/07 职场文书
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
4s店总经理岗位职责
2013/12/31 职场文书
小学毕业感言300字
2014/02/19 职场文书
八项规定整改方案
2014/10/01 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
合作意向协议书
2015/01/29 职场文书
教师考核鉴定意见
2015/06/05 职场文书