监听Excel表格导入数据生成列表

1、先下载 在导入

npm install  xlsx -D

import * as XLSX from 'xlsx'

2、html页面的代码

<template>
  <div>
  <!-- 导入 -->
  <el-button  @click="importExcel">导 入</el-button>
  <!-- 导入文件input框 -->
  <input type="file" ref="upload" accept=".xls, .xlsx" style="display: none;" />
  <div>
	<el-table  :data="onDutyList" style="width: 100%;">
      <el-table-column  prop="title" label="试题" width="180"> </el-table-column>
      <el-table-column prop="chose_a" label="选项A" width="180"></el-table-column>
      <el-table-column prop="chose_b" label="选项B">  </el-table-column>
	  <el-table-column prop="chose_c" label="选项C"> </el-table-column>
	  <el-table-column  prop="chose_d" label="选项D"> </el-table-column>
	  <el-table-column prop="answer" label="标准答案">  </el-table-column>
  </el-table>
  </div>
  </div>
</template>

3、js代码

export default {
  data() {
    return {
      onDutyList: [], // 保存导入的excel表格数据
       orgPath: null, // 组织路径
    };
  },
  mounted() {
	    //绑定监听表格导入事件
	    this.$refs.upload.addEventListener("change", e => {
	      this.readExcel(e);
	    });
	  },
  methods: {
     // 点击导入按钮触发input上传文件
	    importExcel(){
	      // 通过dispatchEvent触发点击事件
	      this.$refs.upload.dispatchEvent(new MouseEvent('click')) 
	    },
      readExcel(e) {
	      var that = this;
	      const files = e.target.files;
	      // 判断是否导入文件或者导入文件的格式是否正确
	      if (files.length <= 0) {
	        //如果没有文件名
	        return false;
	      } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
	        this.$Message.error("上传格式不正确，请上传xls或者xlsx格式");
	        return false;
	      }
	      const fileReader = new FileReader();
	      fileReader.onload = ev => {
	        try {
	          const data = ev.target.result;
            const workbook = XLSX.read(data, {
	            type: "binary"
	          })
	          const wsname = workbook.SheetNames[0]; //取第一张表
	          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
	          that.onDutyList = []; //清空接收数据，把导入的excel数据转化成json格式存储到data中
	          //编辑数据
	          for (var i = 0; i < ws.length; i++) {
	            var sheetData = {
	              // 使用day.js把日期转化为时间戳
	              // 这里配置导入excel表的数据格式
								title: ws[i].试题,
								chose_a: ws[i].选项A,
	              chose_b: ws[i].选项B,
	              chose_c: ws[i].选项C,
	              chose_d: ws[i].选项D,
	              answer: ws[i].答案,
	            };
	            that.onDutyList.push(sheetData);
	          }
	          // 清空上传input
	          this.$refs.upload.value = "";
	        } catch (e) {
	          return false;
	        }
	      };
	      fileReader.readAsBinaryString(files[0]);
	      // 获取orgPath
	      // this.getOrgPath()
	    },
	    // 通过当前用户获取组织orgPath
	    // 这个函数里面的代码,根据个人需求,可以不要
	    async getOrgPath(){
	      const userID = window.sessionStorage.getItem('userID')
	      const {data} = await get (`/api/xxx/users/${userID}/details`)
	      this.orgPath = data.userDetails[0].orgPath
	      this.orgName = data.userDetails[0].orgName
	      if(this.orgPath.length === 2 ){
	        this.orgPath = this.orgPath.substring(0,1)
	      }
	      if(this.orgPath.length > 2 ){
	        this.orgPath = this.orgPath.substring(2,3)
	      }
	      // 把orgPath添加到onDutyList的子项中
	      this.onDutyList.forEach(v => {
	        v.orgID = parseInt(this.orgPath)
	        v.orgName = this.orgName
	      })
	      // 向后端添加导入的excel数据
	      this.addMaryDutyData()
	    },
	    // 向后端添加导入的excel数据
	    async addMaryDutyData(){
	      const {data} = await post(`/api/on-duty-reports`, {
	        'onDutyList': this.onDutyList
	      })
	      if(data.errCode === 200){
	        this.$message.success("添加成功!")
	      }else{
	        this.$message.error("添加失败!")
	      }
	      // 更新表格数据, 这个方法是刷新表格数据的函数
	      this.getTableData()
    }
  }
};

注意：getOrgPath() 方法根据实际需求进行添加

          excel 表导入数据生成表格    importExcel() 和    readExcel(e) 即可