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

网络编程 2024/12/23 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

上篇文章给大家介绍了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,复制表格内容