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
}
}
vue中用div的contenteditable属性实现v-for遍历,双向数据绑定的动态表格编辑的更多相关文章
- 使用div 的 contenteditable属性,实现输入编辑,输入 "#" 出现下拉选择
文章原文:https://www.cnblogs.com/yalong/p/11883585.html 演示效果如下: 具体代码可以看 https://github.com/YalongYan/e ...
- Vue学习之--------Vue中收集表单数据(使用v-model 实现双向数据绑定、代码实现)(2022/7/18)
文章目录 1.Vue中实现表单数据的收集 1.1 基础知识 1.2 代码实例 1.3 测试效果 1.4 额外插一嘴 1.Vue中实现表单数据的收集 1.1 基础知识 表单中常用的标签:input(输入 ...
- html元素contenteditable属性如何定位光标和设置光标
最近在山寨一款网页微信的产品,对于div用contenteditable属性做的编辑框有不少心得,希望可以帮到入坑的同学. 废话不多说了,我们先来理解一下HTML的光标对象是如何工作的,后面我会贴完整 ...
- angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例
基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...
- contenteditable属性让div也可以当做输入框
你知道div也可以当做输入框么? H5的全局属性contenteditable,带有contenteditable属性的div而不是input或者textarea来作为输入框(div可以根据内容自动调 ...
- 关于 div 的 contenteditable 使用,placeholder 和 复制图片显示并上传,按住 enter+ctrl 内容换行
当使用文本编辑的时候,首先会使用 textarea ,但是,这个里面不能加入其它标签,也就是不能富文本化. 于是可以使用 contenteditable 就是给 div 加上该属性.就变得丰富起来.使 ...
- Vue中用props给data赋初始值遇到的问题解决
Vue中用props给data赋初始值遇到的问题解决 更新时间:2018年11月27日 10:09:14 作者:yuyongyu 我要评论 这篇文章主要介绍了Vue中用props给dat ...
- contentEditable属性设置是否可编辑元素的内容
在HTML5中在标签新添加了一个属性contentEditable可以设置标签内的内容是否可以编辑: 设置contenteditable="true"标签内的元素(内容)可以编辑 ...
- contenteditable 属性
定义和用法 contenteditable 属性规定是否可编辑元素的内容. 语法 <element contenteditable="value"> 属性值 值 描述 ...
随机推荐
- request cluster ID mismatch
删除了etcd集群所有节点中的--data_dir的内容 [root@node3 ~]# cd /var/lib/etcd/ [root@node3 etcd]# ls member [root@no ...
- C++: Unresolved external symbol __imp__fscanf
VS2019中遇到错误error LNK2001: unresolved external symbol __imp__fscanf 解决办法:链接legacy_stdio_definitions.l ...
- c#操作json数据使用newtonsoft.json
开源项目提供的一个读取示例 using System; using System.Collections.Generic; using System.IO; using System.Linq; us ...
- 2.app自动化测试--adb常用API
adb常用API Driver.current_activity 获取当前运行应用界面的启动名 Driver.current_package 获取当前运行应用的包名 Driver.contexts ...
- blender-编译源码
1. 获得源码,目前是以 2.8 版本为例子 https://www.blender.org/download/ 上,可以直接下面源码 2. 解压,在blender-2.80 目录下,运行 mak ...
- mycat入门安装及demo实现
下载: https://github.com/MyCATApache/Mycat-download 安装: 直接解压 运行命令: linux: ./mycat start 启动 ./myca ...
- 数据库数据生成Excel表格(多用在导出数据)
最近在项目开发中遇到这样一个需求,用户聊天模块产品要求记录用户聊天信息,但只保存当天的,每天都要刷新清空数据,但聊天记录要以Excel的形式打印出来,于是就引出了将数据库的数据导出成Excel表格的需 ...
- SecureCRT SSH 失败 Key exchange failed 解决方法
背景:SecureCRT 的SSH正常使用过程中,突然出现: Key exchange failed. No compatible hostkey.The server supports these ...
- 利用Python进行数据分析 第4章 IPython的安装与使用简述
本篇开始,结合前面所学的Python基础,开始进行实战学习.学习书目为<利用Python进行数据分析>韦斯-麦金尼 著. 之前跳过本书的前述基础部分(因为跟之前所学的<Python基 ...
- Django查找数据库objects.filter() 排序order_by Q()与或非 F()属性之间比较 聚合函数的用法
条件选取QuerySet的时候,filter表示=参数可以写查询条件,exclude表示!=,querySet.distinct() 去重复(除了get返回值都是QuerySet,可以继续调用所有函数 ...