vue + elementui 实现前端读取 excel 表格内容

在 Vue.js 开发环境中使用 Element UI 和相关的插件如 "vue-excel-import" 可以方便地处理 Excel 文件读取。以下是简单的步骤：

1. **安装依赖**：
首先，需要在项目中安装必要的库。运行 `npm install` 或者 `yarn add` 来安装：

   npm install axios file-saver js-xlsx element-ui vue-excel-import

2. **引入组件和配置**：
引入 Element UI 的表格组件和其他必要组件，并在 main.js 中注册 `vue-excel-import` 插件：

   import { ElTable } from 'element-ui';
   import { ExcelImport } from 'vue-excel-import';

   Vue.use(ExcelImport);

3. **创建 Excel 读取功能**：
创建一个 Vue 组件，例如 `UploadExcel.vue`，并使用 `excel-import` 功能来接收文件并解析数据：

   <template>
     <el-button @click="upload">导入 Excel</el-button>
     <el-table :data="tableData" ref="excelTable">
       <!-- 表格列配置 -->
     </el-table>
   </template>

   <script>
   export default {
     data() {
       return {
         tableData: [],
         file: null,
       };
     },
     methods: {
       upload() {
         this.$refs['excelTable'].import({
           onBefore(file) {
             // 这里可以预览文件、限制上传大小等操作
           },
           onStart({ files }) {
             // 显示进度条
           },
           onFinish(result) {
             const { data } = result;
             this.tableData = data.map((row) => row.data); // 假设每个sheet的数据是一个数组
           },
           onError(error) {
             console.error('导入失败:', error);
           }
         }, this.file);
       }
     },
     // 其他生命周期钩子和选项
   };
   </script>

4. **HTML 表单提交**：
添加一个表单元素让用户选择 Excel 文件，比如使用 `<input type="file" @change="handleFileChange">`，然后在 `handleFileChange` 函数中设置 `this.file`。

注意：实际操作中，你需要处理不同 Excel 格式的问题，例如 `.xls` 和 `.xlsx`，并且根据返回的数据格式适配表格展示。