【Element Ui】vue3+elementplus+vue-clipboard3 实现点击表格中的单元格即可复制内容，封装成公共方法

1. 安装

npm install --save vue-clipboard3

2. 封装

2.1  在 utils 中 新建 copy.js 文件

2.2  copy.js 文件

import useClipboard from "vue-clipboard3";
import { ElMessage } from "element-plus";

//单击复制表格
export async function copy(row, column, cell, event) {
  const text = event.target.innerText;
  if (text === undefined || text.length < 1) return;
  if (column.label === '操作') return
  const { toClipboard } = useClipboard();
  try {
    await toClipboard(text);
    ElMessage({
      message: "复制成功",
      type: "success",
    });
  } catch (e) {
    ElMessage({
      message: "复制失败，请手动复制",
      type: "error",
    });
  }
}

2.3  main.js 文件

......
import { copy } from "@/utils/copy";


// 全局挂载
app.config.globalProperties.copy = copy;
......

3. 使用

<!-- 点击复制 : @cell-click="copy" -->
<el-table
      :data="data"
      @cell-click="copy"
>
      <el-table-column label="1" align="center" prop="1"/>
      <el-table-column label="2" align="center" prop="2"/>
</el-table>