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

最新推荐文章于 2024-08-21 10:29:23 发布

穿着校服逛酒吧

最新推荐文章于 2024-08-21 10:29:23 发布

阅读量2.4k

点赞数 1

分类专栏： vue 文章标签：批量添加

本文链接：https://blog.csdn.net/CXX7788/article/details/92794717

版权

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

摘要由CSDN通过智能技术生成

此组件得好处是识别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>
  </div>
</template>

<script>
import XLSX from 'xlsx'

export default {
  props: {
    beforeUpload: Function, // eslint-disable-line
    onSuccess: