vue iview实现动态新增和删除

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

<Form ref='capsuleAttr' :model='capsuleAttr' :label- style='width: 80%'> <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' style='margin-left:1%;'> <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='推荐流量：' 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='作业过程描述：' :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)' 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实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。