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);
        document.execCommand("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);
        document.execCommand("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) 
  document.execCommand('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) 
  document.execCommand('copy') 
  this.$message({ message: '复制成功', type: 'success' })
}