Element-Ui的table组件实现双击单元格复制内容到剪切板

1.在el-table中添加双击事件

<el-table
      :data="tableData"
      @cell-dblclick="copyText"
      border
    >
    .....
<el-table>

@cell-dblclick 事件的处理函数会接收到四个参数：

• row：被双击的单元格所在的行的数据对象。

• column：被双击的单元格所在的列的定义对象。

• cell：被双击的单元格的 DOM 对象。

• event：原生的双击事件对象。

 

copyText(row, column, cell, event) {

// 双击复制

const textToCopy = event.target.innerText;

navigator.clipboard.writeText(textToCopy)

.then(() => {

this.$message({ message: '复制成功', type: 'success' }); // 提示

})

.catch((error) => {

console.error('复制失败:', error);

});

},

navigator.clipboard.writeText 是一个用于将文本复制到剪贴板的方法。这个方法接收一个字符串作为参数，这个字符串就是你想要复制到剪贴板的文本。

这个方法返回一个 Promise，当文本成功复制到剪贴板时，这个 Promise 会被解决；如果复制失败，这个 Promise 会被拒绝，并传递一个错误对象。