vue中用div的contenteditable属性实现v-for遍历,双向数据绑定的动态表格编辑
作者:互联网
1.HTML部分
<tr v-for="(item,index) in customerVisitList2" :key="index"> <td class="customerName"><div class="divEdit" contenteditable="true" @blur="blurFunc($event,2,index,'customerName')">{{customerVisitList2[index].customerName}}</div></td> <td class="visitTime"><div class="divEdit" contenteditable="true" @blur="blurFunc($event,2,index,'visitTime')">{{customerVisitList2[index].visitTime}}</div></td> <td class="visitDesc"><div class="divEdit" contenteditable="true" @blur="blurFunc($event,2,index,'visitDesc')">{{customerVisitList2[index].visitDesc}}</div></td> <td class="operation textAlignCenter"><div class="divEdit"><span class="iconfont icon-shanchu hoverStyle" @click="removeCustomerVisit(2,index)"></span></div></td> </tr>
2.JS部分
blurFunc(e,type,index,name){
//失去焦点实现双向数据绑定 let content = e.target.innerText e.target.innerText = '' if(type === 1){ this.customerVisitList1[index][name] = content }else{ this.customerVisitList2[index][name] = content } e.target.innerText = content }, addCustomerVisit(type){
//添加行 let index if(type === 1){ this.customerVisitList1.push({customerType: 'oldCustomer',customerName:'',visitTime:'',visitDesc:''}) }else{ this.customerVisitList2.push({customerType: 'newCustomer',customerName:'',visitTime:'',visitDesc:''}) } }, removeCustomerVisit(type,index){ //移除行 if(type === 1){ console.log(this.customerVisitList1) this.customerVisitList1.splice(index,1) }else{ console.log(this.customerVisitList2) this.customerVisitList2.splice(index,1) } },
3.css部分(stylus)
.divEdit{ outline: none } .textAlignCenter{ text-align: center } .listTable{ padding 4px 10px 4px 4px font-size 11px width 100% td,th{ padding-left 4px line-height 24px width 100% } .customerName{ width 150px } .visitTime{ width 120px } .visitDesc{ width auto } .operation{ width 34px } }
标签:index,vue,contenteditable,customerName,content,width,div,customerVisitList2,type 来源: https://www.cnblogs.com/cx709452428/p/10600558.html