element表格点击复制

初级xv工程师

已于 2022-10-14 14:01:29 修改

阅读量975

点赞数 1

文章标签： vue.js elementui javascript

于 2022-10-12 10:15:47 首次发布

本文链接：https://blog.csdn.net/z_langjitianya/article/details/127277235

版权

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <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>
        <template slot-scope="scope">
          <el-button @click="clickCopy(scope.row.name)" type="text" size="small"
            >复制</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

html内容，@click="clickCopy()"传参中的scope.row.name可根据需要复制的表格块进行更改，也可传入其他参数用来复制其他内容，如传入123复制内容就是123

clickCopy(text) {
      const save = function (evn) {
        evn.clipboardData.setData("text/plain", text);
        evn.preventDefault(); // 阻止默认行为
      };
      document.addEventListener("copy", save); // 添加一个copy事件
      document.execCommand("copy"); // 执行copy方法
      this.$message({ message: "复制成功", type: "success" });
    },

methods内容