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


Posted in Javascript onJune 11, 2020

上篇文章给大家介绍了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 双击复制表格内容内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery checkbox,radio是否选中的判断代码
Mar 20 Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 Javascript
鼠标经过tr时,改变tr当前背景颜色
Jan 13 Javascript
js中的如何定位固定层的位置
Jun 15 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 #Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 #Javascript
Vue组件为什么data必须是一个函数
Jun 11 #Javascript
Vue实现点击箭头上下移动效果
Jun 11 #Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 #Javascript
详解vue 组件
Jun 11 #Javascript
vue实现员工信息录入功能
Jun 11 #Javascript
You might like
php Try Catch异常测试
2009/03/01 PHP
PHP 批量删除数据的方法分析
2009/10/30 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
php无限极分类实现方法分析
2019/07/04 PHP
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
python使用xauth方式登录饭否网然后发消息
2014/04/11 Python
使用Python的判断语句模拟三目运算
2015/04/24 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
AJAX的优缺点都有什么
2015/08/18 面试题
机电专业个人求职信范文
2013/12/30 职场文书
大学军训感言1000字
2014/02/25 职场文书
村委会换届选举方案
2014/05/03 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android