vue中实现复制el-table中的内容到剪切板

实现效果如下：

1. element-ui的el-table实现双击复制单元格的内容到剪切板

• 在el-table中添加双击响应事件

<el-table
      :data="tableData"
      @cell-dblclick="copyText"
      border
    >
    //cell-dblclick函数有四个参数，分别是row, column, cell, event；
//row：可看到被操作单元格所在行的所有的数据；
//cloumn：可以看到被操作单元格的property，根据property可以再row中得到该单元格的值；
//cell：可看到该单元格的dom结构；
//event：事件触发时的所有参数；
    .....
<el-table>

• 在methods中添加双击绑定的copyText方法 （这个是当前页面table里的所有内容双击均可实现复制）

copyText(row, column, cell, event){
  // 双击复制
  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'})//提示
}

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

• 添加copy的小图标

 <el-table-column label="邀请码" prop="invitationCode" align="center">
    <template #default="{ row }">
       <el-link :underline="false">
                {{ row.invitationCode }}
       </el-link>
       <i v-if="row.invitationCode"
          style="margin-left: 4px; cursor: pointer"
          class="el-icon-document-copy"
          @click="copyBtn(row.invitationCode)"></i>
   </template>
</el-table-column>

• 在methods中添加单击复制的clickCopy方法 （这个是单击实现复制，只针对于单个el-table-column）

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' })
}

但是上面这样 会出现一个小Bug 会导致当前页面无法手动进行其他文字的复制操作
可以将 clickCopy 事件修改一下：

     <el-table-column prop="accountUrl" label="银联登录链接" align="center">
        <template #default="{ row }">
          <el-button type="primary" round v-if="row.accountUrl"
            @click="copyBtn(row.accountUrl)" plain size="mini">点击复制</el-button>
        </template>
      </el-table-column>

    //复制
    clickCopy(msg) {
      // 创建输入框元素
      let oInput = document.createElement("input");
      // 将想要复制的值
      oInput.value = msg;
      // 页面底部追加输入框
      document.body.appendChild(oInput);
      // 选中输入框
      oInput.select();
      // 执行浏览器复制命令
      document.execCommand("Copy");
      // 弹出复制成功信息
      this.$message.success("复制成功");
      // 复制后移除输入框
      oInput.remove();
    },

完事撒花！