vue表格中实现复制某一行文本至剪切板

1、在循环体中把需要复制的文本节点标注唯一class，以下我用到couponsId

2、在循环体内添加一个输入框或者文本域，标注class，并设置透明度和脱离文档流

3、设置点击事件copyEvent，把当前循环的索引传入

<hz-table-column style="overflow: hidden">
  <textarea class="input" style="opacity: 0;position: absolute"></textarea>
  <span class="couponsId">{{ item.couponsId }}</span>
  <hz-help-tips :text="`点击复制 ${item.couponsId},${item.mobile}`" :icon-tips="false" 
    :duration="0">
    <img @click="copyEvent(index)"
         style="width: 20px;height: 20px;cursor: pointer;margin-left: 10px;"
         src="../../assets/images/copy.png" alt="">
  </hz-help-tips>
</hz-table-column>

下面是函数实现

    // 点击复制
    copyEvent(index) {
       // 拿到需要复制的节点dom
      let couponsIdDom = document.querySelectorAll(".couponsId");
       // 拿到输入框的节点dom
      let input = document.querySelectorAll('.input');
       // 将输入框的内容设置为文本的节点内容
      input[index].innerText = couponsIdDom[index].innerText
       // 选择输入框内容
      input[index].select();
       // 复制
      document.execCommand('copy');
       // 提示成功
      this.$message({
        message: '复制成功',
        type: 'success'
      });
    }