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 雙擊複製表格內容內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！