Element ui 表格实现单元格双击复制功能

最新推荐文章于 2025-05-13 15:40:22 发布

watts_j

最新推荐文章于 2025-05-13 15:40:22 发布

阅读量8.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：随笔&笔记

本文链接：https://blog.youkuaiyun.com/qq_33559093/article/details/86541600

随笔&笔记专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何在Vue项目中使用vue-clipboard2插件实现表格单元格数据的双击复制功能。首先引入并注册vue-clipboard2，然后在表格组件上添加双击事件监听器，最后编写事件处理函数实现数据复制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先引入 vue-clipboard2

import Vue from 'vue'

import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

然后为单元格添加双击事件

   <el-table
      class="lr-common-tb"
      ref="table"
      v-bind="filterProp"
      :data="data"
      @cell-dblclick="celldblclick" //    添加双击事件
      border
      :enterable="true"
      :span-method="spanMethod"
      :key="$route.name"
    >

最后是事件代码

celldblclick (row, column, cell, event) {
      let _this = this
      this.$copyText(row[column.property]).then(function (e) {
        _this.onCopy()
      }, function (e) {
        _this.onError()
      })
    },

row[column.property] // 就是单元格数据信息