vue--导入导出excel

前端页面导入导出功能（vue+pikaz-excel-js）

1.对于简单的前端导入导出功能，我们可以直接使用pikaz-excel-js插件，实现简单的导入导出

2.引入组件

npm i -S pikaz-excel-js

3.在页面上使用，需要引入组件到界面

import { ExcelExport, ExcelImport } from 'pikaz-excel-js'


export default {
  components: {
    ExcelExport,
    ExcelImport
  }
}	

4.将数据从界面导出，注意sheet是导出对应标签里面属性值

       <excel-export :sheet="sheet">
          <el-button type="primary"> 导出</el-button>
        </excel-export>
       <excel-import :on-success="import">
          <el-button type="primary"> 导入</el-button>
        </excel-import>

sheet: [
        {
          title: '', // 标题
          tHeader: ['', '', '', '', ''], // 表头
          table: [], // 数据体
          keys: ['', '', '', '', ''], // 对应table的key
          sheetName: ''
        }
      ]

5.针对查询出来的结果集进行导出

 getExcel() {
      //针对查询的结果集进行push
      this.sheet[0].table = []
      this.dataSource.map(v => {
        this.sheet[0].table.push(v)
      })
    },
    getList() {
      //查询结果
      getCarManageList(this.car).then(res => {
        if (res.status) {
          this.dataSource = res.result.data
          this.getExcel()
        }
      })
    }

6.导入数据，根据从前台传的数据，遍历传到后台进行新增操作

 // 导入
    import(response, file) {
      response[0].data.map((v, index) => {
        this.importData = v
        importCarManage(this.importData).then(res => {
          this.getList()
        })
      })
    },

7.该组件支持excel修改等操作官方文档地址