vue表单中批量导入功能_vue实战(11)——vue+element UI实现表格数据导出Excel功能

一、应用场景

按照需求导出功能分为勾选批量导出及按照查询结果导出，考虑到接口操作导出的复杂性，因此实现了js控制导出的功能

导出功能截图

二、安装相关依赖

cnpm install --save xlsx file-saver

三、实现代码

考虑到多处使用导出功能，所以封装成公用组件形式

1、列表页

按勾选导出

按查询结果导出

export default {

components: {

exportExcelCommon

},

data() {

return {

//导出表格字段及formatter信息

exportExcelArry: [{

prop: 'phoneNumber',

label: '用户手机号',

formatterFlag: false

},{

prop: 'userFundRedEnvelopRecord.status',

label: '状态',

formatterFlag: true,

formatterType: 'common-type',

formatterInfo: [{value: 0,label: '未完成'},{value: 1,label: '已完成'}]

},{

prop: 'userFundRedEnvelopRecord.name',

label: '任务名称',

formatterFlag: false

}],

//导出excel表格id及excel名称

exportExcelInfo: {

excelId: 'record-table',

excelName: '红包获取记录.xlsx'

},

//需要导出的table数据

tableAllData: [],

},

methods {

exportExcelSelect () {

if(this.selectListArry.length == 0){

global.message('请勾选操作项')

return;

}

//将选中项传给this. tableAllData

this.tableAllData = this.selectListArry

//需要延时调导出方法，为了等待数据初始化到列表中

setTimeout(()=>{

this.$refs.myChild.exportExcel();

},500)

},

exportExcel () {

this.initData('export-excel')

//获取到表格数据的值并赋给this.tableAllData

//同样延时调导出方法，需在initData('export-excel')方法执行成功后调this.$refs.myChild.exportExcel();方法

}

}

}

2、通用组件ExportExcelCommon.vue

{{formatter(scope.row[item.prop],item,scope.row,item.prop)}}

import FileSaver from 'file-saver'

import XLSX from 'xlsx'

export default {

props: {

exportExcelInfo: {

type: Object,

default: {}

},

exportExcelArry: {

type: Array,

default: []

},

tableData: {

type: Array,

default: []

},

},

methods: {

//excel导出

exportExcel () {

var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换

var wb = XLSX.utils.table_to_book(document.querySelector('#'+this.exportExcelInfo.excelId),xlsxParam)

var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })

try {

FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), this.exportExcelInfo.excelName)

} catch (e) {

if (typeof console !== 'undefined') console.log(e, wbout)

}

return wbout

},

//表格formatter数据格式化

formatter (value,item,row,prop) {

//针对table中item多层对象层级的情况

if(prop.indexOf('.') > 0){

let temp = prop.split('.')

//item中嵌套两层

if(temp.length == 2){

let temp = prop.split('.')

if(item.formatterType == 'common-type'){ //通用类型转换

let arry = item.formatterInfo

for(let i in arry){

if(arry[i].value == row[temp[0]][temp[1]]){

return arry[i].label

}

}

} else if(item.formatterType == 'time-type'){ //时间标准格式化

if(!global.isNull(row[temp[0]][temp[1]])){

return row[temp[0]][temp[1]].substring(0,row[temp[0]][temp[1]].length - 2)

}

} else if(item.formatterType == 'amount-type'){ //金额转换

return (row[temp[0]][temp[1]] / 100).toFixed(2)

}

}

} else{ //item中无嵌套对象

let temp = prop.split('.')

if(item.formatterType == 'common-type'){ //通用类型转换

let arry = item.formatterInfo

for(let i in arry){

if(arry[i].value == value){

return arry[i].label

}

}

} else if(item.formatterType == 'time-type'){ //时间标准格式化

if(!global.isNull(row[temp[0]][temp[1]])){

return value.substring(0,value.length - 2)

}

} else if(item.formatterType == 'amount-type'){ //金额转换

return (value / 100).toFixed(2)

}

}

},

}

};

说明：

1、通常情况下列表中的字段不需要formatter，把exportExcelArry 对象中formatterFlag设成false;

2、需要formatter的数据主要有code对应label的转换(type='common-type')，金额的单位转换等，需要根据自己项目的需求封装成通用的组件;

3、针对后端返回的数据data多层的情况，需要对exportExcelArry中的prop字段进行分割来获取row中对应的值，一般情况下两层足够了。