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 DataSet数据源处理代码
Mar 29 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
javascript实现校验文件上传控件实例
Apr 20 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 Javascript
Vue 数据绑定的原理分析
Nov 16 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读取javascript设置的cookies的代码
2010/04/12 PHP
php获取文件内容最后一行示例
2014/01/09 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
Python高效编程技巧
2013/01/07 Python
python读写文件操作示例程序
2013/12/02 Python
python基础教程之元组操作使用详解
2014/03/25 Python
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
对Python Class之间函数的调用关系详解
2019/01/23 Python
Django 外键的使用方法详解
2019/07/19 Python
python实现邮件自动发送
2019/08/10 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
python openCV自制绘画板
2020/10/27 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
python RSA加密的示例
2020/12/09 Python
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
大学应届生求职简历的自我评价
2013/10/08 职场文书
老师推荐信
2013/10/28 职场文书
工程监理应届生求职信
2013/11/09 职场文书
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
小区停车场管理制度
2014/01/27 职场文书
青年教师培训方案
2014/02/06 职场文书
学生违纪检讨书200字
2014/10/21 职场文书