欢迎来到站长教程网!

JavaScript

当前位置:主页 > 网页制作 > JavaScript >

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

时间:2020-06-17|栏目:JavaScript|点击:

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

源码如下:

html代码

<template> <Form ref="capsuleAttr" :model="capsuleAttr" :label-width="100"> <ul> <li v-for="(item, index) in capsuleAttr.attrList" v-if="item.status" :key="index"> <FormItem 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"> <Button @click="handleRemove(item,index)" type="error" icon="md-close">删除</Button> </Col> </FormItem> <FormItem 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 label="流量:" :prop="'attrList.' + index + '.Volume'" :rules="{required: true, message: '流量不能为空', trigger: 'blur'}" > <Input v-model.trim="item.Volume" placeholder="流量" /> </FormItem> <FormItem label="推荐流量:"> <Input v-model.trim="item.RcommendVolume" placeholder="流量" /> </FormItem> <FormItem label="吹气时间:"> <Input v-model.trim="item.Blow" placeholder="吹气时间" /> </FormItem> <FormItem label="浸泡时间:"> <Input v-model.trim="item.Soak" placeholder="浸泡时间" /> </FormItem> <FormItem label="作业过程描述:" :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 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)">返回</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移动端的左右滑动事件详解

栏    目:JavaScript

下一篇:详解JavaScript中的Object.is()与===运算符总

本文标题:vue-iview动态新增和删除的方法

本文地址:http://www.blue1000.com/wangyezhizuo/JavaScript/1946.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:1961407250 | 邮箱:1961407250#qq.com(#换成@)

Copyright © 2002-2022 BK网络学院版权所有 Power by DedeCms 粤ICP备19027147号-7