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 相关文章推荐
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 Javascript
简化版手机端照片预览组件
Apr 13 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
Java设计中的Builder模式的介绍
Mar 22 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
微信小程序实现收货地址左滑删除
Nov 18 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 Javascript
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文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
php 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
PHP 文件缓存的性能测试
2010/04/25 PHP
php把session写入数据库示例
2014/02/26 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
Python获取脚本所在目录的正确方法
2014/04/15 Python
Python程序设计入门(4)模块和包
2014/06/16 Python
python实现的简单FTP上传下载文件实例
2015/06/30 Python
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
python实现简易通讯录修改版
2018/03/13 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
"火柴棍式"程序员面试题
2014/03/16 面试题
个人生活学习自我评价范文
2013/11/26 职场文书
高级护理专业毕业生推荐信
2013/12/25 职场文书
自荐书4要点
2014/01/25 职场文书
专业技术职务聘任书
2014/03/29 职场文书
医生个人年终总结
2015/02/28 职场文书
Python中else的三种使用场景
2021/06/16 Python