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中写如方法即可

c 复制代码
  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,此文件中方法为

c 复制代码
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文件

c 复制代码
  import { commonMethodsMixin } from '@/utils/columnCopy';

并在export default中使用 mixins: [commonMethodsMixin],如下图

三、 单击copy图标复制对应的内容到剪切板

  1. 添加copy的小图标
c 复制代码
<span v-else>
  <i class="el-icon-document-copy" @click="clickCopy(msg)" />
  {{ msg }}
</span>
  1. 在methods中添加单击复制的clickCopy方法
c 复制代码
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 会在其被调用之后自动移除

c 复制代码
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' })
}
相关推荐
wow_DG20 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(九):Vue2 性能优化
javascript·vue.js·性能优化
一 乐20 小时前
美食分享|基于Springboot和vue的地方美食分享网站系统设计与实现(源码+数据库+文档)
java·vue.js·spring boot·论文·毕设·美食·地方美食分享网站系统
IT_陈寒21 小时前
Spring Boot 3.2 新特性全解析:这5个性能优化点让你的应用提速50%!
前端·人工智能·后端
携欢21 小时前
PortSwigger靶场之Stored DOM XSS通关秘籍
前端·xss
GDAL21 小时前
Knockout-ES5 入门教程
javascript·knockout
正义的大古21 小时前
OpenLayers数据源集成 -- 章节八:天地图集成详解
开发语言·javascript·ecmascript·openlayers
LDM>W<21 小时前
Electron下载失败
前端·javascript·electron
EndingCoder21 小时前
Electron 新特性:2025 版本更新解读
前端·javascript·缓存·electron·前端框架·node.js·桌面端
BillKu21 小时前
Vue3 中使用 DOMPurify 对渲染动态 HTML 进行安全净化处理
前端·安全·html
子兮曰1 天前
🔥深度解析:Nginx目录浏览美化与功能增强实战指南
前端·javascript·nginx