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遍历,双向数据绑定的动态表格编辑的更多相关文章

  1. 使用div 的 contenteditable属性,实现输入编辑,输入 "#" 出现下拉选择

    文章原文:https://www.cnblogs.com/yalong/p/11883585.html 演示效果如下:   具体代码可以看 https://github.com/YalongYan/e ...

  2. Vue学习之--------Vue中收集表单数据(使用v-model 实现双向数据绑定、代码实现)(2022/7/18)

    文章目录 1.Vue中实现表单数据的收集 1.1 基础知识 1.2 代码实例 1.3 测试效果 1.4 额外插一嘴 1.Vue中实现表单数据的收集 1.1 基础知识 表单中常用的标签:input(输入 ...

  3. html元素contenteditable属性如何定位光标和设置光标

    最近在山寨一款网页微信的产品,对于div用contenteditable属性做的编辑框有不少心得,希望可以帮到入坑的同学. 废话不多说了,我们先来理解一下HTML的光标对象是如何工作的,后面我会贴完整 ...

  4. angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例

    基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...

  5. contenteditable属性让div也可以当做输入框

    你知道div也可以当做输入框么? H5的全局属性contenteditable,带有contenteditable属性的div而不是input或者textarea来作为输入框(div可以根据内容自动调 ...

  6. 关于 div 的 contenteditable 使用,placeholder 和 复制图片显示并上传,按住 enter+ctrl 内容换行

    当使用文本编辑的时候,首先会使用 textarea ,但是,这个里面不能加入其它标签,也就是不能富文本化. 于是可以使用 contenteditable 就是给 div 加上该属性.就变得丰富起来.使 ...

  7. Vue中用props给data赋初始值遇到的问题解决

    Vue中用props给data赋初始值遇到的问题解决 更新时间:2018年11月27日 10:09:14   作者:yuyongyu    我要评论   这篇文章主要介绍了Vue中用props给dat ...

  8. contentEditable属性设置是否可编辑元素的内容

    在HTML5中在标签新添加了一个属性contentEditable可以设置标签内的内容是否可以编辑: 设置contenteditable="true"标签内的元素(内容)可以编辑 ...

  9. contenteditable 属性

    定义和用法 contenteditable 属性规定是否可编辑元素的内容. 语法 <element contenteditable="value"> 属性值 值 描述 ...

随机推荐

  1. No WebApplicationContext found: no ContextLoaderListener registered

    修改前运行报错:No WebApplicationContext found: no ContextLoaderListener registered? <web-app> <dis ...

  2. Spring Boot中一个Servlet主动断开连接的方法

    主动断开连接,从而返回结果给客户端,并且能够继续执行剩余代码. 对于一个HttpServletResponse类型的对象response来说,执行如下代码: response.getWriter(). ...

  3. Spring Boot学习笔记——搭建一个最简单的hello world

    使用Spring Initializer新建项目 进入https://start.spring.io/新建一个项目,并下载下来. 这就是一个最基础的spring boot项目了. 我这里是基于spri ...

  4. DB2学习笔记备忘 2018.5.9

    DB2安装的时候选择了和系统用户一致的选项,然后登陆的时候,连接的时候输入的就是计算机用户的用户名和密码. 1.3 DB2数据库体系结构 系统 一个系统表示DB2的一个安装.在一个由很多及其组成的网络 ...

  5. MMC.EXE应用程序错误 应用程序无法正常启动(0XC0000043)

    一.Windows+R 输入 regedit.exe ①打开注册表: HKEY_LOCAL_MACHINE“"SOFTWARE""Classes""C ...

  6. 最新 第一视频java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.第一视频等10家互联网公司的校招Offer,因为某些自身原因最终选择了第一视频.6.7月主要是做系统复习.项目复盘.Leet ...

  7. Sping 补充完成修改功能

    1.视图层完整示例 <form action="#" th:action="@{/update/{id}(id=${user.id})}" th:obje ...

  8. jqGrid获取选中行id集合

    $("#jqGrid").jqGrid("getGridParam","selarrrow");

  9. linux 环境下jmeter+ant+jenkins

    一.linux下的jenkins的安装: 下载链接:https://pan.baidu.com/s/1qZItZOC 密码:58da Jenkins 下载网址: http://jenkins-ci.o ...

  10. 日常工作问题解决:centos7下使用yum安装软件报yum.pid锁定

    问题描述: 在centos7下使用yum进行软件安装时报yum.pid已经被锁定,如下所示: [root@centos7-129 ~]# yum -y install dhcp 已加载插件:faste ...