场景
在elmentui环境下,对表格的某格内容双击复制,尝试将内容赋值给新建的input标签然后使用js的copy命令解决时,发现只能复制双击选中的那些内容,网上找了很多方案都不行,最终突发奇想,在双击事件的方法中做两步操作,先选中表格内容,然后调用copy命令,结束战斗。
代码
表格部分
<el-table-column prop="msg" label="内容">
<template slot-scope="scope">
<!--将事件传入方法参数-->
<span @dblclick="copyValue(scope.row, $event)">{{ scope.row.msg }}</span>
</template>
</el-table-column>
js部分
copyValue(row, event) {
//利用事件获取被点击的元素,就是<span>
var el = event.currentTarget;
//生明变量,全选整个span
var range, selection
if (document.body.createTextRange) {
range = document.body.createTextRange();
range.movetoElementText(el);
range.select();
} else if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(el);
selection.removeAllRanges();
selection.addRange(range);
}
//调用js的复制命令,将span的内容复制到粘贴板
document.execCommand("Copy")
},