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-columnprop="date"align="center"label="日期"width="180"><templateslot-scope="scope"><el-inputv-model="scope.row.date"placeholder="单行输入"clearable/></template></el-table-column><el-table-columnprop="name"align="center"label="姓名"width="180"><templateslot-scope="scope"><el-inputv-model="scope.row.name"placeholder="单行输入"clearable/></template></el-table-column><el-table-columnprop="address"align="center"label="地址"><templateslot-scope="scope"><el-inputv-model="scope.row.address"placeholder="单行输入"clearable/></template></el-table-column><el-table-columnprop="jg"align="center"label="籍贯"></el-table-column><el-table-columnprop="gz"align="center"label="工作"></el-table-column><el-table-columnprop="xz"align="center"label="薪资"></el-table-column><el-table-columnprop="age"align="center"label="年龄"><templateslot-scope="scope"><el-inputv-model="scope.row.age"placeholder="单行输入"clearable/></template></el-table-column><el-table-columnprop="sex"align="center"label="性别"><templateslot-scope="scope"><el-inputv-model="scope.row.sex"placeholder="单行输入"clearable/></template></el-table-column><el-table-columnprop="tel"align="center"label="电话"><templateslot-scope="scope"><el-inputv-model="scope.row.tel"placeholder="单行输入"clearable/></template></el-table-column></el-table></div></template>

js部分：

<script>exportdefault{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;// IEif(!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 =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>