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

简述：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>

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" });
    },

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