关于 vue项目 中实现导入Excel表 + 预览生成的Excel

项目场景（需求）：

1.分步骤填写数据，填写并上传业务Excel表，完成校验，并生成结果
2.生成的结果要和 业务Excel表一致，便于用户比较
3.若未填写正确，则提示用户错误信息，且重新提交

项目新建流程：

如下图所示：

业务Excel表：

如图所示：

---

功能实现思路：

1. 页面整体结构： 就是在index.vue里面 渲染4个不同的子路由

2. （重点）实现点击上传Excel——后端完成校验——生成预览效果

思路：

1. 请求接口，上传文件
2. 后端通过Python解析文件，把业务表格拆分成多个key,val值返回，如果填写的信息不符合要求，多返回一个error字段
3. 为了生成预览的时候达到和业务表格一致的效果，因此在写HTML的时候就把结构写好
4. 请求回来数据的时候直接v-for tr标签 渲染就可以了

代码：

上传组件：

<el-upload
      multiple
      ref="upload"
      class="upload_area"
      :auto-upload="false"
      accept=".xls,.xlsx"
      :on-change="handlePreview"
      :on-remove="handleRemove"
    >
    <el-button
      slot="trigger"
      size="small"
      type="primary"
      v-show="devfiles.length <= 0"
      >选择本地文件</el-button
    >
     <h3 slot="tip" class="el-upload__tip">
       提示:点击按钮后选择要导入的文件。
     </h3>
 </el-upload>

上传方法：

// ele上传相关 主要为了便于构造参数传给后端
handlePreview(file, fileList) {
   
  this.devfiles = [];
  fileList.forEach((item) => {
   
    this.devfiles.push(item.raw);
  }