Element UI 表格添加复制按钮，一键复制单元格内容
您可以在`
<el-table-column label='退货物流单号' prop='deliveryNo' width='150'>
<template slot-scope='scope'>
<div>
<span>{{ scope.row.deliveryNo }}</span>
<el-button type='text' icon='el-icon-document-copy' @click='copyDeliveryNo(scope.row.deliveryNo)'></el-button>
</div>
</template>
</el-table-column>
在上述代码中，我们使用了``标签来定义自定义模板，通过`slot-scope`来获取当前行的数据`scope.row`，然后在模板中显示退货物流单号`scope.row.deliveryNo`，并添加了一个`
在Vue的方法中，您可以使用`document.execCommand('copy')`来执行复制操作，具体代码如下：
methods: {
copyDeliveryNo(deliveryNo) {
const input = document.createElement('input');
input.value = deliveryNo;
document.body.appendChild(input);
input.select();
document.execCommand('copy');
document.body.removeChild(input);
this.$message.success('已复制退货物流单号');
}
}
在上述代码中，我们创建了一个隐藏的``元素，并将退货物流单号赋值给它，然后将该元素添加到`document.body`中，通过`input.select()`来选中文本内容，然后通过`document.execCommand('copy')`来执行复制操作，最后移除该元素，并通过`this.$message.success`来显示复制成功的提示信息。
请根据您的实际需求进行相应的调整。
原文地址: https://www.cveoy.top/t/topic/qts4 著作权归作者所有。请勿转载和采集!