首页 > 其他 > 详细

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

时间:2019-03-26 15:49:49      阅读:695      评论:0      收藏:0      [点我收藏+]

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

 

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

原文:https://www.cnblogs.com/cx709452428/p/10600558.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!