其他分享
首页 > 其他分享> > vue中用div的contenteditable属性实现v-for遍历,双向数据绑定的动态表格编辑

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