Vue.js与Excel数据交互：实现多行多列粘贴至Element UI表格

npm install element-ui --save

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

<template>
  <div>
   <el-table v-loading="loading" :data="tableData" size="mini" border style="width: 800px;">
      <el-table-column label="字段1" align="center" prop="data1">
        <template slot-scope="scope">
          <el-input v-model="scope.row.data1" size="mini" placeholder="请输入字段1" style="width: 100px;" />
        </template>
      </el-table-column>
      <el-table-column label="字段2" align="center" prop="data2">
        <template slot-scope="scope">
          <el-input v-model="scope.row.data2" size="mini" placeholder="请输入字段2" style="width: 100px;" />
        </template>
      </el-table-column>
      <el-table-column label="字段3" align="center" prop="data3">
        <template slot-scope="scope">
          <el-input v-model="scope.row.data3" size="mini" placeholder="请输入字段3" style="width: 100px;" />
        </template>
      </el-table-column>
      <el-table-column label="字段4" align="center" prop="data4">
        <template slot-scope="scope">
          <el-input v-model="scope.row.data4" size="mini" placeholder="请输入字段4" style="width: 100px;" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [{
        data1: null,
        data2: null,
        data3: null,
        data4: null
      }, {
        data1: null,
        data2: null,
        data3: null,
        data4: null
      }, {
        data1: null,
        data2: null,
        data3: null,
        data4: null
      }, {
        data1: null,
        data2: null,
        data3: null,
        data4: null
      }]
    }
  },
}
</script>

<template>
<el-table v-loading="loading" :data="tableData" size="mini" border style="width: 800px;" @paste.native="handlePaste($event)" @cell-click="cellClick" :cell-class-name="cellClassName">
  <!-- 表格列定义 -->
</el-table>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        // 表格数据
      ],
      rowIndex: 0,
      columnIndex: 0,
    };
  },
  methods: {
    handlePaste(event) {
      // 处理粘贴事件的逻辑
    },
    cellClick(row, column, cell, event) {
      // 处理单元格点击事件的逻辑
    },
    cellClassName({ row, column }) {
      // 处理行和列的信息
    }
  }
};
</script>

cellClassName({ row, column, rowIndex, columnIndex }) {
  row.index = rowIndex;
  column.index = columnIndex;
},

cellClick(row, column) {
  this.rowIndex = row.index;
  this.columnIndex = column.index;
},

handlePaste(event) {
  // 阻止默认的粘贴行为和事件冒泡。
  event.preventDefault()
  event.stopPropagation()
  // 获取剪贴板数据并提取纯文本内容。
  const clipboardData = event.clipboardData
  const text = clipboardData.getData('text/plain');
  // 将文本内容按行和制表符分割，转换为二维数组
  let pastedText = text.split('\n').map((row) => { return row.split('\t').map((ele) => { return parseFloat(ele) }) });
  // 初始化一个对象，用于匹配表格的列数据。
  let object = {
    data1: null,
    data2: null,
    data3: null,
    data4: null,
  }
  // 遍历处理每一行数据，根据行索引和列索引将数据填充到表格中。
  pastedText.forEach((ele1, index) => {
    if (this.rowIndex + index <= this.tableData.length - 1) {
      let item = JSON.parse(JSON.stringify(this.tableData[this.rowIndex + index]))
      let num = 0;
      let keyIndex = 0;
      // 使用循环和条件判断，将处理后的数据按列索引填充到克隆的行对象中
      for (var key in object) {
        if (num < ele1.length && keyIndex >= this.columnIndex) {
          item[key] = ele1[num] || ele1[num] == 0 ? ele1[num] : null
          // 使用this.$set()将更新后的行对象设置回表格数据中
          this.$set(this.tableData, this.rowIndex + index, item)
          num++;
        }
        keyIndex++;
      }
    }
  })
}