vue表格复制粘贴

效果图：

说明：想要实现从excel表格复制内容之后，在vue页面上粘贴。有两个情况：

（1）全部列都可以粘贴：无论从哪一列点击开始粘贴，都是从点击的列开始粘贴。效果如上图1

（2）只有指定几列可以粘贴：点击哪一列开始粘贴，从此列开始粘贴，如果点击的列不是可以粘贴的列，那么也是从可以粘贴的列开始粘贴（只能点击可以粘贴列的前面列才可以粘贴，点击后面列不能粘贴）效果如上图2

注意：如果多列需要粘贴，那么这些列必须是相邻列。比如：columns=[name,key,age],那么不能只粘贴{name,age},中间不能有跳过的列。

实现过程：

1、普通–全部列都可以粘贴

（1）html

 <Table border :data="tableData" :columns="columns" size="normal" @paste.native="pasteInfo($event)" @on-cell-click="showDetail"></Table>

（2）data

data(){return{currentRowIndex: undefined,currentColumnIndex: undefined,currentColumnKey: undefined,rowsInfo:[],emptyObj: { //全部列都可以粘贴name:undefined,age:undefined,bir:undefined,asg:undefined,},tableData:[{name:'xzz',age:'18',bir:'xs',asg:'8888'},{name:'xzz',age:'18',bir:'xs',asg:'8888'},{name:'xzz',age:'18',bir:'xs',asg:'8888'}],columns:[{key:'name',align:'center'},{key:'age',align:'center'},{key:'bir',align:'center'},{key:'asg',align:'center'}],}
}

（3）methods

pasteInfo(e) {try {var data = null;var clipboardData = e.clipboardData; // IEif (!clipboardData) {//chromeclipboardData = e.originalEvent.clipboardData;}//复制过来的内容data = clipboardData.getData("Text");console.log(data)//首先对源头进行解析var rowStrArray = data.split("\n");//拆成很多行console.log(rowStrArray,'rowStrArray')this.rowsInfo = [];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]);}this.rowsInfo.push(row);}console.log(this.rowsInfo,'rowInfo')for (var j = 0; j < this.rowsInfo.length; j++) {console.log(this.currentRowIndex,'this.currentRowIndex')if(this.currentRowIndex+j > this.tableData.length - 1){break}this.temp = JSON.parse(JSON.stringify(this.tableData[this.currentRowIndex+j]))console.log(this.temp,'temp')let num = 0let numFlag = 0 //从哪一列开始粘贴：全部列都可以粘贴(即从第0列可以粘贴)for (var key in this.emptyObj) {if (!this.rowsInfo[j][num]) {break}if (this.currentColumnIndex <= numFlag) {this.temp[key] = this.rowsInfo[j][num]num = num + 1}numFlag = numFlag + 1}this.$set(this.tableData, this.currentRowIndex+j, this.temp)}// this.$emit('update:tableData', this.tableData)this.cloneDataList = JSON.parse(JSON.stringify(this.tableData))} catch(err) {this.$Message.error({content: '请选择复制位置'})}},showDetail(row, column, data, event){console.log(row,column)this.currentRowIndex = row._indexthis.currentColumnIndex = column._indexthis.currentColumnKey = column.key},

2、如果只粘贴其中两列

emptyObj: {//只粘两个字段(即只粘贴两列)bir列开始粘贴，bir是第二列bir:undefined,asg:undefined,
},

methods

 //复制粘贴事件pasteInfo(e) {try {var data = null;var clipboardData = e.clipboardData; // IEif (!clipboardData) {//chromeclipboardData = e.originalEvent.clipboardData;}//复制过来的内容data = clipboardData.getData("Text");console.log(data)//首先对源头进行解析var rowStrArray = data.split("\n");//拆成很多行console.log(rowStrArray,'rowStrArray')this.rowsInfo = [];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]);}this.rowsInfo.push(row);}console.log(this.rowsInfo,'rowInfo')for (var j = 0; j < this.rowsInfo.length; j++) {console.log(this.currentRowIndex,'this.currentRowIndex')if(this.currentRowIndex+j > this.tableData.length - 1){break}this.temp = JSON.parse(JSON.stringify(this.tableData[this.currentRowIndex+j]))console.log(this.temp,'temp')let num = 0let numFlag = 2 //限制从第几列开始粘贴（从key=bir列开始粘贴，bir是第二列所有=2）for (var key in this.emptyObj) {if (!this.rowsInfo[j][num]) {break}if (this.currentColumnIndex <= numFlag) {this.temp[key] = this.rowsInfo[j][num]num = num + 1}numFlag = numFlag + 1}this.$set(this.tableData, this.currentRowIndex+j, this.temp)}// this.$emit('update:tableData', this.tableData)this.cloneDataList = JSON.parse(JSON.stringify(this.tableData))} catch(err) {this.$Message.error({content: '请选择复制位置'})}},showDetail(row, column, data, event){console.log(row,column)this.currentRowIndex = row._indexthis.currentColumnIndex = column._indexthis.currentColumnKey = column.key},

3、如果只粘贴其中一列

 emptyObj: {//只粘一个字段(age是第一列，即从第一列开始粘贴)age:undefined},

 pasteInfo(e) {try {var data = null;var clipboardData = e.clipboardData; // IEif (!clipboardData) {//chromeclipboardData = e.originalEvent.clipboardData;}//复制过来的内容data = clipboardData.getData("Text");console.log(data)//首先对源头进行解析var rowStrArray = data.split("\n");//拆成很多行console.log(rowStrArray,'rowStrArray')this.rowsInfo = [];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]);}this.rowsInfo.push(row);}console.log(this.rowsInfo,'rowInfo')for (var j = 0; j < this.rowsInfo.length; j++) {console.log(this.currentRowIndex,'this.currentRowIndex')if(this.currentRowIndex+j > this.tableData.length - 1){break}this.temp = JSON.parse(JSON.stringify(this.tableData[this.currentRowIndex+j]))console.log(this.temp,'temp')let num = 0let numFlag = 1 //从第一列开始粘贴for (var key in this.emptyObj) {if (!this.rowsInfo[j][num]) {break}if (this.currentColumnIndex <= numFlag) {this.temp[key] = this.rowsInfo[j][num]num = num + 1}numFlag = numFlag + 1}this.$set(this.tableData, this.currentRowIndex+j, this.temp)}// this.$emit('update:tableData', this.tableData)this.cloneDataList = JSON.parse(JSON.stringify(this.tableData))} catch(err) {this.$Message.error({content: '请选择复制位置'})}},showDetail(row, column, data, event){console.log(row,column)this.currentRowIndex = row._indexthis.currentColumnIndex = column._indexthis.currentColumnKey = column.key},

-----------------------------------------------扩展----------------------------------------------

以上是普通的粘贴，如果遇到在粘贴的过程中需要对粘贴的内容进行修改，比如：select 选择框对应的字典值就经常遇到，不能只显示字典code码，需要转换为对应的汉字。

 pasteInfo(e) {try {//获得粘贴的文字var data = null;var clipboardData = e.clipboardData; // IEif (!clipboardData) {//chromeclipboardData = e.originalEvent.clipboardData;}data = clipboardData.getData("Text");var rowStrArray = data.split("\n");this.rowsInfo = [];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].replace("\r",""));}this.rowsInfo.push(row);}for (var j = 0; j < this.rowsInfo.length; j++) {if(this.currentRowIndex+j > this.tableData.length - 1){break}if(this.tableData[this.currentRowIndex+j].controlPoint === 'aaa' || this.tableData[this.currentRowIndex+j].controlPoint === 'sss' ){continue}this.temp = JSON.parse(JSON.stringify(this.tableData[this.currentRowIndex+j]))let num = 0let numFlag = 2for (var key in this.emptyObj) {if (!this.rowsInfo[j][num]) {break}if (this.currentColumnIndex-1 <= numFlag) {this.temp[key] = this.rowsInfo[j][num]//key == 'complianceDesc'时，对值在这里进行修改if (key == 'complianceDesc') {this.temp['compliance'] = this.getKey(this.rowsInfo[j][num])}if (this.temp.cellClassName && this.temp.cellClassName[key]) {delete this.temp.cellClassName[key]}num = num + 1}numFlag = numFlag + 1}this.$set(this.tableData, this.currentRowIndex+j, this.temp)}this.$emit('update:tableData', this.tableData)this.cloneDataList = JSON.parse(JSON.stringify(this.tableData))           }catch(err) {this.$Message.error({content: '请选择复制位置'}) }},

完整代码

<template><section><div><Table border :data="tableData" :columns="columns" size="normal" @paste.native="pasteInfo($event)" @on-cell-click="showDetail"></Table></div></section>
</template><script>
export default {name: "EditableSecurity",data() {return {rowsInfo:[],currentRowIndex: undefined,currentColumnIndex: undefined,temp:{},emptyObj: { //需要复制粘贴的key值列// name:undefined,// age:undefined,bir:undefined,asg:undefined,},tableData:[{name:'xzz',age:'18',bir:'xs',asg:'8888'},{name:'xzz',age:'18',bir:'xs',asg:'8888'},{name:'xzz',age:'18',bir:'xs',asg:'8888'}],columns:[{key:'name',align:'center'},{key:'age',align:'center'},{key:'bir',align:'center'},{key:'asg',align:'center'}],}},methods: {//复制粘贴事件pasteInfo(e) {try {var data = null;var clipboardData = e.clipboardData; // IEif (!clipboardData) {//chromeclipboardData = e.originalEvent.clipboardData;}//复制过来的内容data = clipboardData.getData("Text");console.log(data)//首先对源头进行解析var rowStrArray = data.split("\n");//拆成很多行console.log(rowStrArray,'rowStrArray')this.rowsInfo = [];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]);}this.rowsInfo.push(row);}console.log(this.rowsInfo,'rowInfo')for (var j = 0; j < this.rowsInfo.length; j++) {console.log(this.currentRowIndex,'this.currentRowIndex')if(this.currentRowIndex+j > this.tableData.length - 1){break}this.temp = JSON.parse(JSON.stringify(this.tableData[this.currentRowIndex+j]))console.log(this.temp,'temp')let num = 0let numFlag = 2 //限制从第几列开始粘贴(如果全部列都可以粘贴,就是从0列粘贴,numFlag=0)for (var key in this.emptyObj) {if (!this.rowsInfo[j][num]) {break}if (this.currentColumnIndex <= numFlag) {this.temp[key] = this.rowsInfo[j][num]num = num + 1}numFlag = numFlag + 1}this.$set(this.tableData, this.currentRowIndex+j, this.temp)}// this.$emit('update:tableData', this.tableData)} catch(err) {this.$Message.error({content: '请选择复制位置'})}},showDetail(row, column, data, event){console.log(row,column)this.currentRowIndex = row._indexthis.currentColumnIndex = column._index},},
}
</script>

vue实现excel表格复制粘贴相关推荐

计算机表格复制粘贴后不变,excel表格复制粘贴后格式不变
Excel使用过程中经常需要将一个表格内容复制粘贴到其他表格中去.如果原始表格设置了行高和列宽,选中要复制的区域复制后,当在其他表格选择一个单元格进行粘贴时,行高和列宽就都变了.下面介绍excel表格 ...
Excel表格复制粘贴后保持格式不变
Excel表格复制粘贴后保持格式不变目录 Excel表格复制粘贴后保持格式不变方法一:1.点左上角的"倒三角"全选表格,按快捷键"Ctrl+C"复制表格 2 ...
微信小程序，从excel表格复制粘贴后数据录入，以及json转excel格式
其实是不想用云函数或者npm,仅需对数据表进行一个复制粘贴的基础操作,表格格式参考excel,弊端也很明显,表格中不可以存在单个 " ,否则将无法换行,需要已知表格内的数据格式比较简单,不存 ...
Vue实现复制excel表格内容粘贴至网页
Vue实现复制excel表格内容粘贴至网页有一个项目要求复制excel表格内容粘贴至网页表格,并且自动生成格式(合并单元格等) (别问为什么不直接上传excel表格,用户不喜欢...) 最后决定的做 ...
Computer：如何将表格以正确地姿势从Excel文件复制粘贴到word文件中(保证两个数据源一致)
Computer:如何将表格以正确地姿势从Excel文件复制粘贴到word文件中(保证两个数据源一致) 目录如何将表格以正确地姿势从Excel文件复制粘贴到word文件中(保证两个数据源一致) 表格 ...
sql如何粘贴一列不同的数值_原来Excel的复制粘贴有这么多不为人知的用法
原创作者: EH看见星光转自: Excel星球嗨,大家好,我是星光,今天给大家总结分享的表格技巧是:复制粘贴. 说起复制.粘贴,大概是职场人士最熟悉的两个表格操作动作了,肯定有朋友会想这有什么好分 ...
matlab中rowref的意思,Excel 中出现#REF是什么意思？(excel表格复制数据显示ref)
EXCEL表格复制到另一表格的标签页中,全部显示为REF 应该是公式单元格出现了REF, 这是公式引用单元格缺失导致的.表格整体复制的话,如果表格中有引用到其他工作表中的内容,还是会让你作选择的. E ...
excel里面复制粘贴整个sheet
有时候需要在excel里面复制粘贴整个sheet,这个很简单的操作在百度上搜索到的结果有很多都是无效的,比如点击左上角行与列交汇处(下图红框),ctrl+c,再到目标excel文件下面新建一个shee ...
将Excel表格复制到Word中
早上帮老板做文档,要把一个Excel表格贴到Word中做展示. 直接复制贴进来吧,表格大小和word不匹配.截图贴进来吧,表之大,一张截不下,最后通过万能的度娘找了一个完美粘贴表格的方案~ 第一步: ...

vue实现excel表格复制粘贴