vue 批量添加组件(Excel导入)

最新推荐文章于 2025-05-14 09:14:01 发布

原创

最新推荐文章于 2025-05-14 09:14:01 发布 · 2.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#批量添加

本文介绍了如何在Vue中创建一个用于批量添加组件的功能，特别是通过Excel文件导入。首先安装了xlsx库，然后将组件放在components/UploadExcel/index.vue中，并提供了自定义样式的按钮。在使用组件的页面中，通过<upload-excel-component>标签引用，配合on-success和before-upload等方法进行操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此组件得好处是识别excel的文件。

1.首先安装xlsx:

npm install xlsx

因为该组件是共用组件，很多页面都会用到，因此该组件应该放到 components/UploadExcel/index.vue(代码如下)

index.vue

可根据自己所需按钮来修改样式

<template>
  <div>
    <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
    <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
      <!--<el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">Browse</el-button>-->
      <button class="btn" :loading="loading" @click="handleUpload">批量添加</button>
    </div>