需求:
一, 安装依赖 npm install file-saver xlsx -S
二, 数据处理
<template>
<div>
<el-button @click="exportExcel">点击导出</el-button>
<el-table :data="tableData"
border
ref="report-table"
:span-method="formatTable"
style="width: 100%">
<el-table-column prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column prop="gender"
label="性别">
</el-table-column>
<el-table-column prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
name: 'HelloWorld',
data () {
return {
tableData: [],
httpData: [{
date: '2016',
name: '大一',
address: '上海市普陀区金沙江路 1518 弄',
gender: "男"
}, {
date: '2016',
name: '小二',
address: '上海市普陀区金沙江路 1517 弄',
gender: "男"
}, {
date: '2015',
name: '张三',
address: '上海市普陀区金沙江路 1519 弄',
gender: "男"
}, {
date: '2015',
name: '李四',
address: '上海市普陀区金沙江路 1516 弄',
gender: "男"
}, {
date: '2014',
name: '王五',
address: '上海市普陀区金沙江路 1516 弄',
gender: "男"
}, {
date: '2013',
name: '赵六',
address: '上海市普陀区金沙江路 1516 弄',
gender: "男"
}, {
date: '2012',
name: '赖七',
address: '上海市普陀区金沙江路 1516 弄',
gender: "男"
}, {
date: '2012',
name: '冯八',
address: '上海市普陀区金沙江路 1516 弄',
gender: "男"
}, {
date: '2012',
name: '冯八',
address: '上海市普陀区金沙江路 1516 弄',
gender: "男"
}, {
date: '2011',
name: '李久',
address: '上海市普陀区金沙江路 1516 弄',
gender: "男"
}]
}
},
created() {
setTimeout(() => {
this.tableData = this.httpData;
this.getRowColumn(this.httpData);
}, 100)
},
methods: {
getRowColumn (data) {
let self = this;
self.rowAndColumn = [];
self.rowRoomColumn = [];
for (var i = 0; i < data.length; i++) {
if (i == 0) {
self.rowAndColumn.push(1);
self.pos = 0;
self.rowRoomColumn.push(1);
self.posT = 0;
} else {
if (data[i].date == data[i - 1].date) {
self.rowAndColumn[self.pos] += 1;
self.rowAndColumn.push(0);
if (data[i].name == data[i - 1].name) {
self.rowRoomColumn[self.posT] += 1;
self.rowRoomColumn.push(0);
} else {
self.rowRoomColumn.push(1);
self.posT = i;
}
} else {
self.rowAndColumn.push(1);
self.pos = i;
self.rowRoomColumn.push(1);
self.posT = i;
}
}
}
},
formatTable ({ row, column, rowIndex, columnIndex }) {
let self = this;
if (columnIndex == 0) {
if (self.rowAndColumn[rowIndex]) {
let rowNum = self.rowAndColumn[rowIndex];
return {
rowspan: rowNum,
colspan: rowNum > 0 ? 1 : 0
}
}
return {
rowspan: 0,
colspan: 0
}
}
if (columnIndex == 1) {
if (self.rowRoomColumn[rowIndex]) {
let roomNum = self.rowRoomColumn[rowIndex];
return {
rowspan: roomNum,
colspan: roomNum > 0 ? 1 : 0
}
}
return {
rowspan: 0,
colspan: 0
}
}
},
exportExcel () {
try {
const $e = this.$refs['report-table'].$el;
let $table = $e.querySelector('.el-table__fixed');
if (!$table) {
$table = $e;
}
const wb = XLSX.utils.table_to_book($table, { raw: true });
const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
FileSaver.saveAs(
new Blob([wbout], { type: 'application/octet-stream' }), '导出.xlsx'
)
} catch (e) {
if (typeof concole !== 'undefined') console.error(e)
}
}
}
}
</script>
