本文實例為大家分享了vue-iview動態新增和刪除的具體代碼，供大家參考，具體內容如下

參考鏈接：vue iview動態新增和刪除

我根據上面的博客進行了test和小修改，效果如下：

源碼如下：

html代碼

<template> <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:20%;'> <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: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='作業過程描述：' :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></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實戰教程》

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。