复制表格和文字。

Question

问题描述

项目需求要复制表格，只要复制表格，再去复制文字，文字就无法复制，只将表格再复制一次。

问题出现的环境背景及自己尝试过哪些方法

起初我以为各个组件中的复制方法可能会互相干扰，所以会出现这种如果先复制了表格，再去复制文本无效的情况，后面我将复制方法都放到一个js文件中，各个组件引入调用，还是同样的问题

相关代码

粘贴代码文本（请勿用截图）
/**

• @Description: 复制表格数据
• @author: JianTao
• @date: 2021/7/3
  */

export const copyTableData = function (_this, table, header) {

let tableColumn = ``, tableData = ``, tableCopyData = [],
copyTable = [], copyColumn = [], selection = ``;
document.execCommand('copy');
document.addEventListener("copy", (event) => {

if (event.clipboardData || event.originalEvent) {
  let clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
  // 拼接数据
  tableCopyData = table.slice(0);
  copyColumn = header.slice(0);
  tableCopyData.map(item => {
    let object = {};
    //object["area_name"] = item["area_name"];
    copyColumn.map(value => {
      let prop = value["prop"];
      object[prop] = item[prop];
    });
    copyTable.push(object);
  });

  copyTable.map((item, index) => {
    //tableData += `${index}\t`;
    for (let key in item) {
      tableData += `${item[key]}\t`
    }
    tableData += '\n';
  });


  tableColumn = copyColumn.map(item => item.label).join('\t');

  selection = `${tableColumn}\n${tableData}`;
  clipboardData.setData('text/plain', selection.toString());
  event.preventDefault();
  }
 });

_this.$message.success("复制表格成功！");

};

/**

• @Description: 复制文字
• @author: JianTao
• @date: 2021/7/3
  */

export const copyText = function (e, text, _this) {
let url = text;
 let oInput = document.createElement('input');
 oInput.value = url;
 document.body.appendChild(oInput);
 oInput.select(); // 选择对象;
document.execCommand("copy"); // 执行浏览器复制命令
 _this.$message({
  message: '复制文字成功',
  type: 'success'
 });
 oInput.remove()
};

你期待的结果是什么？实际看到的错误信息又是什么？

我期待的结果：正常复制即可（表格和文本的复制互不干扰），请各位路过的大佬指导一二