el-table-column label=退货物流单号 prop=deliveryNo width=150 这个查到的结果是数字需要在单元格内增加一个点击图标点击之后能复制这串数字
可以在 <el-table-column> 标签中添加一个自定义的插槽,来实现在单元格内增加一个点击图标,并实现点击复制功能。
以下是一个示例代码:
<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>
在上述代码中,<el-table-column> 标签中添加了一个自定义的插槽 <template slot-scope="scope">。在插槽中,使用了 <el-tooltip> 组件来显示一个提示,然后在其中放置了一个点击图标 <i>,并绑定了一个 click 事件,调用 copyText 方法来复制 deliveryNo 字段的值。
你需要在 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 方法会创建一个隐藏的 <input> 元素,将要复制的文本赋值给该元素的 value 属性,然后将该元素添加到页面中,并选中其中的文本内容,调用 document.execCommand('copy') 方法执行复制操作。最后,移除该元素,并显示一个成功的消息提示。
请注意,以上代码仅提供了一个示例,实际使用时可能需要根据具体情况进行调整和优化
原文地址: https://www.cveoy.top/t/topic/iNMk 著作权归作者所有。请勿转载和采集!