vue中el-table單元格復(fù)制功能實(shí)現(xiàn)

更新時(shí)間：2024年07月11日 11:55:34 作者：~張小八~

這篇文章主要介紹了vue中el-table單元格復(fù)制功能實(shí)現(xiàn),本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

一、單頁(yè)面中使用

1.在el-table上綁定單擊事件 @cell-click=“copyText” 或雙擊事件 @cell-dblclick=“copyText”

注：cell-dblclick函數(shù)有四個(gè)參數(shù)，分別是row, column, cell, event；

row：可看到被其操作單元格所在行的所有的數(shù)據(jù)；

cloumn：可以看到被其操作單元格的property，根據(jù)property可以再row中得到該單元格的值；

cell：可看到該單元格的dom結(jié)構(gòu)；

event：事件觸發(fā)時(shí)的所有參數(shù)；

2.在methods中寫(xiě)如方法即可

copyText(row, column, cell, event){
      // 雙擊復(fù)制
      let save = function (e){
        e.clipboardData.setData('text/plain',event.target.innerText);
        e.preventDefault();  //阻止默認(rèn)行為
      }
      document.addEventListener('copy',save);//添加一個(gè)copy事件
      document.execCommand("copy");//執(zhí)行copy方法
      this.$message({message: '復(fù)制成功', type:'success'})//提示
    },

二、封裝成組件，使用mixins

Mixins 是一種讓多個(gè)組件之間共享Vue選項(xiàng)的方式，適合抽取和復(fù)用多個(gè)組件的相同選項(xiàng)或邏輯。你可以把公共方法封裝在一個(gè) 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){
      // 雙擊復(fù)制
      let save = function (e){
        e.clipboardData.setData('text/plain',event.target.innerText);
        e.preventDefault();  //阻止默認(rèn)行為
      }
      document.addEventListener('copy',save);//添加一個(gè)copy事件
      document.execCommand("copy");//執(zhí)行copy方法
      this.$message({message: '復(fù)制成功', type:'success'})//提示
    },
  }
};

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

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

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

三、單擊copy圖標(biāo)復(fù)制對(duì)應(yīng)的內(nèi)容到剪切板

1.添加copy的小圖標(biāo)

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

2.在methods中添加單擊復(fù)制的clickCopy方法

clickCopy(msg) {
  const save = function(e) {
    e.clipboardData.setData('text/plain', msg)
    e.preventDefault() // 阻止默認(rèn)行為
  }
  document.addEventListener('copy', save) // 添加一個(gè)copy事件
  document.execCommand('copy') // 執(zhí)行copy方法
  this.$message({ message: '復(fù)制成功', type: 'success' })
}

3.踩坑
添加了copy事件之后整個(gè)頁(yè)面按ctrl+c復(fù)制東西沒(méi)反應(yīng)了

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

once 表示 listener 在添加之后最多只調(diào)用一次。如果是 true， listener 會(huì)在其被調(diào)用之后自動(dòng)移除

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

到此這篇關(guān)于vue中el-table單元格復(fù)制功能的文章就介紹到這了,更多相關(guān)vue el-table單元格復(fù)制內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: