<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="hospitalName" label="医院名称" width="380"> </el-table-column> <el-table-column prop="feeTypeName" label="缴费类型" width="180"> </el-table-column> <el-table-column prop="tuifeibzName" label="收费状态"> </el-table-column> <el-table-column prop="num" label="数量"> </el-table-column> </el-table> </div> </template>
//安装 引入
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
name: "HelloWorld",
data() {
return {
tableData: [],
httpData: [
{
hospitalName: "苍南县",
feeTypeName: "住院",
tuifeibzName: "收费",
num: 1837,
},
{
hospitalName: "苍南县",
feeTypeName: "住院",
tuifeibzName: "退费",
num: -56,
},
{
hospitalName: "苍南县",
feeTypeName: "门诊",
tuifeibzName: "收费",
num: 4777
},
{
hospitalName: "苍南县",
feeTypeName: "门诊",
tuifeibzName: "退费",
num: -59
},
{
hospitalName: "河北区",
feeTypeName: "体检",
tuifeibzName: "收费",
num: 0,
num1: 0
},
{
hospitalName: "河北区",
feeTypeName: "体检",
tuifeibzName: "退费",
num: 0
},
{
hospitalName: "河北区",
feeTypeName: "合计",
tuifeibzName: "",
num: 6499
},
{
hospitalName: "悉尼县",
feeTypeName: "住院",
tuifeibzName: "收费",
num: 678
},
{
hospitalName: "悉尼县",
feeTypeName: "住院",
tuifeibzName: "退费",
num: -50
},
{
hospitalName: "悉尼县",
feeTypeName: "门诊",
tuifeibzName: "收费",
num: 13530
},
{
hospitalName: "悉尼县",
feeTypeName: "门诊",
tuifeibzName: "退费",
num: 0
}]
}
},
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].hospitalName == data[i - 1].hospitalName) {
self.rowAndColumn[self.pos] += 1;
self.rowAndColumn.push(0);
if (data[i].feeTypeName == data[i - 1].feeTypeName) {
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);
}
},
},
}
如何利用PHPExcel类库建php将数据格式转为excel
vuejs导入excel表格解析成JSON数据（日期变成数字）解决方法
上面是“vuejs导出excel表格合并相同名称”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。
当前网址：https://m.ipkd.cn/webs_1878.html
声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！
