溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
不懂VUE如何通過雙擊實現復制表格中內容？？其實想解決這個問題也不難，下面讓小編帶著大家一起學習怎么去解決，希望大家閱讀完這篇文章后大所收獲。
VUE頁面中通過雙擊實現復制表格中內容頁面預覽：
vue中代碼實現：
<template>
<el-table
:data="tableData"
height="250"
border
>
<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如何通過雙擊實現復制表格中內容？內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
