vue项目实现excel表格导入到el-table表格

1.先安装第三方插件，该组件会帮我们解析excel文件

 npm i xlsx

封装一个组件，点击可以上传excel表格文件，并实现拖拽也可以上传，使用该组件时给该组件传入一个success函数，上传成功的回调

<template>
  <div class="upload-excel">
    <div class="btn-upload">
      <el-button
        :loading="loading"
        size="mini"
        type="primary"
        @click="handleUpload"
      >
        点击上传
      </el-button>
    </div>

    <input
      ref="excel-upload-input"
      class="excel-upload-input"
      type="file"
      accept=".xlsx, .xls"
      @change="handleClick"
    />
    <div
      class="drop"
      @drop="handleDrop"
      @dragover="handleDragover"
      @dragenter="handleDragover"
    >
      <i class="el-icon-upload" />
      <span>将文件拖到此处</span>
    </div>
  </div>
</template>
<script>
import * as XLSX from "xlsx/xlsx.mjs";
export default {
   
  props: {
   
    beforeUpload: Function, // eslint-disable-line
    onSuccess: Function, // eslint-disable-line
  },
  data() {
   
    return {
   
      loading: false,
      excelData: {
   
        header: null,
        results: null,
      },
    };
  },
  methods: {
   
    generateData({
     header, results }) {
   
      this.excelData.header = header;
      this.excelData.results = results;
      //使用该组件的时候，传入一个onSuccess 在函数里实现导入成功的回调
      this.onSuccess && this.onSuccess(this.excelData);
    },
    handleDrop(e) {
   
      e.stopPropagation();
      e.preventDefault();
      if (this.loading) return;
      const files = e.dataTransfer.files;
      if (files.length !== 1) {
   
        this.$message.error("Only support uploading one file!");
        return;
      }
      const rawFile = files[0]; // only use files[0]
      if (!this.isExcel(rawFile)) {
   
        this.$message.error(
          "Only supports upload .xlsx, .xls, .csv suffix files"
        );
        return false;
      }
      this.