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
')) { // 单独复制文本，不是复制单个单元格
data = data+'\r
'
}
var rowStrArray = data.split("\r
"); //拆成多行
let rows = [];
for (var i = 0; i < rowStrArray.length-1; i++) {
var row = [];
var tdStrArray = rowStrArray[i].split("	"); //按列拆分
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>