vue中el-table单元格复制功能

一、单页面中使用
1.在el-table上绑定单击事件 @cell-click=“copyText” 或双击事件 @cell-dblclick=“copyText”
在这里插入图片描述
注:cell-dblclick函数有四个参数,分别是row, column, cell, event;

row:可看到被其操作单元格所在行的所有的数据;

cloumn:可以看到被其操作单元格的property,根据property可以再row中得到该单元格的值;

cell:可看到该单元格的dom结构;

event:事件触发时的所有参数;

2.在methods中写如方法即可

  copyText(row, column, cell, event){console.log('****column***',column)if(column.label!='操作'){// 双击复制let save = function (e){e.clipboardData.setData('text/plain',event.target.innerText);e.preventDefault();  //阻止默认行为}document.addEventListener('copy',save);//添加一个copy事件document.execCommand("copy");//执行copy方法this.$message({message: '复制成功', type:'success'})//提示}else {return}},

二、封装成组件,使用mixins
Mixins 是一种让多个组件之间共享Vue选项的方式,适合抽取和复用多个组件的相同选项或逻辑。你可以把公共方法封装在一个 mixin 中,然后在需要的组件中引入和使用。
Mixin 示例 (新建columnCopy.js):
1.在el-table上绑定单击事件 @cell-click=“copyText” 或双击事件 @cell-dblclick=“copyText”
在这里插入图片描述
2.新建columnCopy.js,此文件中方法为

export const commonMethodsMixin = {methods: {copyText(row, column, cell, event){console.log('****column***',column)if(column.label!='操作'){// 双击复制let save = function (e){e.clipboardData.setData('text/plain',event.target.innerText);e.preventDefault();  //阻止默认行为}document.addEventListener('copy',save);//添加一个copy事件document.execCommand("copy");//执行copy方法this.$message({message: '复制成功', type:'success'})//提示}else {return}},}
};

3.在使用此方法的组件中引入columnCopy.js文件

  import { commonMethodsMixin } from '@/utils/columnCopy';

并在export default中使用 mixins: [commonMethodsMixin],如下图
在这里插入图片描述
三、 单击copy图标复制对应的内容到剪切板

  1. 添加copy的小图标
<span v-else><i class="el-icon-document-copy" @click="clickCopy(msg)" />{{ msg }}
</span>
  1. 在methods中添加单击复制的clickCopy方法
clickCopy(msg) {const save = function(e) {e.clipboardData.setData('text/plain', msg)e.preventDefault() // 阻止默认行为}document.addEventListener('copy', save) // 添加一个copy事件document.execCommand('copy') // 执行copy方法this.$message({ message: '复制成功', type: 'success' })
}

3.踩坑
添加了copy事件之后整个页面按ctrl+c复制东西没反应了

猜测是使用document.addEventListener(‘copy’, save)会在整个dom树添加事件,会覆盖dom树原有的事件的发生,所以需要添加once参数使这个事件只生效一次

once 表示 listener 在添加之后最多只调用一次。如果是 true, listener 会在其被调用之后自动移除

clickCopy(msg) {const save = function(e) {e.clipboardData.setData('text/plain', msg)e.preventDefault() // 阻止默认行为}const once = {once: true}document.addEventListener('copy', save, once) // 添加一个copy事件,当触发时执行一次,执行完删除document.execCommand('copy') // 执行copy方法this.$message({ message: '复制成功', type: 'success' })
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/377882.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CentOS7安装部署git和gitlab

安装Git 在Linux系统中是需要编译源码的&#xff0c;首先下载所需要的依赖&#xff1a; yum install -y curl-devel expat-devel gettext-devel openssl-devel zlib-devel gcc perl-ExtUtils-MakeMaker方法一 下载&#xff1a; wget https://mirrors.edge.kernel.org/pub/s…

c++ primer plus 第16章string 类和标准模板库,16.1.3 使用字符串

c primer plus 第16章string 类和标准模板库,16.1.3 使用字符串 c primer plus 第16章string 类和标准模板库,16.1.3 使用字符串 文章目录 c primer plus 第16章string 类和标准模板库,16.1.3 使用字符串16.1.3 使用字符串程序清单16.3 hangman.cpp 16.1.3 使用字符串 现在&a…

opencv学习:图像视频的读取截取部分图像数据颜色通道提取合并颜色通道边界填充数值计算图像融合

一、计算机眼中的图像 1.图像操作 构成像素点的数字在0~255之间 RGB叫做图像的颜色通道 h500&#xff0c;w500 2.灰度图像 3. 彩色图像 4.图像的读取 5.视频的读取 cv2.VideoCapture()--在OpenCV中&#xff0c;可以使用VideoCapture来读取视频文件&#xff0c;或是摄像头数…

解决网页中的 video 标签在移动端浏览器(如百度访问网页)视频脱离文档流播放问题

问题现象 部分浏览器视频脱离文档流&#xff0c;滚动时&#xff0c;视频是悬浮出来&#xff0c;在顶部播放 解决方案 添加下列属性&#xff0c;可解决大部分浏览器的脱离文档流的问题 <videowebkit-playsinline""playsInlinex5-playsinlinet7-video-player-t…

HTML5+CSS3小实例:纯CSS实现奥运五环

实例:纯CSS实现奥运五环 技术栈:HTML+CSS 效果: 源码: 【HTML】 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-sca…

1.30、基于卷积神经网络的手写数字旋转角度预测(matlab)

1、卷积神经网络的手写数字旋转角度预测原理及流程 基于卷积神经网络的手写数字旋转角度预测是一个常见的计算机视觉问题。在这种情况下&#xff0c;我们可以通过构建一个卷积神经网络&#xff08;Convolutional Neural Network&#xff0c;CNN&#xff09;来实现该任务。以下…

数学建模·Topsis优劣解距离法

Topsis优劣解 一种新的评价方法&#xff0c;特点就是利用原有数据&#xff0c;客观性强。 相较于模糊评价和层次评价 更加客观&#xff0c;充分利用原有数据&#xff0c;精确反映方案差距 基本原理 离最优解最近&#xff0c;离最劣解越远 具体步骤 正向化 代码与原理与熵权…

Spring Boot中@Async注解的使用及原理 + 常见问题及解决方案

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…

阿里云GPU服务器安装ComfyUI

连接到GPU服务器: 使用SSH客户端(如PuTTY或终端)连接到你的服务器。命令通常是: ssh usernameserver_ip安装依赖: 确保Python和Git已安装。在大多数Linux系统上,可以这样安装: sudo apt update sudo apt install python3 python3-pip git克隆ComfyUI仓库: 这步骤会下载ComfyUI的…

Jetson-AGX-Orin 非docker环境源码编译安装CyberRT

Jetson-AGX-Orin 非docker环境源码编译安装CyberRT 1、安装依赖 sudo apt update sudo apt-get install g gdb gcc cmake sudo apt install libpoco-dev uuid-dev libncurses5-dev python3-dev python3-pip python3 -m pip install protobuf3.14.02、下载CyberRT源码 git cl…

C语言 ——— 大/小端存储模式的介绍及判断

目录 何为大端小端 如何测试当前机器是大端还是小端 编写代码&#xff0c;判断当前机器的字节序 何为大端小端 大端字节序存储模式&#xff1a;数据的低位字节的内容 存放在 内存的高地址 中&#xff0c;数据的高位字节的内容 保存在 内存的低地址 中 小端字节序存储模式&am…

【系统架构设计师】九、软件工程(面向对象方法|逆向工程)

目录 六、面向对象方法 6.1 基本概念 6.2 面向对象的分析 6.2.1 用例关系 6.2.2 类之间的关系 6.3 面向对象的设计 6.4 面向对象设计原则与设计模式 6.5 面向对象软件的测试 七、逆向工程 历年真题练习 六、面向对象方法 面向对象的分析方法 (Object-Oriented Analys…

Vue从零到实战

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小…

《后端程序员 · Nacos 常见配置 · 第一弹》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…

showdoc sqli to rce漏洞利用思考

漏洞版本 sqli <3.2.5 phar 反序列化 <3.2.4 漏洞分析 前台sqli 补丁 https://github.com/star7th/showdoc/commit/84fc28d07c5dfc894f5fbc6e8c42efd13c976fda 补丁对比发现&#xff0c;在server/Application/Api/Controller/ItemController.class.php中将$item_id变量…

海外ASO:iOS与谷歌优化的相同点和区别

海外ASO是针对iOS的App Store和谷歌的Google Play这两个主要海外应用商店进行的优化过程&#xff0c;两个不同的平台需要采取不同的优化策略&#xff0c;以下是对iOS优化和谷歌优化的详细解析&#xff1a; 一、iOS优化&#xff08;App Store&#xff09; 1、关键词覆盖 选择关…

服务器数据恢复—raid5阵列热备盘同步失败导致lun不可用的数据恢复案例

服务器存储数据恢复环境&#xff1a; 华为S5300存储中有一组由16块FC硬盘组建的RAID5磁盘阵列&#xff08;包含一块热备盘&#xff09;。 服务器存储故障&#xff1a; 该存储中的RAID5阵列1块硬盘由于未知原因离线&#xff0c;热备盘上线并开始同步数据&#xff0c;数据同步到…

starRocks搭建

公司要使用新的大数据架构&#xff0c;打算用国产代替国外的大数据平台。所以这里我就纠结用doris还是starrocks&#xff0c;如果用doris&#xff0c;因为是开源的&#xff0c;以后就可以直接用云厂商的。如果用starrocks就得自己搭建&#xff0c;但是以后肯定会商业化&#xf…

【linux】服务器ubuntu安装cuda11.0、cuDNN教程,简单易懂,包教包会

【linux】服务器ubuntu安装cuda11.0、cuDNN教程&#xff0c;简单易懂&#xff0c;包教包会 【创作不易&#xff0c;求点赞关注收藏】 文章目录 【linux】服务器ubuntu安装cuda11.0、cuDNN教程&#xff0c;简单易懂&#xff0c;包教包会一、版本情况介绍二、安装cuda1、到官网…

最新PHP自助商城源码,彩虹商城源码

演示效果图 后台效果图 运行环境&#xff1a; Nginx 1.22.1 Mysql5.7 PHP7.4 直接访问域名即可安装 彩虹自助下单系统二次开发 拥有供货商系统 多余模板删除 保留一套商城,两套发卡 源码无后门隐患 已知存在的BUG修复 彩虹商城源码&#xff1a;下载 密码:chsc 免责声明&…