当前位置： 移动技术网 > IT编程>脚本编程>vue.js > VUE页面中通过双击实现复制表格中内容的示例代码

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

2020年06月23日  | 移动技术网IT编程  | 我要评论

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

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

alt

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 双击复制表格内容内容请搜索移动技术网以前的文章或继续浏览下面的相关文章希望大家以后多多支持移动技术网！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网