快活林资源网 Design By www.csstdc.com
本文实例为大家分享了vue iview动态新增和删除的具体代码,供大家参考,具体内容如下
<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:50%;" 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 style="width:20%;" 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:20%;" 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="作业过程描述:" style="width:40%;" :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:20%;" 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实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
快活林资源网 Design By www.csstdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
快活林资源网 Design By www.csstdc.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]