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

VUE頁面中通過雙擊實現復制表格中內容頁面預覽：

vue中代碼實現：

<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: ’上海市普陀區金沙江路 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 雙擊復制表格內容內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！