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

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

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

<template> <el-table :data='tableData' 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: ’復(fù)制成功，內(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)復(fù)制表格中內(nèi)容的文章就介紹到這了,更多相關(guān)vue 雙擊復(fù)制表格內(nèi)容內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！