vue 批量导入

1.下载  包

npm install --save xlsx file-saver

2.组件中引入

import XLSX from 'xlsx'

3.直接上代码

 

    批量新增

    

      

        ref="excel-upload-input"

        class="excel-upload-input"

        type="file"

        accept=".xlsx, .xls"

        @change="handleClick"

      >

      

        将excel文件拖到此处或

        

          :loading="loading"

          style="margin-left:16px;"

          size="mini"

          type="primary"

          :disabled="isDisabled"

          @click="handleUpload"

        >点击导入

      

      

        下载模板

        确 定

      

    

  

.excel-upload-input {

  display: none;

  z-index: -9999;

}

.drop {

  border: 2px dashed #bbb;

  height: 160px;

  line-height: 160px;

  margin: 0 auto;

  font-size: 24px;

  border-radius: 5px;

  text-align: center;

  color: #bbb;

  position: relative;

}

使用组件

 

        v-show="true"

        :on-success="handleSuccess"

        :before-upload="beforeUpload"

        :exel-data="exelData"

      />

 exelData: {

        name: '热用户管理',   //文件名

        headData: [ 'StationName','BranchName', ],  导入头部字段名

        data: [ { UserCode: '用户编号',StationName: '换热站',BranchName: '机组', Village: '所属小区', Floor: '所属楼', Unit: '单元号', House: '户号', } ]  //键值对

      },

记录下我的一些小功能

                                                                                    记录下一些常用小功能   方便搬运