vue2/3 elementUI/table 从excel复制粘贴到表格，从表格复制粘贴到excel

在Vue中实现从Excel复制粘贴到表格（Vue2/3 + ElementUI），以及从表格复制粘贴到Excel的功能，可以使用以下方法：

1. 从Excel复制粘贴到表格：

   监听粘贴事件，并解析粘贴的内容以提取表格数据。

2. 从表格复制粘贴到Excel：

   使用 Clipboard.js 库或原生 navigator.clipboard API 来实现复制到剪贴板的功能。

以下是实现这些功能的示例代码：

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      @paste="handlePaste"
      ref="tableRef"
    >
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-button @click="copyTableToClipboard">复制表格数据到Excel</el-button>
  </div>
</template>
 
<script>
import { ref } from 'vue';
import { useClipboard } from '@vueuse/core';
 
export default {
  setup() {
    const tableData = ref([
      { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
      // ...更多数据
    ]);
 
    // 处理粘贴事件
    const handlePaste = (event) => {
      // 解析粘贴的内容
      const clipboardData = event.clipboardData || window.clipboardData;
      const pastedData = clipboardData.getData('Text');
      // 解析pastedData并更新tableData
      // ...
    };
 
    // 使用vueuse的useClipboard来管理剪贴板
    const { copy, isSupported } = useClipboard();
 
    // 复制表格数据到剪贴板
    const copyTableToClipboard = () => {
      if (isSupported) {
        const tableHtml = document.querySelector('el-table').outerHTML;
        copy(tableHtml);
        alert('表格数据已复制到剪贴板');
      } else {
        alert('复制到剪贴板不受支持');
      }
    };
 
    return {
      tableData,
      handlePaste,
      copyTableToClipboard
    };
  },
};
</script>

注意：

1. 解析从Excel粘贴过来的文本内容时，可能需要使用第三方库如xlsx来处理复杂的Excel格式。
2. 复制DOM元素到剪贴板时，可能需要获取表格的HTML内容，并将其作为字符串复制。
3. 这里的代码示例使用了Element Plus（ElementUI的Vue3版本）和Vue 3的Composition API，如果使用Vue 2，则需要相应地修改。