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>

2. 在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' })
}