1.表格页面添加如下内容:
<el-table-column
label="XXX"
prop="Line"
show-overflow-tooltip
>
<template slot-scope="scope">
<a href="javascript:;" @click="copyText(scope.row.Line)">
{{ scope.row.Line }}
</a>
</template>
</el-table-column>
<el-table-column
prop="Line"
label="xxx"
width="110px"
>
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" placement="top">
<template #content>
{{ scope.row.Line }}
<a
@click="copyText(scope.row.Line)"
class="copyText"
>
复制</a
>
</template>
<el-button type="text" class="channelStyle">{{
scope.row.Line.substring(
0,
Math.min(7, scope.row.Line.length)
) + '...'
}}</el-button>
</el-tooltip>
</el-table-column>
2.项目utils目录下创建index.js
export function copyText(copytext) {
const text = document.createElement('input');
text.setAttribute('readonly', 'readonly');
text.value = copytext;
document.body.appendChild(text);
text.setSelectionRange(0, text.value.length);
text.select();
document.execCommand('copy');
if (document.body.removeChild(text)) {
this.$message({ type: 'success', message: '复制成功' })
} else {
this.$message({ type: 'error', message: '复制失败' })
}
}
3.在main.js中加入方法
import {copyText} from '@/utils'
Vue.prototype.copyText = copyText
4.成功。