vue中el-table单元格复制功能

~张小八~

已于 2024-07-11 16:24:53 修改

阅读量1.7k

点赞数 6

CC 4.0 BY-SA版权

于 2024-07-10 17:34:15 首次发布

本文链接：https://blog.csdn.net/qq_24441205/article/details/140329697

一、单页面中使用
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