一、單頁面中使用
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){// 雙擊復制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'})//提示},

二、封裝成組件，使用mixins
Mixins 是一種讓多個組件之間共享Vue選項的方式，適合抽取和復用多個組件的相同選項或邏輯。你可以把公共方法封裝在一個 mixin 中，然后在需要的組件中引入和使用。
Mixin 示例 (新建columnCopy.js):
1.在el-table上綁定單擊事件 @cell-click=“copyText” 或雙擊事件 @cell-dblclick=“copyText”

2.新建columnCopy.js，此文件中方法為

export const commonMethodsMixin = {methods: {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'})//提示},}
};

3.在使用此方法的組件中引入columnCopy.js文件

  import { commonMethodsMixin } from '@/utils/columnCopy';

并在export default中使用 mixins: [commonMethodsMixin],如下圖

三、 單擊copy圖標復制對應的內容到剪切板

1. 添加copy的小圖標

<span v-else><i class="el-icon-document-copy" @click="clickCopy(msg)" />{{ msg }}
</span>

2. 在methods中添加單擊復制的clickCopy方法

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

3.踩坑
添加了copy事件之后整個頁面按ctrl+c復制東西沒反應了

猜測是使用document.addEventListener(‘copy’, save)會在整個dom樹添加事件,會覆蓋dom樹原有的事件的發生,所以需要添加once參數使這個事件只生效一次

once 表示 listener 在添加之后最多只調用一次。如果是 true， listener 會在其被調用之后自動移除

clickCopy(msg) {const save = function(e) {e.clipboardData.setData('text/plain', msg)e.preventDefault() // 阻止默認行為}const once = {once: true}document.addEventListener('copy', save, once) // 添加一個copy事件,當觸發時執行一次,執行完刪除document.execCommand('copy') // 執行copy方法this.$message({ message: '復制成功', type: 'success' })
}