公司需求,点击某个单元格就复制下来这个单元格内容,使用传统的选中复制粘贴效率太低!
上面的table表格,是公司高频使用且用户需要复制粘贴。
上代码:
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="count"
label="Payment"
width="80">
</el-table-column>
<el-table-column
prop="startDate"
label="Period"
width="240">
<template slot-scope="scope">
<span v-if="scope.row.startDate"
v-clipboard:error="copyFailed"
v-clipboard:copy="scope.row.startDate+'-'+ scope.row.endDate"
v-clipboard:success="copySuccess" style="cursor:pointer;">
{ {scope.row.startDate}}-{ {scope.row.endDate }} </span>
</template>
</el-table-column>
<el-table-column
prop="amount"
align="right"
label="Amount">
<template slot-scope="scope">
<span v-clipboard:copy="scope.row.amount"
v-clipboard:error="copyFailed"
v-clipboard:success="copySuccess"
style="cursor:pointer;">
{ { scope.row.amount }}</span>
</template>
</el-table-column>
<el-table-column
width="120"
prop="dueDay"
label="Due Day">
<template slot-scope="scope">
<span v-clipboard:copy="scope.row.dueDay"
v-clipboard:error="copyFailed"
v-clipboard:success="copySuccess"
style="cursor:pointer;">
{ { scope.row.dueDay }}</span>
</template>
</el-table-column>
</el-table>
成功失败回调函数是统一提示: 注:写在methods函数里面
copySuccess() {
this.$modal.msgSuccess("复制成功");
},
copyFailed() {
this.$modal.msg("复制失败");
},