vue elementUI点击按钮复制表格某列的链接

最新推荐文章于 2024-09-12 22:42:37 发布

Coninsi"

最新推荐文章于 2024-09-12 22:42:37 发布

阅读量411

点赞数

文章标签： vue elementui

本文链接：https://blog.csdn.net/weixin_43242560/article/details/116520012

版权

vue elementUI点击按钮复制表格某列链接

 <el-table :data="gridData" size="mini"  >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="name" label="名称" width="150"></el-table-column>
        <el-table-column prop="remarks" label="备注" width="150"></el-table-column>
        <el-table-column prop="link" label="链接" width="240" show-overflow-tooltip></el-table-column>
        <el-table-column label="编辑" align="center">
          <template slot-scope="scope" class="operation">
            <div class="operationButton">
              <svg-icon iconName="iconfuzhi" @click.native="copyClick(scope.row.link)"></svg-icon>
            </div>
          </template>
        </el-table-column>
      </el-table>

// 复制链接
    copyClick (link) {
      const input = document.createElement('input'); // 创建一个隐藏input（重要！）
      input.value = link; // 赋值
      document.body.appendChild(input);
      input.select(); // 选择对象
      if (document.execCommand('copy')) {
        document.execCommand('copy'); // 执行浏览器复制命令
        this.$message({ message: '复制成功', type: 'success' });
      }
      document.body.removeChild(input);
    }