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"); //复制过来的内容//首先对源头进行解析if (data && !data.includes('\r\n')) { // 单独复制文本，不是复制单个单元格data = data+'\r\n'}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>