实现效果如下:
在这里插入图片描述

  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();
    },

在这里插入图片描述

完事撒花!

Logo

前往低代码交流专区

更多推荐