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

这篇具有很好参考价值的文章主要介绍了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部分：文章来源地址https://www.toymoban.com/news/detail-758097.html

<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>