VUE页面中通过双击实现复制表格中内容的示例代码

 更新时间:2020年06月11日 14:29:58   作者:在下令狐  
这篇文章主要介绍了VUE页面中通过双击实现复制表格中内容,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

上篇文章给大家介绍了Vue实现点击按钮复制文本内容的例子,喜欢的朋友可以点击查看,今天给大家分享VUE页面中通过双击实现复制表格中内容,通过示例代码讲解的非常详细,需要的朋友参考下吧!

VUE页面中通过双击实现复制表格中内容页面预览:

Alt

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 双击复制表格内容内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vite环境变量配置小结

    vite环境变量配置小结

    Vite环境变量配置是Vite开发环境下重要的一环,它能够根据不同的环境变量对项目进行不同的配置,使得项目更加灵活和可维护,本文就来介绍一下vite环境变量配置小结,感兴趣的可以了解一下
    2023-11-11
  • VUE 常规截取和特殊字符之前之后截取(实例代码)

    VUE 常规截取和特殊字符之前之后截取(实例代码)

    这篇文章主要介绍了VUE 常规截取和特殊字符之前之后截取,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-10-10
  • Element el-tag标签图文实例详解

    Element el-tag标签图文实例详解

    现在好多应用场景里会有一些需要给文章打标签等类似的操作,下面这篇文章主要给大家介绍了关于Element el-tag标签的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • 前端Vue select下拉框使用以及监听事件详解

    前端Vue select下拉框使用以及监听事件详解

    由于前端项目使用的是Vue.js和bootstrap整合开发,中间用到了select下拉框,这篇文章主要给大家介绍了关于前端Vue select下拉框使用以及监听事件的相关资料,需要的朋友可以参考下
    2024-03-03
  • Vue数据与事件绑定以及Class和Style的绑定详细讲解

    Vue数据与事件绑定以及Class和Style的绑定详细讲解

    这篇文章主要介绍了Vue数据与事件绑定以及Class和Style的绑定,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-01-01
  • vue 获取视频时长的实例代码

    vue 获取视频时长的实例代码

    这篇文章主要介绍了vue 获取视频时长的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • 解决vue vite启动项目报错ERROR: Unexpected “\x88“ in JSON 的问题

    解决vue vite启动项目报错ERROR: Unexpected “\x88“ in JSON 的问题

    这篇文章主要介绍了vue vite启动项目报错ERROR: Unexpected “\x88“ in JSON 原因,本文给出出现此类问题的原因所在并给出解决方法,需要的朋友可以参考下
    2022-09-09
  • Vue动态组件实例解析

    Vue动态组件实例解析

    让多个组件使用同一个挂载点,并动态切换,这就是动态组件。这篇文章主要介绍了Vue动态组件 ,需要的朋友可以参考下
    2017-08-08
  • 解决vue.js在编写过程中出现空格不规范报错的问题

    解决vue.js在编写过程中出现空格不规范报错的问题

    下面小编就为大家带来一篇解决vue.js在编写过程中出现空格不规范报错的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue深拷贝的三种实现方式示例详解

    vue深拷贝的三种实现方式示例详解

    vue深拷贝的三种实现方式:1、通过递归方式实现深拷贝;2、JSON.parse(JSON.stringify(obj));3、jQuery的extend方法实现深拷贝,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2023-11-11

最新评论