The company needs to click on a cell to copy the content of the cell. The traditional selection, copy and paste method is too inefficient!
The table above is frequently used by the company and users need to copy and paste it.
Above code:
<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>
The success and failure callback functions are unified prompts: Note: written in the methods function
copySuccess() {
this.$modal.msgSuccess("Copy successful");
},
copyFailed() {
this.$modal.msg("Copy failed");
},