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

赞 (0)

相关推荐

  • 利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序

    Vue-draggable 的github传送门 : https://github.com/SortableJS/Vue.Draggable 一. 下载依赖包:npm install vuedraggable -S  二. 在需要使用的当前界面引入依赖,注册组件: import draggable from "vuedraggable"; export default { components: { draggable, } 三. 在template 中建立表格,分别写出thead 部

  • 利用vue和element-ui设置表格内容分页的实例

    html代码 因为我写在template中,也就是新建了组建中,贴出代码. <el-pagination small layout="prev, pager, next" :total="total" @current-change="current_change"> </el-pagination> 代码中,small代表是否使用小型分页样式 layout代表组件布局,子组件名用逗号分隔 属性: total代表总条目数

  • vue.js树形组件之删除双击增加分支实例代码

    html代码: <script type="text/x-template" id="item-template"> <li> <div :class="{bold: isFolder}" @click="toggle"> {{model.name}} <span v-if="isFolder">[{{open ? '-' : '+'}}]</span&

  • vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例

    如果是已经有点经验的同学,可以直接看下面这个函数,应该就能明白怎么回事,新手可以看下面的详细教程. 函数: handleEdit: function (index, row) { this.editFormVisible = true; this.editForm = Object.assign({}, row); } 详细教程: 1.首先,做一个表格,用于显示信息:代码如下: <el-table :data="users" highlight-current-row v-loa

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

    VUE页面中通过双击实现复制表格中内容页面预览: vue中代码实现: <template> <el-table :data="tableData" height="250" border style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-t

  • PyQT5 实现快捷键复制表格数据的方法示例

    本文主要介绍了PyQT5 实现快捷键复制表格数据的方法示例,分享给大家,具体如下: 表格数据如下: # -*- coding:utf-8 -*- import pyperclip from PyQt5.QtWidgets import QApplication, QWidget from PyQt5.QtGui import QStandardItemModel, QStandardItem from PyQt5.QtCore import Qt from PyQt5 import QtCore

  • Vue3实现刷新页面局部内容的示例代码

    Vue3实现刷新页面局部内容的示例代码

    目录 第一步:定义状态标识 第二步.借用v-if 指令让dom节点重新渲染 第三步.修改isRouterAlive 值,实现dom的重新渲染 想要实现页面的局部刷新,我们只需要实现局部组件(dom)的重新渲染.在Vue中,想要实现这一效果最简便的方式方法就是使用v-if 指令. 在Vue2中我们除了使用v-if 指令让局部dom的重新渲染,也可以新建一个空白组件,需要刷新局部页面时跳转至这个空白组件页面,然后在空白组件内的beforeRouteEnter 守卫中又跳转回原来的页面. 如下图所示,

  • Vue+ElementUI实现从后台动态填充下拉框的示例代码

    1.首先编写前端代码,将elementUI中的标签写到.vue界面中.  <el-select       v-model="xxxQuery.xxxid"       placeholder="请在下拉框中选择名称"       maxlength="255"       :disabled="false"       clearable>             <el-option          

  • Vue实现上拉加载下一页效果的示例代码

    Vue实现上拉加载下一页效果的示例代码

    之前从来没有单独的做过手机端的网页.当然,之前我也没有独立的从切图到写代码交互做过前端的页面. 这里边的分页还是和响应电脑端的数字分页.但是,其实独立做一个手机端的网站,而不是响应式的网站的时候,这种数字分页看起来可能是不太好. 手机端网站嘛,还是仿照着APP或者是微信小程序那种上拉触底分页比较好.但是,这个玩意怎么实现呢? 第一种想法,监听滚动条,滚动条滚动到页面底部,触发方法,请求接口加载下一页的数据.嗯,应该是可行的,我们来尝试一下: 监听滚动条所在位置的方法如下: /** * @name

  • vue Element-ui input 远程搜索与修改建议显示模版的示例代码

    html: <template> <el-autocomplete popper-class="my-autocomplete" custom-item="my-remote" v-model="state" :fetch-suggestions="querySearch" placeholder="默认空" icon="close" :on-icon-click=&q

  • SpringBoot中时间类型 序列化、反序列化、格式处理示例代码

    [SpringBoot] 中时间类型 序列化.反序列化.格式处理 Date yml全局配置 spring: jackson: time-zone: GMT+8 date-format: yyyy-MM-dd HH:mm:ss #配置POST请求Body中Date时间类型序列化格式处理,并返回 请求参数类型转换 /** * 时间Date转换 * 配置GET请求,Query查询Date时间类型参数转换 */ @Component public class DateConverter implemen

  • Pandas中两个dataframe的交集和差集的示例代码

    Pandas中两个dataframe的交集和差集的示例代码

    创建测试数据: import pandas as pd import numpy as np #Create a DataFrame df1 = { 'Subject':['semester1','semester2','semester3','semester4','semester1', 'semester2','semester3'], 'Score':[62,47,55,74,31,77,85]} df2 = { 'Subject':['semester1','semester2','s

  • C++实现删除txt文件中指定内容的示例代码

    C++实现删除txt文件中指定内容的示例代码

    默认明白C++的文件输入输出流 方法: 新建一个中间文件,逐行读取原文件(test.txt)的内容并写入到中间文件(temp.txt),遇到需要删除的内容则跳过. 再将中间文件的内容写入原文件,删除中间文件. fstream in("C:\\Users\\Administrator\\Desktop\\test.txt", ios::in);//原文件 fstream out("C:\\Users\\Administrator\\Desktop\\temp.txt"

  • 用vue写一个仿简书的轮播图的示例代码

    用vue写一个仿简书的轮播图的示例代码

    1.先展示最终效果: 2.解决思路 Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮播效果.动画效果交给transition完成.可以将轮播图看成两个(mainSlide和extraSlide),各个图片的位置如图所示: 3.代码实现 各个slide的样式: $width: 800px; // 容器宽度 $height: 300px; // 容器高度 $bWidth: 500px; // 大图片宽度 $

随机推荐