JavaScript复制功能，el-table点击复制，vue复制功能（el-table中el-table-column的hover效果，点击hover内容复制到剪切板）

我就是我 2023-10-08 20:54 5阅读 0赞

#### 简述：el-table是我们日常开发中常用到的element中的表格组件，然而有时候我们就会用到，点击表格内容复制到剪切板的功能，今天就来分享下，表格中的点击复制功能，顺便做个笔录； ####

**1、el-table-column的hover效果；**

<el-table-column prop="phone" label="联系方式" min-width="10%">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="right">    //hover弹出层 和 位置
                  <el-tag
                    size="medium"
                    style="cursor: pointer"
                    @click="chsoeCopy(scope)"
                    >点击复制号码</el-tag
                  >                                               //hover显示的内容
                  <div slot="reference" class="name-wrapper">
                    <span>{
       { scope.row.phone }}</span>            //显示内容
                  </div>
                </el-popover>
              </template>
      </el-table-column>

![a6a030e3152f4bcaad2be26638d1f811.gif][]

**2、点击hover，直接复制内容；**

chsoeCopy(scope) {                            //这里的scope就是每一行的row
          // console.log(scope.row.phone);
          const save = function (e) {
            e.clipboardData.setData("text/plain", scope.row.phone);
            e.preventDefault();                     // 阻止默认行为
          };
          document.addEventListener("copy", save);  // 添加一个copy事件
          document.execCommand("copy");             // 执行copy方法
          this.$message({ message: "复制成功", type: "success" });
        },

![bfcba69f9674446db50008f4b9e5daf1.gif][]

**感觉有用，就一键三连，感谢(●'◡'●)**

[a6a030e3152f4bcaad2be26638d1f811.gif]: https://img-blog.csdnimg.cn/a6a030e3152f4bcaad2be26638d1f811.gif
[bfcba69f9674446db50008f4b9e5daf1.gif]: https://img-blog.csdnimg.cn/bfcba69f9674446db50008f4b9e5daf1.gif