VUE頁(yè)面中通過(guò)雙擊實(shí)現(xiàn)復(fù)制表格中內(nèi)容的示例代碼
上篇文章給大家介紹了Vue實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制文本內(nèi)容的例子,喜歡的朋友可以點(diǎn)擊查看,今天給大家分享VUE頁(yè)面中通過(guò)雙擊實(shí)現(xiàn)復(fù)制表格中內(nèi)容,通過(guò)示例代碼講解的非常詳細(xì),需要的朋友參考下吧!
VUE頁(yè)面中通過(guò)雙擊實(shí)現(xiàn)復(fù)制表格中內(nèi)容頁(yè)面預(yù)覽:
vue中代碼實(shí)現(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: '復(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頁(yè)面中通過(guò)雙擊實(shí)現(xiàn)復(fù)制表格中內(nèi)容的文章就介紹到這了,更多相關(guān)vue 雙擊復(fù)制表格內(nèi)容內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue前端實(shí)現(xiàn)導(dǎo)出頁(yè)面為pdf(分頁(yè)導(dǎo)出、不分頁(yè)導(dǎo)出及分模塊導(dǎo)出)
在實(shí)際應(yīng)用中可能用戶希望將系統(tǒng)中一個(gè)頁(yè)面展示的所有數(shù)據(jù)報(bào)表,用PDF的文件格式下載下來(lái),以便于其他用途,這篇文章主要給大家介紹了關(guān)于vue前端實(shí)現(xiàn)導(dǎo)出頁(yè)面為pdf(分頁(yè)導(dǎo)出、不分頁(yè)導(dǎo)出及分模塊導(dǎo)出)的相關(guān)資料,需要的朋友可以參考下2024-06-06Vue3利用自定義指令進(jìn)行內(nèi)容控制的實(shí)現(xiàn)方法
Vue3作為一個(gè)漸進(jìn)式JavaScript框架,提供了強(qiáng)大的自定義指令功能,使得權(quán)限控制變得既簡(jiǎn)單又高效,本文將詳細(xì)介紹如何在Vue3中使用自定義指令來(lái)判斷內(nèi)容是否顯示,以滿足不同用戶權(quán)限下的界面展示需求,需要的朋友可以參考下2024-04-04

vue中wangEditor的使用及回顯數(shù)據(jù)獲取焦點(diǎn)的方法

vue.js出現(xiàn)Vue.js?not?detected錯(cuò)誤的解決方案

Vue3集成json-editor-vue3的代碼實(shí)現(xiàn)

解決vue中修改了數(shù)據(jù)但視圖無(wú)法更新的情況

Vue-router路由判斷頁(yè)面未登錄跳轉(zhuǎn)到登錄頁(yè)面的實(shí)例