VUE頁面中通過雙擊實現(xiàn)復制表格中內(nèi)容的示例代碼

更新時間：2020年06月11日 14:29:58 作者：在下令狐

這篇文章主要介紹了VUE頁面中通過雙擊實現(xiàn)復制表格中內(nèi)容，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

上篇文章給大家介紹了Vue實現(xiàn)點擊按鈕復制文本內(nèi)容的例子，喜歡的朋友可以點擊查看，今天給大家分享VUE頁面中通過雙擊實現(xiàn)復制表格中內(nèi)容，通過示例代碼講解的非常詳細，需要的朋友參考下吧！

VUE頁面中通過雙擊實現(xiàn)復制表格中內(nèi)容頁面預覽：

Alt

vue中代碼實現(xiàn)：

<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: '上海市普陀區(qū)金沙江路 1511 弄'
 }, {
  date: '2016-05-02',
  name: '李四',
  address: '上海市普陀區(qū)金沙江路 1512 弄'
 }, {
  date: '2016-05-04',
  name: '王五',
  address: '上海市普陀區(qū)金沙江路 1513 弄'
 }]
 }
 },
 methods: {
 copyVale(v) {
 this.$message({message: '復制成功，內(nèi)容為：‘' + v + ''', type:'success'})

 var inputEle = document.createElement("input");
 inputEle.style.display = "none"
 inputEle.value = v
 inputEle.select()
 document.execCommand("Copy")
 inputEle.remove()
 }
 }
 }
</script>

總結(jié)

到此這篇關(guān)于VUE頁面中通過雙擊實現(xiàn)復制表格中內(nèi)容的文章就介紹到這了,更多相關(guān)vue 雙擊復制表格內(nèi)容內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vite環(huán)境變量配置小結(jié)
Vite環(huán)境變量配置是Vite開發(fā)環(huán)境下重要的一環(huán),它能夠根據(jù)不同的環(huán)境變量對項目進行不同的配置,使得項目更加靈活和可維護,本文就來介紹一下vite環(huán)境變量配置小結(jié),感興趣的可以了解一下
2023-11-11
VUE 常規(guī)截取和特殊字符之前之后截取(實例代碼)
這篇文章主要介紹了VUE 常規(guī)截取和特殊字符之前之后截取,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2023-10-10
Element?el-tag標簽圖文實例詳解
現(xiàn)在好多應(yīng)用場景里會有一些需要給文章打標簽等類似的操作,下面這篇文章主要給大家介紹了關(guān)于Element?el-tag標簽的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2022-04-04
前端Vue?select下拉框使用以及監(jiān)聽事件詳解
由于前端項目使用的是Vue.js和bootstrap整合開發(fā),中間用到了select下拉框,這篇文章主要給大家介紹了關(guān)于前端Vue?select下拉框使用以及監(jiān)聽事件的相關(guān)資料,需要的朋友可以參考下
2024-03-03
Vue數(shù)據(jù)與事件綁定以及Class和Style的綁定詳細講解
這篇文章主要介紹了Vue數(shù)據(jù)與事件綁定以及Class和Style的綁定，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧
2023-01-01
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?原因,本文給出出現(xiàn)此類問題的原因所在并給出解決方法，需要的朋友可以參考下
2022-09-09
Vue動態(tài)組件實例解析
讓多個組件使用同一個掛載點，并動態(tài)切換，這就是動態(tài)組件。這篇文章主要介紹了Vue動態(tài)組件 ,需要的朋友可以參考下
2017-08-08
解決vue.js在編寫過程中出現(xiàn)空格不規(guī)范報錯的問題
下面小編就為大家?guī)硪黄鉀Qvue.js在編寫過程中出現(xiàn)空格不規(guī)范報錯的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
vue深拷貝的三種實現(xiàn)方式示例詳解
vue深拷貝的三種實現(xiàn)方式：1、通過遞歸方式實現(xiàn)深拷貝；2、JSON.parse(JSON.stringify(obj))；3、jQuery的extend方法實現(xiàn)深拷貝,本文通過實例代碼給大家介紹的非常詳細,需要的朋友參考下吧
2023-11-11