1、效果图

可以全部复制粘贴，也可以单独对某行、某列进行复制粘贴

从excel复制粘贴到前端页面的table上

2、实现代码

html部分：

<template> <div> <el-table :data="tableData" border style="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.index this.columnIndex = column.index }, /** 复制粘贴 */ pasteInfo(e) { try { e.preventDefault(); //阻止默认粘贴事件 e.stopPropagation(); //阻止事件冒泡 var data = null; var clipboardData = e.clipboardData || window.clipboardData; // IE if (!clipboardData) { //chrome clipboardData = 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 = 0 let 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>