技术标签: 代码 表格可编辑 elementUI vue 前端 理论
浏览了很多智慧的结晶,要么操作傻瓜,要么过于复杂(不必要的),还有的虽然实现了操作,但逻辑上让我难受。所以自己实操成功后整合一篇。
本篇博客涉及到的点有:(后面详解)
思路是:给每一个需要可操作的单元格内容增加各自对应的标志位flag,通过变flag的值为true或false,判断显示文字内容或input内容。
下面详解:
第一步:从父组件接收表格内容(如果是单页面操作此步省略)
props:{
tab2list:Array,
},
第二步:data中定义一个空数组,准备赋值表格内容,页面绑定这个空数组(也可以直接绑定tab2list,那就省略这一步,后面所有的tableData替换为tab2list即可)
data() {
return {
tableData:[],//用来展示
};
},
第三步:编写代码。首先是template部分。
<el-table
max-height="650"
:data="tableData"
style="width: 100%">
<el-table-column
:show-overflow-tooltip="true"
align="center"
prop="enddate"
label="日期"
sortable
width="250">
<template slot-scope="scope">
<div @dblclick="changeEnddate(scope.$index,scope.row)" style="height: 40px;line-height: 40px;">
<span v-show="!scope.row.edit_enddate">{
{scope.row.enddate}}</span>
<!--:autofocus="true"-->
<el-input :ref='"enddateinput"+scope.$index'
@blur="enddateblur(scope.$index,scope.row)"
@keyup.enter.native="$event.target.blur"
clearable
v-show="scope.row.edit_enddate"
size="mini"
v-model="scope.row.enddate"
placeholder="请输入内容"></el-input>
</div>
</template>
</el-table-column>
<el-table-column
:show-overflow-tooltip="true"
align="center"
label="数据"
width="230">
<template slot-scope="scope">
<div @dblclick="changeValue(scope.$index,scope.row)" style="height: 40px;line-height: 40px;">
<span v-show="!scope.row.edit_value">{
{scope.row.value}}</span>
<!--:autofocus="true"-->
<el-input :ref='"valueinput"+scope.$index'
@blur="valueblur(scope.$index,scope.row)"
@keyup.enter.native="$event.target.blur"
clearable
v-show="scope.row.edit_value"
size="mini"
v-model="scope.row.value"
placeholder="请输入内容"></el-input>
</div>
</template>
</el-table-column>
</el-table>
然后是各个方法。请注意注释。
changeEnddate(index,rowdata){
this.tableData[index].edit_enddate = !this.tableData[index].edit_enddate;//直接加key
this.tableData = [...this.tableData];//因为我table绑定的表格数据是后接过来赋值的,所以需要这步操作,如果没有1、2步骤这个可以不加。后面也一样
setTimeout( ()=> {//定时器是为了避免没有获取到dom的情况报错,所以象征性的给1毫秒让他缓冲
this.$refs['enddateinput' + index].focus()
//el-input的autofocus失效,所以用这个方法。对应在template里的refs绑定值
}, 1)
},
enddateblur(index,rowdata){
//enter方法和blur方法冲突的解决办法,就是在让他们触发同一个方法。具体看template里是怎么写的
this.tableData[index].edit_enddate = !this.tableData[index].edit_enddate;
this.tableData = [...this.tableData];
},
changeValue(index,rowdata){
this.tableData[index].edit_value = !this.tableData[index].edit_value;
this.tableData = [...this.tableData];
setTimeout(() => {
this.$refs['valueinput' + index].focus()
}, 1)
},
valueblur(index,rowdata){
this.tableData[index].edit_value = !this.tableData[index].edit_value;
this.tableData = [...this.tableData];
},
注意:
1、el-table有一个双击单元格的方法 cell-dblclick ,也可以通过这个方法进行单元格操作,如果不是所有的列都需要触发事件,可以通过column.label(列名)判断某一列是否触发,下面举例。
editCell(row, column, cell, event){
// console.log(row,'row');当前行的所有键值内容
// console.log(column,'column');当前列的信息
// console.log(cell,'cell');单元格信息
// console.log(event,'event');事件信息
//一般就用到前两个
if(column.label == '用户'){
row.edit_enddate = !row.edit_enddate;
}
if(column.label == '时间'){
row.edit_value = !row.edit_value;
}
}
2、这也是一种可以使el-table可以编辑的方案,极不推荐,纯原生操作,下面我说一下缺点。当然你想拿来练手我不拦你。
let columnContent = "";
if(column.label == '时间'){
columnContent = row.enddate;
}
if(column.label == '内容'){
columnContent = row.value;
}
if (column.label != "") {
event.target.innerHTML = "";
let cellInput = document.createElement("input");
cellInput.value = columnContent;
cellInput.setAttribute("type", "text");
cellInput.setAttribute("autofocus", "autofocus");
// cellInput.classList.add("add-input");
cellInput.style.width = "80%";
cellInput.style.height = "35px";
cellInput.style.outline = "none";
cell.appendChild(cellInput);
cellInput.onblur = ()=> {
cell.removeChild(cellInput);
event.target.innerHTML = cellInput.value;
// console.log(this.tableData,'tabledata');
this.$emit('editCell',this.tableData)
if(column.label == '时间'){
row.enddate = cellInput.value;
}
if(column.label == '内容'){
row.value = cellInput.value;
}
};
}
有任何问题欢迎下方留言或者私信,看到会回复。实测可用~
文章浏览阅读389次。ajax跨域ajax跨域取数据(利用可以跨域加载js的原理 functioncallback(){ }这是需要返回这样一个js函数)ajax数据类型使用jsonp :如 ajax{ url:..._一级域名 的cookie ajax 请求二级域名时获取cookie
文章浏览阅读1.3k次,点赞2次,收藏2次。在上一章中,我们分析了一个富文本编辑器需要有哪些模块组成。在本文中,让我们从零开始,去实现自定义的富文本编辑器。注:本文篇幅较长,从失败的方案开始分析再到成功实现自定义富文本编辑器,真正的从0到1。— 完整代码太多, 文章只分析核心代码,需要源码请到代码仓库作为基础的富文本编辑器实现,我们需要专注于简单且重要的部分,所以目前只需定义标题、文本对齐、文本粗体、文本斜体、下划线、文本删除线、文本缩进符等富文本基础功能。//定义默认颜色...///用户自定义颜色解析。_flutter 富文本
文章浏览阅读30次。近年来,Linux社区开发了一种新的异步IO框架,称为io_uring。io_uring通过提供高度可扩展和高性能的异步IO接口,有效地解决了传统异步IO框架中的一些性能瓶颈和限制。io_uring已经成为许多高性能应用程序的首选异步IO框架,为开发者提供了更好的IO处理能力。io_uring 架构是建立在Linux内核之上的,它使用了一组新的系统调用和内核机制,以提供高性能和低延迟的异步IO操作。io_uring的设计目标是提供一种简单而强大的接口,使得开发者可以轻松地利用异步IO的优势。
文章浏览阅读2.5w次,点赞204次,收藏1.8k次。期末计网满绩计划教材:计算机网络(第七版)谢希仁版目录1. 概述2. 物理层3. 数据链路层(次重点)4. 网络层(重点)5. 运输层(重点)6. 应用层7. 网络安全最后1. 概述第一章概述2. 物理层第二章物理层3. 数据链路层(次重点)第三章数据链路层4. 网络层(重点)第四章网络层5. 运输层(重点)第五章运输层6. 应用层第六章应用层7. 网络安全稍后发布最后小生凡一,期待你的关注。..._计算机网络期末复习题
文章浏览阅读6k次,点赞2次,收藏18次。AA记录: 将域名指向一个IPv4地址(例如:100.100.100.100),需要增加A记录NSNS记录: 域名解析服务器记录,如果要将子域名指定某个域名服务器来解析,需要设置NS记录SOASOA记录: SOA叫做起始授权机构记录,NS用于标识多台域名解析服务器,SOA记录用于在众多NS记录中标记哪一台是主服务器MXMX记录: 建立电子邮箱服务,将指向邮件服务器地址,需要设置MX记录。建立邮箱时,一般会根据邮箱服务商提供的MX记录填写此记录TXTTXT记录: 可任意填写,可为空。一_a记录
文章浏览阅读695次。SpringBoot项目引入外部jar包_springboot引入外部jar包
文章浏览阅读493次。序列化是指将结构化对象转化为字节流以便在网络上传输或者写到磁盘上进行永久存储的过程,反序列化是指将字节流转回结构化对象的逆过程序列化用于分布式处理的两大领域,进程间通信和永久存储。在Hadoop中,系统中多个节点上进程间的通信是通过“远程过程调用”(remote procedure call, RPC)实现的。RPC将消息序列化成二进制流后发送到远程节点,远程节点接着将二进制流饭序列化为原始..._hadoop final
文章浏览阅读5.7k次,点赞3次,收藏6次。在开发过程中使用tinymce富文本编辑器,发现他的图片上传默认是上传网络图片那么如何实现上传本地图片呢,上官网逛一圈,发现其实很简单在官网中找到下面这张图片,并且有相关的例子这里,我使用了自定义函数images_upload_handler (blobInfo, success, failure) { const url = 'uploadImg' ..._tinymce images_upload_handler
文章浏览阅读2.6k次,点赞5次,收藏14次。上一篇我们说到《拜托!面试请不要再问我Spring Cloud底层原理》,我们大概了解了Spring Cloud中各个组件的作用以及其背后实现的原理。但是俗话说得好,实践是检验真理的唯一标准。这一篇我们动手实践一下,即搭建一个包含订单服务、库存服务、仓库服务、积分服务的微服务架构项目。一、项目的工程结构工程名 服务名 端口号 shop-parent 父工程 ..._spring cloud +sql springcloud底层组件
文章浏览阅读819次。Ubuntu16.04下编译py-faster-rcnn全过程,在本机上试验成功,亲测有效,清晰总结踩过的坑,常见问题及解决方案一并给出_py-fast
文章浏览阅读89次。0-- print A/B/C/D rather than detail score:score = float(input('please input your score: '))if score>=90: print('A')elif 80<=score<90: print('B')elif 60<=score<80: print('C'...
文章浏览阅读2.2k次。原型:int mkdir (const char *filename, mode_t mode)返回0表示成功,返回-1表述出错。使用该函数需要包含头文件sys/stat.hmode 表示新目录的权限,可以取以下值:S_IRUSRS_IREADRead permission bit for the owner of the file. On many systems this bit is 040..._linux mkdir 头文件