web建站教程
  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. seo教程
  6. 前端知识
  7. 百度echarts
  8. 更多
    php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站

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

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

 

excel拆分单元格快捷键怎么用

如何利用PHPExcel类库建php将数据格式转为excel

vuejs导入excel(多个Sheet表全部解析)

vuejs前端做一个点击按钮下载excel文件模板功能

vuejs导入excel表格解析成JSON数据(日期变成数字)解决方法

标签: excel, 合并, 导出

上面是“vuejs导出excel表格合并相同名称”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。

当前网址:https://ipkd.cn/webs_1878.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

当前位置: 网站首页 > vuejs
本文共计3500个字,预计阅读时长24分钟
生活小工具,收录了80多款小工具
上一篇: WordPress用自定义代码实现更高级的分页功能
下一篇: 车牌号输入HTML模板下载
x 打工人ai神器