前端页面导入导出功能(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修改等操作官方文档地址