Vue3 导入excel表格

Vue3 导入excel表格的实现过程如下：

首先，需要安装xlsx插件，可以使用以下命令进行安装：

npm i xlsx

然后，在vue-element-admin提供的导入功能的基础上，新建一个组件，位置为`src/components/UploadExcel`。可以参考以下代码：

// src/components/UploadExcel/index.vue

<template>
  <el-upload
    class="upload-demo"
    multiple
    method="post"
    action="api/excel/updown"
    style="margin-left: 10px"
    accept=".xlsx,.xls"
    :show-file-list="false"
    :on-success="success"
    name="files"
  >
    <el-button type="primary">导入</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    success(response) {
      // 处理导入成功的逻辑
    },
  },
};
</script>

接下来，需要在全局注册导入excel组件。可以在`main.js`文件中添加以下代码：

// main.js

import UploadExcel from './components/UploadExcel'

Vue.use(UploadExcel)

这样，就可以在Vue3项目中使用导入excel的功能了。

参考资料：
- \[vue-element-admin\](https://github.com/PanJiaChen/vue-element-admin)
- \[element-plus\](https://element-plus.org/#/zh-CN/component/upload)
- \[xlsx\](https://www.npmjs.com/package/xlsx) \[1\] \[2\]

#### 引用[.reference_title]
- *1* [封装一个可以导入Excel数据的组件且解决导入Excel数据产生的bug](https://blog.csdn.net/gxdzi/article/details/114002949)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [基于SpringBoot+EasyExcel+vue3实现excel表格的导入和导出](https://blog.csdn.net/weixin_51146329/article/details/123521425)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]