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 屏蔽鼠标右键脚本附破解方法
Dec 03 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
May 13 Javascript
jquery文档操作wrap()方法实例简述
Jan 10 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
Node登录权限验证token验证实现的方法示例
May 25 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
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
PHP 面向对象实现代码
2009/11/11 PHP
zend framework多模块多布局配置
2011/02/26 PHP
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
javascript获取当前ip的代码
2009/05/10 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
在Python中构建增广矩阵的实现方法
2019/07/01 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
世界汽车零件:World Car Parts
2019/09/04 全球购物
毕业生求职的求职信
2013/12/05 职场文书
大型活动策划方案
2014/01/12 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
《日月潭》教学反思
2014/02/28 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
中班上学期个人总结
2015/02/12 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
python实现商品进销存管理系统
2022/05/30 Python