vue2,vue3基于elementUI的el-table实现复制粘贴功能

本文主要是介绍vue2,vue3基于elementUI的el-table实现复制粘贴功能,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

vue2,vue3基于elementUI的el-table实现复制粘贴功能

  • vue2
  • vue3

1、先声明一下,为啥又有vue2和vue3呢,因为老项目要改造成vite+ts+vue3,时间紧,来不及全部转换,所以就有了componentApi和optionsApi共存的情况

2、单页面使用,全局未实现

vue2

  1. 既然是基于el-table呢就有现成的methods可以使用
    @row-contextmenu="rowContextmenu"
    @row-click="rowClick"
<template><el-tableref="multipleTableRef"v-loading="loading":data="state.dataList"style="width: 100%; margin-bottom: 20px"border:cell-style="cellStyle"@sort-change="sortChange":header-cell-style="headerCellStyle"@selection-change="handleSelectionChange"@row-contextmenu="rowContextmenu"@cell-mouse-leave="cellMouseLeave"@row-click="rowClick"><el-table-column  align="center" prop="status" label="是否正确" show-overflow-tooltip width="130"><template #default="{ row }"><span v-if="row.status === 1">正确</span><span v-if="row.status === 2">错误</span></template></el-table-column>
</el-table><div v-if="position.show":style="{ position: 'fixed', top: position.y + 'px', left: position.x + 'px', zIndex: 9999, display: 'flex',justifyContent:'center',alignItems:'center',flexFlow:'column',borderRadius:'5px' }"class="context-menu"><!-- 菜单内容 --><span class="posItem" @click="copyText('column')"><el-icon><DocumentCopy/></el-icon>复制当前行</span><span class="posItem" @click="copyText('row')"><el-icon><DocumentCopy/></el-icon>复制当前列</span></div>
</template>
<script>
export default {date() {return {position: {x: 0,y: 0,show: false,row: null,column: null,},columnList: [ // 需要复制的 prop'orderCodes','bookCode','orderExecManagerName','logisticsManagerName','customerName','startPortName','endPortName','endPortCountryName','outCountryName','contractDealstyle','shipMentName','requireWeek','expectEtd','bookArrivalDate','vendorName','bookShipName','preBookStatusName','actualVolumeBoxType','cntCount','forwardAgent','forwardAgentContact','goodTypeName','deptName','prodName','bookTime','bookTrustTime','requireMonth','requireYear','bookComments','forwardAgent','agentName','customsName','bookingRemark',

这篇关于vue2,vue3基于elementUI的el-table实现复制粘贴功能的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1143263

相关文章

Python实现精准提取 PDF中的文本,表格与图片

《Python实现精准提取PDF中的文本,表格与图片》在实际的系统开发中,处理PDF文件不仅限于读取整页文本,还有提取文档中的表格数据,图片或特定区域的内容,下面我们来看看如何使用Python实... 目录安装 python 库提取 PDF 文本内容:获取整页文本与指定区域内容获取页面上的所有文本内容获取

基于Python实现一个Windows Tree命令工具

《基于Python实现一个WindowsTree命令工具》今天想要在Windows平台的CMD命令终端窗口中使用像Linux下的tree命令,打印一下目录结构层级树,然而还真有tree命令,但是发现... 目录引言实现代码使用说明可用选项示例用法功能特点添加到环境变量方法一:创建批处理文件并添加到PATH1

Java使用HttpClient实现图片下载与本地保存功能

《Java使用HttpClient实现图片下载与本地保存功能》在当今数字化时代,网络资源的获取与处理已成为软件开发中的常见需求,其中,图片作为网络上最常见的资源之一,其下载与保存功能在许多应用场景中都... 目录引言一、Apache HttpClient简介二、技术栈与环境准备三、实现图片下载与保存功能1.

canal实现mysql数据同步的详细过程

《canal实现mysql数据同步的详细过程》:本文主要介绍canal实现mysql数据同步的详细过程,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的... 目录1、canal下载2、mysql同步用户创建和授权3、canal admin安装和启动4、canal

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

Nexus安装和启动的实现教程

《Nexus安装和启动的实现教程》:本文主要介绍Nexus安装和启动的实现教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、Nexus下载二、Nexus安装和启动三、关闭Nexus总结一、Nexus下载官方下载链接:DownloadWindows系统根

SpringBoot集成LiteFlow实现轻量级工作流引擎的详细过程

《SpringBoot集成LiteFlow实现轻量级工作流引擎的详细过程》LiteFlow是一款专注于逻辑驱动流程编排的轻量级框架,它以组件化方式快速构建和执行业务流程,有效解耦复杂业务逻辑,下面给大... 目录一、基础概念1.1 组件(Component)1.2 规则(Rule)1.3 上下文(Conte

MySQL 横向衍生表(Lateral Derived Tables)的实现

《MySQL横向衍生表(LateralDerivedTables)的实现》横向衍生表适用于在需要通过子查询获取中间结果集的场景,相对于普通衍生表,横向衍生表可以引用在其之前出现过的表名,本文就来... 目录一、横向衍生表用法示例1.1 用法示例1.2 使用建议前面我们介绍过mysql中的衍生表(From子句

MybatisPlus service接口功能介绍

《MybatisPlusservice接口功能介绍》:本文主要介绍MybatisPlusservice接口功能介绍,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友... 目录Service接口基本用法进阶用法总结:Lambda方法Service接口基本用法MyBATisP

Mybatis的分页实现方式

《Mybatis的分页实现方式》MyBatis的分页实现方式主要有以下几种,每种方式适用于不同的场景,且在性能、灵活性和代码侵入性上有所差异,对Mybatis的分页实现方式感兴趣的朋友一起看看吧... 目录​1. 原生 SQL 分页(物理分页)​​2. RowBounds 分页(逻辑分页)​​3. Page