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 相关文章推荐
JS控制表格隔行变色
Jun 26 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
基于滚动条位置判断的简单实例
Dec 14 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
JavaScript实现无限轮播效果
Nov 19 Javascript
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&amp;MYSQL服务器配置说明
2006/10/09 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
php中计算程序运行时间的类代码
2012/11/03 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
php加密解密字符串示例
2016/10/13 PHP
php中上传文件的的解决方案
2018/09/25 PHP
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
Tensorflow卷积神经网络实例
2018/05/24 Python
python+opencv实现摄像头调用的方法
2019/06/22 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
职业生涯规划书基本格式
2014/01/06 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
教育合作协议范本
2014/10/17 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
Java tomcat手动配置servlet详解
2021/11/27 Java/Android
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL