VUE頁面中通過雙擊實(shí)現(xiàn)復(fù)制表格中內(nèi)容的示例代碼
上篇文章給大家介紹了Vue實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制文本內(nèi)容的例子,喜歡的朋友可以點(diǎn)擊查看,今天給大家分享VUE頁面中通過雙擊實(shí)現(xiàn)復(fù)制表格中內(nèi)容,通過示例代碼講解的非常詳細(xì),需要的朋友參考下吧!
VUE頁面中通過雙擊實(shí)現(xiàn)復(fù)制表格中內(nèi)容頁面預(yù)覽:
vue中代碼實(shí)現(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頁面中通過雙擊實(shí)現(xiàn)復(fù)制表格中內(nèi)容的文章就介紹到這了,更多相關(guān)vue 雙擊復(fù)制表格內(nèi)容內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. 完美解決vue 中多個(gè)echarts圖表自適應(yīng)的問題2. vue實(shí)現(xiàn)web在線聊天功能3. Java使用Tesseract-Ocr識(shí)別數(shù)字4. JAMon(Java Application Monitor)備忘記5. Springboot 全局日期格式化處理的實(shí)現(xiàn)6. SpringBoot+TestNG單元測(cè)試的實(shí)現(xiàn)7. Django使用HTTP協(xié)議向服務(wù)器傳參方式小結(jié)8. docker容器調(diào)用yum報(bào)錯(cuò)的解決辦法9. HTML基本語法和語義寫法規(guī)則與實(shí)例10. 前端獲取http狀態(tài)碼400的返回值實(shí)例
