本文实例为大家分享了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> <pider 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组件学习教程进行学习。
相关学习推荐：javascript教程
以上就是学习vue-iview动态新增和删除的方法的详细内容。