el-table实现双击单元格完成复制的功能

1.在el-table标签上添加cell-dblclick事件

<el-table :data="eventList" @cell-dblclick="celldblclick" >
      ...
</el-table>
           

• cell-dblclick

  函数有四个参数，分别是

  row, column, cell, event

  ；

• row

  就是被操作单元格所在行的所有的数据

• cloumn

  可以看到被操作单元格的property，根据property可以再row中得到该单元格的值；

• cell

  ：可到该单元格的dom结构；

• event

  可以根据其type属性值得到操作该单元格的事件名称；

2.在mehods中定义实现cell-dblclick事件对应的celldblclick方法

celldblclick(row, column, cell, event){
      if( event.type === "dblclick"){
          var save = function (e){
　　　　　　e.clipboardData.setData('text/plain',row.xxx); 
　　　　　　e.preventDefault();//阻止默认行为
    　　　　}
    　　　　document.addEventListener('copy',save);
    　　　　document.execCommand("copy");
    　　　　document.removeEventListener('copy',save);
      }
       this.$message({message: '复制成功', type:'success'}) //加提示
    },
           

• event.type === "dblclick"

  表示是双击操作

• clipboardData

  是JavaScript剪切板对象，该对象提供了3个常用方法：

clearData(): clipboardData对象从剪切板删除一种或多种数据格式（一个参数：数据类型）

getData(): clipboardData对象从剪切板获取指定格式的数据（一个参数：数据类型）

setData(): clipboardData对象赋予指定格式的数据（两个参数：数据类型，要赋予的值）

*数据类型一般为““text/plain” ”