vuejs导出excel表格合并相同名称

<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);
      }
    },
  },
}

  以上是编程学习网小编为您介绍的“vuejs导出excel表格合并相同名称”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。