vue迴圈新增,刪除,重置
阿新 • • 發佈:2018-12-21
資料庫:
bean:
package com.heeexy.example.bean; import java.util.Date; import org.springframework.format.annotation.DateTimeFormat; import com.fasterxml.jackson.annotation.JsonFormat; //寫跟進表 public class XGJ { private int id; private int userId; private Date update_time; private Date create_time; private int dr; //跟進狀態 private String genjinzhuangtai; //跟進日期 @DateTimeFormat(pattern="yyyy-MM-dd HH:mm:ss") @JsonFormat(timezone = "GMT+8",pattern = "yyyy-MM-dd HH:mm:ss") private Date genjinriqi; //對應客戶表的客戶ID private int khId; //跟進內容 private String genjinneirong; public int getId() { return id; } public void setId(int id) { this.id = id; } public int getUserId() { return userId; } public void setUserId(int userId) { this.userId = userId; } public Date getUpdate_time() { return update_time; } public void setUpdate_time(Date update_time) { this.update_time = update_time; } public Date getCreate_time() { return create_time; } public void setCreate_time(Date create_time) { this.create_time = create_time; } public int getDr() { return dr; } public void setDr(int dr) { this.dr = dr; } public String getGenjinzhuangtai() { return genjinzhuangtai; } public void setGenjinzhuangtai(String genjinzhuangtai) { this.genjinzhuangtai = genjinzhuangtai; } public Date getGenjinriqi() { return genjinriqi; } public void setGenjinriqi(Date genjinriqi) { this.genjinriqi = genjinriqi; } public int getKhId() { return khId; } public void setKhId(int khId) { this.khId = khId; } public String getGenjinneirong() { return genjinneirong; } public void setGenjinneirong(String genjinneirong) { this.genjinneirong = genjinneirong; } }
<el-button type="primary" icon="edit" v-if="hasPerm('kh:updateXGJ')" @click="getCKXGJ(scope.row,scope.$index)">寫跟進</el-button> <el-form ref="tempKH" class="small-space" :model="tempKH" style="margin-left:5%;"> <el-row :gutter="10" v-for="(itemx,index) in tempKH.domainsXGJ" :key="index"> <el-form-item label="跟進內容" :prop="'domainsXGJ.' + index + '.genjinneirong'" :rules="{ required: true, message: '請輸入跟進內容', trigger: 'blur' }"> <el-input type="text" v-model="itemx.genjinneirong" style='width: 51%'></el-input> </el-form-item> <el-form-item label="跟進狀態" :prop="'domainsXGJ.' + index + '.genjinzhuangtai'" :rules="{ required: true, message: '請輸入跟進狀態', trigger: 'blur' }"> <el-select prop="khzt" v-model="itemx.genjinzhuangtai" placeholder="跟進狀態" style='width: 51%;'> <el-option v-for="item in gjztlist" :key="item.xuhao" :label="item.xialamingcheng" :value="item.xialamingcheng" > </el-option> </el-select> </el-form-item> <el-form-item label="跟進日期" :prop="'domainsXGJ.' + index + '.genjinriqi'" :rules="{ required: true, message: '請輸入跟進日期', trigger: 'blur' }"> <el-date-picker type="date" v-model="itemx.genjinriqi" placeholder="選擇日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" tyle="width:185px ;"></el-date-picker> </el-form-item> <el-form-item label="userId" hidden=true> <el-input type="text" v-model="itemx.userId"></el-input> </el-form-item> <el-form-item label="khId" hidden=true> <el-input type="text" v-model="itemx.khId"></el-input> </el-form-item> <el-form-item label="dr" hidden=true> <el-input type="text" v-model="itemx.dr" ></el-input> </el-form-item> <el-button type="primary" @click.prevent="removeDomainX(itemx)">刪除</el-button> <el-button type="primary" @click="resetFormX('tempKH')">重置</el-button> </el-row> <el-form-item label="跟進資訊"> <el-button type="primary" icon="plus" @click="addLadderX">新增</el-button> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="guanbi2">取 消</el-button> <el-button type="primary" v-if="dialogStatusXGJ=='xiegenjin'" :disabled="isDisable" @click="removeyunX()">修 改</el-button> </div> </el-dialog> <script> export default { data() { return { tempKH: { id: "", update_time: "", create_time: "", khlx: "", khzt: "", ssbm: "", khmc:"", dianhua:"", shouji:"", dizhi:"", zuixingenjinjilu: "", qianfzr: "", genjinriqi:"", genjinneirong:"", fuzeren:"", status:"", genjinriqi1:"", genjinriqi2:"", faqiriqi:"", faqiriqi1:"", faqiriqi2:"", khlx1:"", khlx2:"", khlx3:"", khzt1:"", khzt2:"", khzt3:"", khzt4:"", khzt5:"", khzt6:"", gongsimingcheng:"", gongsidizhi:"", fuzeren:"", qfkh:"", userId:"", dr:"", shoujianren:"", fasongneirong:"", faqiren:"", domains: [{ id: "", lianxiren: "", userId:"", drt:"" }], domainsXGJ:[{ id: "", userId: "", update_time: "", create_time: "", dr: "", genjinzhuangtai: "", genjinriqi: "", khId: "", genjinneirong: "" }], }, khlxlist:{}, zxgjjllist:{}, khztlist:{}, isReadOnly: false, methods: { resetFormX(formName) { this.$refs[formName].resetFields(); }, removeDomainX(itemx) { var index = this.tempKH.domainsXGJ.indexOf(itemx) if (index !== -1) { this.tempKH.domainsXGJ.splice(index, 1) } }, addLadderX() { this.tempKH.domainsXGJ.push({ id: "", userId: "", update_time: "", create_time: "", dr: "", genjinzhuangtai: "", genjinriqi: "", khId: "", genjinneirong: "" }); this.showceshiX(); }, showceshiX(){ for (let i = 0; i < this.tempKH.domains.length; i++) { console.log(this.tempKH.domains.length); this.tempKH.domains[i].userId = this.$store.getters.userId; this.tempKH.domains[i].drt = 0; }; for (let i = 0; i < this.tempKH.domainsXGJ.length; i++) { console.log(this.tempKH.domainsXGJ.length); this.tempKH.domainsXGJ[i].userId = this.$store.getters.userId; this.tempKH.domainsXGJ[i].dr = 0; this.tempKH.domainsXGJ[i].khId = this.editObj.id; } }, } } } }; </script>
頁面效果:
注:刪除方法傳的引數是 v-for = "(itemx,index)"中的itemx
參考文章:
http://element.eleme.io/#/zh-CN element官網