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

原创已于 2024-04-16 16:15:23 修改 · 1.2k 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

于 2024-01-03 16:25:34 首次发布

Element Ui 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用npminstall安装vue-clipboard3库，并详细步骤封装了点击复制功能，以便在表格中实现数据的快速复制，同时展示了在main.js中全局挂载和在模板中使用的示例。

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>