vue elementui 实现从excel从复制多行多列后粘贴到前端界面el-table

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>

本文链接：https://www.kjpai.cn/news/2024-03-26/149174.html，文章来源：网络cs，作者：欧阳逸，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！