VUE页面中通过双击实现复制表格中内容的示例代码
(编辑:jimmy 日期: 2024/12/28 浏览:3 次 )
上篇文章给大家介绍了Vue实现点击按钮复制文本内容的例子,喜欢的朋友可以点击查看,今天给大家分享VUE页面中通过双击实现复制表格中内容,通过示例代码讲解的非常详细,需要的朋友参考下吧!
VUE页面中通过双击实现复制表格中内容页面预览:
vue中代码实现:
<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: '上海市普陀区金沙江路 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 scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)