您可以使用
Element UI 中的 `<
el-button>` 和 `<
el-tooltip>` 组件来实现这个需求。代码示例如下：
```html
<
el-
table-column
prop="email" lab
el="物流单号">
<template slot-scope="scope">
<
el-tooltip content="复制物流单号" placement="top">
<
el-button type="text" icon="
el-icon-document" @click="handleCopy(scope.row.email)">
</
el-button>
</
el-tooltip>
</template>
</
el-
table-column>
```
在这个示例中，我们在 `<
el-
table-column>` 标签中的模板中添加了 `<
el-tooltip>` 和 `<
el-button>` 组件。当鼠标悬停在按钮上时，会显示一个提示框，提示复制物流单号的功能。按钮的点击事件
绑定 `handleCopy` 方法，该方法会将物流单号复制到剪贴板，并使用 `<
el-message>` 组件显示复制成功的提示消息。
下面是完整的代码示例：
```html
<template>
<div>
<
el-
table :data="
tableData">
<
el-
table-column
prop="phone" lab
el="手机号"></
el-
table-column>
<
el-
table-column
prop="nickName" lab
el="昵称"></
el-
table-column>
<
el-
table-column
prop="wechat" lab
el="微信号"></
el-
table-column>
<
el-
table-column
prop="address" lab
el="购买地址"></
el-
table-column>
<
el-
table-column
prop="email" lab
el="物流单号">
<template slot-scope="scope">
<
el-tooltip content="复制物流单号" placement="top">
<
el-button type="text" icon="
el-icon-document" @click="handleCopy(scope.row.email)">
</
el-button>
</
el-tooltip>
</template>
</
el-
table-column>
<
el-
table-column
prop="consume" lab
el="消费金额"></
el-
table-column>
<
el-
table-column
prop="createTime" lab
el="申请时间"></
el-
table-column>
</
el-
table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
phone: '13333333333',
nickName: '张三',
wechat: 'zhangsan',
address: '上海市浦东新区',
email: '1234567890',
consume: 1000,
createTime: '2021-01-01'
},
{
phone: '14444444444',
nickName: '李四',
wechat: 'lisi',
address: '北京市朝阳区',
email: '0987654321',
consume: 2000,
createTime: '2021-01-02'
}
]
}
},
methods: {
handleCopy(email) {
const input = document.create
Element('input')
input.setAttribute('value', email)
document.body.appendChild(input)
input.s
elect()
document.execCommand('copy')
document.body.removeChild(input)
this.$message({
type: 'success',
message: '物流单号已复制'
})
}
}
}
</script>
```
8226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
