VUE页面中通过双击实现复制表格中内容的示例代码
2020-06-20 11:48
134 查看
上篇文章给大家介绍了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 双击复制表格内容内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
相关文章推荐
- vue-cli实现多页面多路由的示例代码
- vue使用原生js实现滚动页面跟踪导航高亮的示例代码
- vue.js实现表格合并示例代码
- vue+element的表格实现批量删除功能示例代码
- Vue+jquery实现表格指定列的文字收缩的示例代码
- vue.js实现表格合并示例代码
- vue+element UI实现树形表格带复选框的示例代码
- javascript操作两个选择列表(有两个列表,如何实现在一个列表通过双击和多选列表中内容添加到另一个列表. )
- 用.net实现远程获取其他网站页面内容!(核心代码分析)
- 用.net实现远程获取其他网站页面内容!(核心代码分析)
- php获取页面指定标签内容的实现代码分享
- JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
- 点击按钮,通过JS代码实现复制INPUT表单,表格:
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- 神奇的代码 可随意修改复制页面内容
- 用.net实现远程获取其他网站页面内容!(核心代码分析)
- 通过js实现单击或双击直接修改内容
- js实现转到上一页面代码(不修改任何内容)
- 通过CSS禁用页面内容选中和复制操作
- 【HTML/JS】利用JQuery的load函数动态加载其它页面的内容的实现代码