elementui -自定义复制功能无需下载插件纯原生实现

最新推荐文章于 2024-04-22 16:00:31 发布

我的小鹿是憨憨

最新推荐文章于 2024-04-22 16:00:31 发布

阅读量274

点赞数 1

本文链接：https://blog.csdn.net/m0_56390627/article/details/120825974

版权

Vue.js Element UI 表格数据复制剪贴板API

关键词由CSDN通过智能技术生成

html


<el-table-column :label="$t('tenant.title07')" header-align="center" align="center">
        <template v-slot="scope">
          <div>{{ $t("tenant.title30") }}{{ scope.row.adminAddress }}</div>
          <div>{{ $t("tenant.title31") }}{{ scope.row.username }}</div>
          <div>{{ $t("tenant.title32") }}{{ scope.row.passwordInitial }}</div>
            <el-button type="text" @click="copyTextAdmin(scope.row)">{{$t("copy")}}           </el-button> 
        </template>
 </el-table-column>



js

 copyTextAdmin(row:any) {
   console.log(row);  //每一行的数据adminAddress,username,passwordInitial
    let Url2 = row.adminAddress;  //每一行的某个值，如选中的当前行的url
    let Url3 = row.username;  //每一行的某个值，如选中的当前行的username
    let Url4 = row.passwordInitial;  //每一行的某个值，如选中的当前行的passwordInitial
    var oInput2 = document.createElement('input');     //创建一个隐藏input（重要！）
    oInput2.value = Url2+','+Url3+','+Url4;    //拼接多个赋值
    // console.log(oInput.value);
    document.body.appendChild(oInput2);
    oInput2.select(); // 选择对象
    document.execCommand("Copy"); // 执行浏览器复制命令
    oInput2.className = 'oInput';
    oInput2.style.display='none';
    this.$message({
    message: this.$t("syscountry.copy"),
    type: "success"
  });
},