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基础知识filter()和find()实例说明
Jul 06 Javascript
javascript字符串拼接的效率问题
Dec 25 Javascript
Active控件问题小结(附解决办法)
Jun 09 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 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
Email+URL的判断和自动转换函数
2006/10/09 PHP
php基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
PHP入门速成教程
2007/03/19 PHP
php 保留字列表
2012/10/04 PHP
php中session定期自动清理的方法
2015/11/12 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
用javascript实现画板的代码
2007/09/05 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
React Native之ListView实现九宫格效果的示例
2017/08/02 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
python 打印对象的所有属性值的方法
2016/09/11 Python
python中 logging的使用详解
2017/10/25 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
python几种常用功能实现代码实例
2019/12/25 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
运动会广播稿200米
2014/01/27 职场文书
年度献血先进个人事迹材料
2014/02/14 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
无刑事犯罪记录证明
2014/09/18 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
投诉信范文
2015/07/02 职场文书
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技
php解析非标准json、非规范json的方式实例
2022/05/10 PHP