vue elementui 实现从excel从复制多行多列后粘贴到前端界面el-table
1、效果图
可以全部复制粘贴,也可以单独对某行、某列进行复制粘贴
从excel复制粘贴到前端页面的table上
2、实现代码
html部分:
<template><div><el-table:data="tableData"borderstyle="width: 100%":cell-class-name="getCellIndex"@paste.native="pasteInfo($event)"@cell-click="cellClick"><el-table-column prop="date" align="center" label="日期" width="180"><template slot-scope="scope"><el-input v-model="scope.row.date" placeholder="单行输入" clearable /></template></el-table-column><el-table-column prop="name" align="center" label="姓名" width="180"><template slot-scope="scope"><el-input v-model="scope.row.name" placeholder="单行输入" clearable /></template></el-table-column><el-table-column prop="address" align="center" label="地址"><template slot-scope="scope"><el-input v-model="scope.row.address" placeholder="单行输入" clearable /></template></el-table-column><el-table-column prop="jg" align="center" label="籍贯"></el-table-column><el-table-column prop="gz" align="center" label="工作"></el-table-column><el-table-column prop="xz" align="center" label="薪资"></el-table-column><el-table-column prop="age" align="center" label="年龄"><template slot-scope="scope"><el-input v-model="scope.row.age" placeholder="单行输入" clearable /></template></el-table-column><el-table-column prop="sex" align="center" label="性别"><template slot-scope="scope"><el-input v-model="scope.row.sex" placeholder="单行输入" clearable /></template></el-table-column><el-table-column prop="tel" align="center" label="电话"><template slot-scope="scope"><el-input v-model="scope.row.tel" placeholder="单行输入" clearable /></template></el-table-column></el-table></div>
</template>
js部分:
<script>
export default {name: 'testDemo',data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',jg: '北京',gz: '学生',xz: '0',age: 18,sex: '女',tel: '13112345678',}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄',jg: '上海',gz: '销售',xz: '10000',age: 19,sex: '男',tel: '13112345678',}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄',jg: '上海',gz: '行政',xz: '5000',age: 31,sex: '男',tel: '13112345678',}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄',jg: '江苏',gz: '做生意',xz: '50000+',age: 48,sex: '男',tel: '13112345678',}],rowIndex: undefined,columnIndex: undefined,}},methods: {/** 设置行、列索引 */getCellIndex: function ({ row, column, rowIndex, columnIndex }) {row.index = rowIndex;column.index = columnIndex;},/** 点击单元格 */cellClick(row, column, cell, event) {// console.log(row, column, cell, event);this.rowIndex = row.indexthis.columnIndex = column.index},/** 复制粘贴 */pasteInfo(e) {try {e.preventDefault(); //阻止默认粘贴事件e.stopPropagation(); //阻止事件冒泡var data = null;var clipboardData = e.clipboardData || window.clipboardData; // IEif (!clipboardData) {//chromeclipboardData = e.originalEvent.clipboardData;}data = clipboardData.getData("Text"); //复制过来的内容//首先对源头进行解析var rowStrArray = data.split("\r\n"); //拆成多行let rows = [];for (var i = 0; i < rowStrArray.length-1; i++) {var row = [];var tdStrArray = rowStrArray[i].split("\t"); //按列拆分for (var j = 0; j < tdStrArray.length; j++) {row.push(tdStrArray[j]);}rows.push(row);}// console.log(rows,'---------rows')let emptyObj = { //需要复制粘贴的key值列date: undefined,name: undefined,address: undefined,jg: undefined,gz: undefined,xz: undefined,age: undefined,sex: undefined,tel: undefined,}for (var j = 0; j < rows.length; j++) {if(this.rowIndex+j > this.tableData.length - 1){break}let item = {}item = JSON.parse(JSON.stringify(this.tableData[this.rowIndex+j]))let num = 0let numFlag = 0 //从哪一列开始粘贴:全部列都可以粘贴(即从第0列可以粘贴)for (var key in emptyObj) {if (!rows[j][num]) {break}// console.log('numFlag--', numFlag, 'this.columnIndex--', this.columnIndex, 'num-', num);if (this.columnIndex <= numFlag) {// 针对不能修改的列字段做处理,可以复制粘贴的列才做赋值。根据需求加下面的if判断if (key !== 'jg' && key !== 'gz' && key !== 'xz') {item[key] = rows[j][num]}num = num + 1}numFlag = numFlag + 1}this.$set(this.tableData, this.rowIndex+j, item)}} catch(err) {this.$message.error('请选择粘贴位置')}},}
}
</script>
相关文章:
vue elementui 实现从excel从复制多行多列后粘贴到前端界面el-table
1、效果图 可以全部复制粘贴,也可以单独对某行、某列进行复制粘贴 从excel复制粘贴到前端页面的table上 2、实现代码 html部分: <template><div><el-table:data"tableData"borderstyle"width: 100%":cell-class-…...
C++学习 --类和对象之友元
目录 1, 全局函数做友元 2, 类做友元 3, 成员函数做友元 友元可以让函数、成员函数、类, 访问另外一个类的私有变量 1, 全局函数做友元 在类中, 通过friend 数据类型 函数名()方式,将函数当…...
Flutter笔记:使用Flutter构建响应式PC客户端/Web页面-案例
Flutter笔记 使用Flutter构建响应式PC客户端/Web页面-案例 作者:李俊才 (jcLee95):https://blog.csdn.net/qq_28550263 邮箱 :291148484163.com 本文地址:https://blog.csdn.net/qq_28550263/article/detai…...
聊聊LogbackMDCAdapter
序 本文主要研究一下LogbackMDCAdapter MDCAdapter org/slf4j/spi/MDCAdapter.java public interface MDCAdapter {/*** Put a context value (the <code>val</code> parameter) as identified with* the <code>key</code> parameter into the cur…...
spring命名空间注入和XML自动装配、引入外部配置文件
Spring p命名空间注入util命名空间注入基于XML的自动装配根据名称自动装配 Spring引入外部属性配置文件 p命名空间注入 作用:简化配置。 使用p命名空间注入的前提条件包括两个: ● 第一:在XML头部信息中添加p命名空间的配置信息:…...
【2024年11月份--2024精灵云校招C++笔试题】
考试形式 笔试考了三道算法题,笔试形式为阅读题目,然后用中文给出算法思路,最后给出算法例程,分数各占一半,简单,中等,复杂各一道题。我看9月份有人也是考这3道题,一模一样。 第…...
Visual Studio 2019下编译OpenCV 4.7 与OpenCV 4.7 contrib
一、环境 使用的环境是Win10,Visual Studio 2019,Cmake3.28,cdua 11.7,cudnn 8.5,如果只是在CPU环境下使用,则不用安装CUDA。要使用GPU处理,安装好CUDA之后,要测试安装的CUDA是否能用。不能正常使用的话,添加一下系统…...
【Linux网络】系统调优之聚合链路bonding,可以实现高可用和负载均衡
一、什么是多网卡绑定 二、聚合链路的工作模式 三、实操创建bonding设备(mode1) 1、实验 2、配置文件解读 3、查看bonding状态,验证bonding的高可用效果 三、nmcli实现bonding 一、什么是多网卡绑定 将多块网卡绑定同一IP地址对外提供服务…...
k8s持久化存储PV、PVC
容器磁盘上的文件的生命周期是短暂的,这就使得在容器中运行重要应用时会出现一些问题。首先,当容器崩溃时,kubelet 会重启它,但是容器中的文件将丢失——容器以干净的状态(镜像最初的状态)重新启动。其次&a…...
CocosCreator3.8原生引擎源码研究
1. Cocos Creator引擎架构图 2. 原始引擎源码流程图 下图中包含Android native层引擎到js适配层的启动和主循环的启用流程和必要说明,本猿比较懒,暂时不细述了,各位看官直接看图吧,还在细化扩充,后续逐渐更新。。。 版…...
高二英语上
unit 1 1.yarn三种意思 1.码; 2.庭院,天井; 3.花园;down**down 在这里是介词,也可以作副词,与 down 相对的是 up。请比较下列两句: 1.Look! Hes driving down the street . 2.Look! Hes driving up the street .这两例…...
JavaWeb Day10 案例 准备工作
目录 一、需求说明 二、环境搭建 (一)数据库 (二)后端 ①controller层 1.DeptController.java 2.EmpController.java ②mapper层 1.DeptMapper.java 2.EmpMapper.java ③pojo层 1.Dept.java 2.Emp.jav…...
Nginx:不同域名访问同一台机器的不同项目
Nginx很简单就可以解决同一台机器同时跑两个或者多个项目,而且都通过域名从80端口走。 以Windows环境下nginx服务为例,配置文件nginx.conf中,http中加上 include /setup/nginx-1.20.1/conf/conf.d/*.conf;删除server部分,完整如…...
C++(20):new数组时元素个数自动推到
C20在new数组时可以根据初始化列表,自动推到元素个数: #include <iostream> using namespace std;int main() {int *pd new int[]{1,2,3,4};for(auto i 0; i < 4; i){cout<<pd[i]<<endl;}return 0; }运行程序输出: 1…...
使用visualStudio发布可执行文件
编译成功后会在程序项目的路径下创建一个debug文件夹和一个release文件夹 文件夹中的具体文件入下所示 生成32位的可执行文件 32位的可执行文件可以在64位的计算机中执行,而64位的操作系统程序只能在64位的计算机中执行安装运行库的安装包根据电脑的版本选择合适的…...
yolo系列报错(持续补充ing)
文章目录 export GIT_PYTHON_REFRESHquiet解决 没有pt权重文件解决 python文件路径报错解决 读取文件列名报错解决 导入不同文件夹出错解决 megengine没有安装解决然后你发现它竟然还没有用 export GIT_PYTHON_REFRESHquiet 设置环境变量 GIT_PYTHON_REFRESH ,这个…...
Technology Strategy Patterns 学习笔记9 - bringing it all together
1 Patterns Map 2 Creating the Strategy 2.1 Ansoff Growth Matrix 和owth-share Matrix 区别参见https://fourweekmba.com/bcg-matrix-vs-ansoff-matrix/ 3 Communicating...
Redis(12)| 过期删除策略和内存淘汰策略
Redis 是可以对 key 设置过期时间的,因此需要有相应的机制将已过期的键值对删除,而做这个工作的就是过期键值删除策略。 如何设置过期时间 先说一下对 key 设置过期时间的命令。 设置 key 过期时间的命令一共有 4 个: expire key n&#x…...
Go-服务注册和发现,负载均衡,配置中心
文章目录 什么是服务注册和发现技术选型 Consul 的安装和配置1. 安装2. 访问3. 访问dns Consul 的api接口go操作consulgrpc下的健康检查grpc的健康检查规范动态获取可用端口号 负载均衡策略1. 什么是负载均衡2. 负载均衡策略1. 集中式load balance2. 进程内load balance3. 独立…...
k8s-实验部署 1
1、k8s集群部署 更改所有主机名称和解析 开启四台实验主机,k8s1 仓库;k8s2 集群控制节点; k8s3 和k8s4集群工作节点; 集群环境初始化 使用k8s1作为仓库,将所有的镜像都保存在本地,不要将集群从外部走 仓库…...
Ubuntu系统下交叉编译openssl
一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机:Ubuntu 20.04.6 LTSHost:ARM32位交叉编译器:arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...
R语言AI模型部署方案:精准离线运行详解
R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器
——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台,覆盖应用全生命周期测试需求,主要提供五大核心能力: 测试类型检测目标关键指标功能体验基…...
Python爬虫(二):爬虫完整流程
爬虫完整流程详解(7大核心步骤实战技巧) 一、爬虫完整工作流程 以下是爬虫开发的完整流程,我将结合具体技术点和实战经验展开说明: 1. 目标分析与前期准备 网站技术分析: 使用浏览器开发者工具(F12&…...
【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】
1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件(System Property Definition File),用于声明和管理 Bluetooth 模块相…...
C# SqlSugar:依赖注入与仓储模式实践
C# SqlSugar:依赖注入与仓储模式实践 在 C# 的应用开发中,数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护,许多开发者会选择成熟的 ORM(对象关系映射)框架,SqlSugar 就是其中备受…...
鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/
使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题:docker pull 失败 网络不同,需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具
第2章 虚拟机性能监控,故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令:jps [options] [hostid] 功能:本地虚拟机进程显示进程ID(与ps相同),可同时显示主类&#x…...
JavaScript基础-API 和 Web API
在学习JavaScript的过程中,理解API(应用程序接口)和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能,使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...
Golang——6、指针和结构体
指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...
