以下是代码示例:
<template>
<div>
<el-button type="primary" @click="copyTable">复制表格</el-button>
<el-table :data="tableData" id="table" border stripe>
<el-table-column prop="age" label="年龄"> </el-table-column>
<el-table-column prop="name" label="姓名"> </el-table-column>
<el-table-column prop="hobby" label="爱好"> </el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ age: "10", name: "张1", hobby: "打球" },
{ age: "11", name: "张2", hobby: "打球" },
{ age: "12", name: "张3", hobby: "打球" },
{ age: "13", name: "张4", hobby: "打球" },
{ age: "14", name: "张5", hobby: "打球" },
{ age: "15", name: "张6", hobby: "打球" },
{ age: "16", name: "张7", hobby: "打球" },
],
};
},
methods: {
copyTable() {
var copyDom = document.getElementById("table");
var copyDom=copyDom.cloneNode(true)
document.body.appendChild(copyDom)
this.select(copyDom)
document.execCommand('copy');
document.body.removeChild(copyDom)
copyDom.innerHTML="";
this.$message({
message: "复制成功",
type: "success",
});
},
select(element) {
var selectedText;
if (
element.nodeName === "INPUT" ||
element.nodeName === "TEXTAREA"
) {
element.focus();
element.setSelectionRange(0, element.value.length);
selectedText = element.value;
} else {
if (element.hasAttribute("contenteditable")) {
element.focus();
}
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
selectedText = selection.toString();
}
return selectedText;
},
},
};
</script>
<style>
</style>