@

目录

• 说明

• 前提

• 代码仓库

• 步骤一：准备工作

• 步骤二：实现导入表格解析

• 步骤三：实现表格渲染

• 结语

• 本文旨在解决无需调用后端接口，实现前端读取表格文件，获取文件内容，渲染到界面的需求

• 我的其他文章可以解决扩展需求：

• 读取解析表格后执行自动单元格合并

• 读取解析表格后根据数据对比分析自动设置单元格颜色

• 读取解析表格后执行数据分析（透析）生成可满足用户自定义需求的echarts关系图

• 下载界面表格功能

公司平时做后台管理系统比较多，类似需求更是十分常见，我也写过类似帖子，但是都是只放代码从来不写注释和步骤，嘿嘿，话不多说，此文章为完整的记录：

平时我经常使用的是：

Ant Design + Angular

Element UI + Vue

Ant Design + Vue

方便起见，今天我们使用Element UI + Vue

基于vue-element-admin直接开始

1.码云地址

2.github地址

1. 点击进入vue-element-admin下载

2. 下载解压

3. 安装依赖、运行

4. 运行成功

5. 进入以下路径；

src\views\dashboard\index.vue

1. 删除无用代码，准备开始；

1. 增加 导入 按钮，保存刷新；

1. 下载xlsx 、引入；

2. 编写导入表格 功能、保存刷新；

3. 编写如下表格，用来测试功能 ；

4. 有时候，表格题目是中文，读取后我们想要得到英文属性名，那么 增加如下代码 、再次测试；

我们把表格改成不规则状态、保存、打开界面测试

1. 界面增加 表格组件 。

   
   

   data() {
   return {
   dataArr: [], // 表格内容数据数组
   // countArr: {}, // 分析表格数据以及表头，得到一个对照数组，用来进行自定义合并，本文暂时只写基础，不介绍自动合并单元格了哟~~我的其他文章有写自定义合并实现方法~
   tableColumn: [], // 表格表头配置数组
   tableLoading: false // 表格是否loading
   };
   },

2. 增加 表格渲染方法 。

备注：表格渲染方法中有一部分代码是用来映射中英文属性名的，这个是我增加的一个功能，有时候也不不需要使用，可以按自己需求来修改代码；

setTable(headers, excellist) {
      const tableTitleData = []; // 存储表格表头数据
      const tableMapTitle = {}; // 设置表格内容中英文对照用
      headers.forEach((_, i) => {
        tableMapTitle[_] = "prop" + i;
        tableTitleData.push({
          prop: "prop" + i,
          label: _,
          width: 100
        });
      });
      console.log("tableTitleData", tableTitleData);
      // 映射表格内容属性名为英文
      const newTableData = [];
      excellist.forEach(_ => {
        const newObj = {};
        Object.keys(_).forEach(key => {
          newObj[tableMapTitle[key]] = _[key];
        });
        newTableData.push(newObj);
      });
      console.log('newTableData',newTableData);
      this.tableColumn = tableTitleData;
      this.dataArr = newTableData;
    },

1. 调用 表格渲染方法 。

       // 在importExcel(e)方法中添加下面代码
         // 渲染表格1-1
         this.setTable(headers, excellist);
         // 渲染表格1-2

1. 功能测试

本代码支持不规则数据，没有表头的也可以渲染到界面哦~~

欢迎大家指出我代码的错误~

如果有更好的写法，欢迎大家提出来，共同进步哟~~