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

1、效果图

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

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"); //复制过来的内容
        //首先对源头进行解析
        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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132