Element UI 表格单元格数字点击复制功能实现
在 Element UI 表格中，如果单元格内容是数字，可能需要在单元格内增加一个点击图标，点击之后能复制这串数字内容。可以使用 `
以下是一个示例代码：
<el-table-column label='退货物流单号' prop='deliveryNo' width='150'>
<template slot-scope='scope'>
<div>
<span>{{ scope.row.deliveryNo }}</span>
<el-tooltip content='复制' placement='top'>
<i class='el-icon-document-copy' style='cursor: pointer' @click='copyText(scope.row.deliveryNo)'></i>
</el-tooltip>
</div>
</template>
</el-table-column>
在上述代码中，`
你需要在 Vue 实例中定义 `copyText` 方法，来实现复制功能。以下是一个示例代码：
methods: {
copyText(text) {
const input = document.createElement('input');
input.style.position = 'fixed';
input.style.opacity = 0;
input.value = text;
document.body.appendChild(input);
input.select();
document.execCommand('copy');
document.body.removeChild(input);
this.$message.success('复制成功');
}
}
在上述代码中，`copyText` 方法会创建一个隐藏的 `` 元素，将要复制的文本赋值给该元素的 `value` 属性，然后将该元素添加到页面中，并选中其中的文本内容，调用 `document.execCommand('copy')` 方法执行复制操作。最后，移除该元素，并显示一个成功的消息提示。
请注意，以上代码仅提供了一个示例，实际使用时可能需要根据具体情况进行调整和优化。
原文地址: http://www.cveoy.top/t/topic/qtYD 著作权归作者所有。请勿转载和采集!