使用iview + Vue从0到1实现前端读取excel表格并渲染到界面

在Vue.js中使用iView框架和vue-excel-import插件可以方便地实现前端读取Excel文件的功能，并将其数据渲染到页面上。以下是简单的步骤：

1. **安装依赖**:
- 首先需要安装`vue-excel-import`库，它是一个轻量级的Excel导入组件。你可以通过npm或yarn进行安装：

     npm install vue-excel-import iview axios
     # 或者
     yarn add vue-excel-import iview axios

2. **引入所需模块**:
在`main.js`或单文件组件的顶部，引入所需的组件和样式：

   import { ElButton } from 'iview';
   import ExcelReader from 'vue-excel-import';
   import 'iview/dist/styles/iview.css';
   import 'vue-excel-import/dist/vue-excel-import.css';

3. **配置Vue应用**:
在Vue实例的`mounted`生命周期钩子里，初始化Excel Reader组件并指定上传文件的方法：

   <template>
     <div>
       <el-button @click="handleFileUpload">选择Excel文件</el-button>
       <ExcelReader ref="excelReader" :on-success="handleSuccess" :on-error="handleError"></ExcelReader>
     </div>
   </template>

   <script>
   export default {
     components: {
       ExcelReader,
     },
     methods: {
       handleFileUpload() {
         this.$refs.excelReader.open();
       },
       // 接收解析后的数据
       handleSubmit(file) {
         this.$refs.excelReader.submit(file);
       },
       // 成功回调处理数据
       handleSuccess(data) {
         const parsedData = data.records; // 解析的数据数组
         this.renderToTable(parsedData); // 将数据渲染到表格或其他UI元素
       },
       // 错误回调处理错误信息
       handleError(error) {
         console.error('Error:', error);
       },
       renderToTable(data) {
         // 根据数据结构创建表格或使用iview的table组件
         // 示例：
         this.tableData = data.map(row => ({
           ...row,
         }));
       },
     },
   };
   </script>

4. **渲染数据**:
`handleSuccess`函数接收的是一个包含所有行的对象数组，你需要将这个数组转换为你希望展示的格式，然后在`renderToTable`方法中，将数据赋值给Vue组件的data属性，比如`<el-table>`。

5. **显示结果**:
现在你应该能看到一个表单按钮，点击后可以选择Excel文件。文件成功导入后，数据会被渲染到已设定好的`<el-table>`或者其他UI元素中。