vue-iview動態新增和刪除的方法
阿新 • • 發佈:2020-06-19
本文例項為大家分享了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> <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: '',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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。