VUE页面中通过双击实现复制表格中内容的示例代码

上篇文章给大家介绍了vue实现点击按钮复制文本内容的例子，喜欢的朋友可以点击查看，今天给大家分享vue页面中通过双击实现复制表格中内容，通过示例代码讲解的非常详细，需要的朋友参考下吧！

vue页面中通过双击实现复制表格中内容页面预览：

vue中代码实现：

<template>
 <el-table
 :data="tabledata"
 height="250"
 border
 style="width: 100%">
 <el-table-column
 prop="date"
 label="日期"
 width="180">
 </el-table-column>
 <el-table-column
 prop="name"
 label="姓名"
 width="180">
 <template slot-scope="scope">
 <span @dblclick="copyvale(scope.row.name)">
  {{scope.row.name}}
 </span>
 </template>
 </el-table-column>
 <el-table-column
 prop="address"
 label="地址">
 </el-table-column>
 </el-table>
</template>

<script>
 export default {
 data() {
 return {
 tabledata: [{
  date: '2016-05-03',
  name: '张三',
  address: '上海市普陀区金沙江路 1511 弄'
 }, {
  date: '2016-05-02',
  name: '李四',
  address: '上海市普陀区金沙江路 1512 弄'
 }, {
  date: '2016-05-04',
  name: '王五',
  address: '上海市普陀区金沙江路 1513 弄'
 }]
 }
 },
 methods: {
 copyvale(v) {
 this.$message({message: '复制成功，内容为：‘' + v + ''', type:'success'})

 var inputele = document.createelement("input");
 inputele.style.display = "none"
 inputele.value = v
 inputele.select()
 document.execcommand("copy")
 inputele.remove()
 }
 }
 }
</script>

总结

到此这篇关于vue页面中通过双击实现复制表格中内容的文章就介绍到这了,更多相关vue 双击复制表格内容内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！