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
            }
        }

 

转载于:https://www.cnblogs.com/cx709452428/p/10600558.html