el-table合并+导出

最新推荐文章于 2024-04-16 15:26:53 发布
最新推荐文章于 2024-04-16 15:26:53 发布
阅读量401 收藏 8
点赞数 6
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47793359/article/details/135654297
版权 
<template>
  <div>
    <el-button size="small" type="primary" icon="el-icon-tickets" @click="exportExcel">导出</el-button>
    <el-table id="excelTable" ref="excelTable" :data="tableData" :span-method="spanMethod" border style="width: 100%"
      :header-cell-style="handerMethod">
      <el-table-column prop="title" label="集群" width="180" align="center">
      </el-table-column>
      <el-table-column prop="benlonetame" label="团队" width="180" align="center">
      </el-table-column>
      <el-table-column prop="total" label="总数" align="center" />
      <el-table-column label="修复中" align="center">
        <el-table-column prop="repairingCnt" label="修复中" align="center">
        </el-table-column>
        <el-table-column prop="isrepairingCnt" label="修复中占比" align="center">
          <template slot-scope="scope">
            {{ getisrepairingCnt(scope.row) + '%' }}
          </template>
        </el-table-column>
      </el-table-column>



      <el-table-column label="已修复" align="center">
        <el-table-column prop="RepairedCnt" label="已修复" align="center"></el-table-column>
        <el-table-column prop="isRepairedCnt" label="已修复占比" align="center">
          <template slot-scope="scope">
            {{ getisRepairedCnt(scope.row) + '%' }}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="repairDate" label="最晚修复时间" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { spanMethod, getExcel } from "../utils/index";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      tableData: [
        {
          benlonetame: "统筹协调室",
          id: 0,
          repairDate: '2024-037-31',
          RepairedCnt: 42,
          repairingCnt: 2,
          title: '统筹管理室',
          total: 44
        },
        {
          benlonetame: "核心与支付研发团队",
          id: 1,
          repairDate: '2024-038-31',
          RepairedCnt: 2817,
          repairingCnt: 210,
          title: '基础服务研发集群',
          total: 3027
        },
        {
          benlonetame: "平台架构研发团队",
          id: 1,
          repairDate: '2024-039-31',
          RepairedCnt: 4221,
          repairingCnt: 462,
          title: '基础服务研发集群',
          total: 2788
        },
        {
          benlonetame: "零售基础与渠道研发团队",
          id: 2,
          repairDate: '2024-031-31',
          RepairedCnt: 4752,
          repairingCnt: 222,
          title: '零售应用研发集群',
          total: 8160
        },
        {
          benlonetame: "零售信贷研发团队",
          id: 2,
          repairDate: '2024-033-31',
          RepairedCnt: 4222,
          repairingCnt: 211,
          title: '零售应用研发集群',
          total: 442
        },
        {
          benlonetame: "零售客户经营研发",
          id: 2,
          repairDate: '2024-032-31',
          RepairedCnt: 42,
          repairingCnt: 2,
          title: '零售应用研发集群',
          total: 44
        },
        {
          benlonetame: "普惠信贷研发",
          id: 3,
          repairDate: '2024-034-31',
          RepairedCnt: 42,
          repairingCnt: 2,
          title: '批发应用研发集群',
          total: 44
        },
        {
          benlonetame: "金融市场研发团队",
          id: 3,
          repairDate: '2024-0355-31',
          RepairedCnt: 42,
          repairingCnt: 2,
          title: '批发应用研发集群',
          total: 44
        },
        {
          benlonetame: "对公基础",
          id: 3,
          repairDate: '2024-0366-31',
          RepairedCnt: 42,
          repairingCnt: 2,
          title: '批发应用研发集群',
          total: 44
        },
        {
          benlonetame: "风险管理研发",
          id: 4,
          repairDate: '2024-0377-31',
          RepairedCnt: 42,
          repairingCnt: 2,
          title: '中台服务研发集群',
          total: 44
        },
        {
          benlonetame: "协同帮呵呵",
          id: 4,
          repairDate: '2024-0388-31',
          RepairedCnt: 42,
          repairingCnt: 2,
          title: '中台服务研发集群',
          total: 44
        },
        {
          benlonetame: "统筹协调室111",
          id: 4,
          repairDate: '2024-0399-31',
          RepairedCnt: 42,
          repairingCnt: 2,
          title: '中台服务研发集群',
          total: 44
        }
      ],
      dataArr: [],
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() { },

  beforeDestroy() { },
  methods: {
    exportExcel() {
      // getExcel(this.$refs.excelTable, "销售全景");
      getExcel('#excelTable', '销售全景')
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
        return  spanMethod({ row, column, rowIndex, columnIndex }, this.tableData)
    },
    // 隐藏表头
    handerMethod({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 4 || columnIndex === 6) {
      //   return { display: 'none' }
      // }
      // if (rowIndex === 0 && columnIndex === 3 || rowIndex === 0 && columnIndex === 5) {
      //   this.$nextTick(() => {
      //     document.querySelector(`.${column.id}`).setAttribute('colspan', '2')
      //   })
      // }
    },

    getisrepairingCnt(obj) {
      let num = 0
      num = (obj.repairingCnt / obj.total) * 100
      return num.toFixed(2)
    },
    getisRepairedCnt(obj) {
      let num = 0
      num = (obj.RepairedCnt / obj.total) * 100
      return num.toFixed(2)
    }
  },
};
</script>

<style scoped lang="less">
::v-deep {
  .total {
    background: #f5f7fa;
  }
}
</style>

//完整的导出代码
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
export function getExcel(dom, title = "默认标题") {
  var xlsxParam = { raw: true }; //转换成excel时，使用原始的格式
  var excelTitle = title;
  let tables = document.querySelector(dom).cloneNode(true);
  //   tables.removeChild(tables.querySelector(".el-table__fixed"));
  // //反向删除函数，不能正向。否则会引起index索引错乱删除不了
  // let limit = tables.querySelector(".has-gutter").children[0].childNodes;
  // for (let index = limit.length - 1; index >= 0; index--) {
  //   const element = limit[index];
  //   if (element.style.display) {
  //     element.parentNode.removeChild(element);
  //   }
  // }
  let wb = XLSX.utils.table_to_book(tables, xlsxParam);
  /* 获取二进制字符串作为输出 */
  var wbout = XLSX.write(wb, {
    bookType: "xlsx",
    bookSST: true,
    type: "array",
  });
  try {
    FileSaver.saveAs(
      new Blob([wbout], { type: "application/octet-stream" }),
      excelTitle + ".xlsx"
    );
  } catch (e) {
    if (typeof console !== "undefined") console.log(e, wbout);
  }
  return wbout;
}
//合并单元格
//合并的方法，里面row，colomn是这一行这一列的对象，rowIndex和colIndex就是行列的index  从0-n  rowspan表示合并的行 大于1表示要往下合并了，然后下方被合并的rowspan就是0，0代表被合并了，1代表正常情况
export function spanMethod(
  { row, column, rowIndex, columnIndex },
  arrList = []
) {
  //columnIndex代表哪几列需要合并，后面会用
  let columnArr = [0];
  let jobArr = []; //所有职业id  从第一个数据到最后一个
  for (let k in arrList) {
    jobArr.push(arrList[k].id);
  }
  let obj = {};
  for (let i = 0; i < jobArr.length; i++) {
    if (obj[jobArr[i]] == undefined) {
      obj[jobArr[i]] = 1;
    } else {
      obj[jobArr[i]]++;
    }
  }
  // console.log("obj", obj);   //包含每个id以及其出现的次数，为后面合并做铺垫
  let spanArr = []; //每一行就是一条数据，该数组每一个值就是当前行的rowspan数
  let doneArr = []; //保存被合并了的id，如果再出现，表示被合并
  for (let i = 0; i < jobArr.length; i++) {
    //看看个数
    if (doneArr.includes(jobArr[i])) {
      //如果这个id被合并过了，说明刚刚上方有一样的id，这一项就是被合并的
      spanArr.push(0);
    } else {
      //如果没合并，就往下合并，spanArr里推入这个id的个数，在obj中就有
      spanArr.push(obj[jobArr[i]]);
      //别忘了合并完把id放进doneArr中
      doneArr.push(jobArr[i]);
    }
  }
  //如果是第0列和第3列
  if (columnArr.includes(columnIndex)) {
    //遍历合并个数的数组
    for (let i = 0; i < spanArr.length; i++) {
      //如果是该行，行合并个数就是这一项的值，列不合并，所以是1
      if (rowIndex == i) {
        return {
          rowspan: spanArr[i],
          colspan: 1,
        };
      }
    }
  }
}

效果图，页面显示---多级表头的导出合并

导出的表格

下面的是单级表头，合并表头的代码和导出1


//完整的导出代码
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
export function getExcel(dom, title = "默认标题") {
  var xlsxParam = { raw: true }; //转换成excel时，使用原始的格式
  var excelTitle = title;
  let tables = document.querySelector(dom).cloneNode(true);
  //   tables.removeChild(tables.querySelector(".el-table__fixed"));
  //反向删除函数，不能正向。否则会引起index索引错乱删除不了
  let limit = tables.querySelector(".has-gutter").children[0].childNodes;
  for (let index = limit.length - 1; index >= 0; index--) {
    const element = limit[index];
    if (element.style.display) {
      element.parentNode.removeChild(element);
    }
  }
  let wb = XLSX.utils.table_to_book(tables, xlsxParam);
  /* 获取二进制字符串作为输出 */
  var wbout = XLSX.write(wb, {
    bookType: "xlsx",
    bookSST: true,
    type: "array",
  });
  try {
    FileSaver.saveAs(
      new Blob([wbout], { type: "application/octet-stream" }),
      excelTitle + ".xlsx"
    );
  } catch (e) {
    if (typeof console !== "undefined") console.log(e, wbout);
  }
  return wbout;
}
//合并单元格
//合并的方法，里面row，colomn是这一行这一列的对象，rowIndex和colIndex就是行列的index  从0-n  rowspan表示合并的行 大于1表示要往下合并了，然后下方被合并的rowspan就是0，0代表被合并了，1代表正常情况
export function spanMethod(
  { row, column, rowIndex, columnIndex },
  arrList = []
) {
  //columnIndex代表哪几列需要合并，后面会用
  let columnArr = [0];
  let jobArr = []; //所有职业id  从第一个数据到最后一个
  for (let k in arrList) {
    jobArr.push(arrList[k].id);
  }
  let obj = {};
  for (let i = 0; i < jobArr.length; i++) {
    if (obj[jobArr[i]] == undefined) {
      obj[jobArr[i]] = 1;
    } else {
      obj[jobArr[i]]++;
    }
  }
  // console.log("obj", obj);   //包含每个id以及其出现的次数，为后面合并做铺垫
  let spanArr = []; //每一行就是一条数据，该数组每一个值就是当前行的rowspan数
  let doneArr = []; //保存被合并了的id，如果再出现，表示被合并
  for (let i = 0; i < jobArr.length; i++) {
    //看看个数
    if (doneArr.includes(jobArr[i])) {
      //如果这个id被合并过了，说明刚刚上方有一样的id，这一项就是被合并的
      spanArr.push(0);
    } else {
      //如果没合并，就往下合并，spanArr里推入这个id的个数，在obj中就有
      spanArr.push(obj[jobArr[i]]);
      //别忘了合并完把id放进doneArr中
      doneArr.push(jobArr[i]);
    }
  }
  //如果是第0列和第3列
  if (columnArr.includes(columnIndex)) {
    //遍历合并个数的数组
    for (let i = 0; i < spanArr.length; i++) {
      //如果是该行，行合并个数就是这一项的值，列不合并，所以是1
      if (rowIndex == i) {
        return {
          rowspan: spanArr[i],
          colspan: 1,
        };
      }
    }
  }
}

<template>
  <div>
    <el-button size="small" type="primary" icon="el-icon-tickets" @click="exportExcel">导出</el-button>
    <el-table id="excelTable" ref="excelTable" :data="tableData" :span-method="spanMethod" border style="width: 100%"
      :header-cell-style="handerMethod">
      <el-table-column prop="title" label="集群" width="180" align="center">
      </el-table-column>
      <el-table-column prop="benlonetame" label="团队" width="180" align="center">
      </el-table-column>
      <el-table-column prop="total" label="总数" align="center" />
      <el-table-column prop="repairingCnt" label="修复中" align="center">
      </el-table-column>
      <el-table-column prop="isrepairingCnt" label="修复中占比" align="center">
        <template slot-scope="scope">
          {{ getisrepairingCnt(scope.row) + '%' }}
        </template>
      </el-table-column>




      <el-table-column prop="RepairedCnt" label="已修复" align="center">
      </el-table-column>
      <el-table-column prop="isRepairedCnt" label="已修复占比" align="center">
        <template slot-scope="scope">
          {{ getisRepairedCnt(scope.row) + '%' }}
        </template>
      </el-table-column>

      <el-table-column prop="repairDate" label="最晚修复时间" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { spanMethod, getExcel } from "../utils/index";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      tableData: [
        {
          benlonetame: "统筹协调室",
          id: 0,
          repairDate: '2024-037-31',
          RepairedCnt: 42,
          repairingCnt: 2,
          title: '统筹管理室',
          total: 44
        },
        {
          benlonetame: "核心与支付研发团队",
          id: 1,
          repairDate: '2024-038-31',
          RepairedCnt: 2817,
          repairingCnt: 210,
          title: '基础服务研发集群',
          total: 3027
        },
        {
          benlonetame: "平台架构研发团队",
          id: 1,
          repairDate: '2024-039-31',
          RepairedCnt: 4221,
          repairingCnt: 462,
          title: '基础服务研发集群',
          total: 2788
        },
        {
          benlonetame: "零售基础与渠道研发团队",
          id: 2,
          repairDate: '2024-031-31',
          RepairedCnt: 4752,
          repairingCnt: 222,
          title: '零售应用研发集群',
          total: 8160
        },
        {
          benlonetame: "零售信贷研发团队",
          id: 2,
          repairDate: '2024-033-31',
          RepairedCnt: 4222,
          repairingCnt: 211,
          title: '零售应用研发集群',
          total: 442
        },
        {
          benlonetame: "零售客户经营研发",
          id: 2,
          repairDate: '2024-032-31',
          RepairedCnt: 42,
          repairingCnt: 2,
          title: '零售应用研发集群',
          total: 44
        },
        {
          benlonetame: "普惠信贷研发",
          id: 3,
          repairDate: '2024-034-31',
          RepairedCnt: 42,
          repairingCnt: 2,
          title: '批发应用研发集群',
          total: 44
        },
        {
          benlonetame: "金融市场研发团队",
          id: 3,
          repairDate: '2024-0355-31',
          RepairedCnt: 42,
          repairingCnt: 2,
          title: '批发应用研发集群',
          total: 44
        },
        {
          benlonetame: "对公基础",
          id: 3,
          repairDate: '2024-0366-31',
          RepairedCnt: 42,
          repairingCnt: 2,
          title: '批发应用研发集群',
          total: 44
        },
        {
          benlonetame: "风险管理研发",
          id: 4,
          repairDate: '2024-0377-31',
          RepairedCnt: 42,
          repairingCnt: 2,
          title: '中台服务研发集群',
          total: 44
        },
        {
          benlonetame: "协同帮呵呵",
          id: 4,
          repairDate: '2024-0388-31',
          RepairedCnt: 42,
          repairingCnt: 2,
          title: '中台服务研发集群',
          total: 44
        },
        {
          benlonetame: "统筹协调室111",
          id: 4,
          repairDate: '2024-0399-31',
          RepairedCnt: 42,
          repairingCnt: 2,
          title: '中台服务研发集群',
          total: 44
        }
      ],
      dataArr: [],
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() { },

  beforeDestroy() { },
  methods: {
    exportExcel() {
      getExcel('#excelTable', '销售全景')
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      return spanMethod({ row, column, rowIndex, columnIndex }, this.tableData)
    },
    // 隐藏表头
    handerMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 4 || columnIndex === 6) {
        return { display: 'none' }
      }
      if (rowIndex === 0 && columnIndex === 3 || rowIndex === 0 && columnIndex === 5) {
        this.$nextTick(() => {
          document.querySelector(`.${column.id}`).setAttribute('colspan', '2')
        })
      }
    },

    getisrepairingCnt(obj) {
      let num = 0
      num = (obj.repairingCnt / obj.total) * 100
      return num.toFixed(2)
    },
    getisRepairedCnt(obj) {
      let num = 0
      num = (obj.RepairedCnt / obj.total) * 100
      return num.toFixed(2)
    }
  },
};
</script>

<style scoped lang="less">
::v-deep {
  .total {
    background: #f5f7fa;
  }
}
</style>

 效果图

农夫_山泉水
关注
  • 6
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
el-table合并列 合并单元格
09-03
el-element中el-table合并单元格 合并列。无限制列合并。通过循环数据源数据获取该列需要合并的行数。
vue el-table前端 file-saver 导出excel可导出分页数据.zip
12-11
亲测 vue el-table前端使用file-saver组件，导出excel ,可导出分页数据，里面有详细步骤
el-table表格动态合并行、合并行列及详解
热门推荐
我是段段的博客
08-18 2万+
在写项目的时候有时候会经常遇到把行和列合并起来的情况，因为有些数据是重复渲染的，不合并行列会使表格看起来非常的混乱，如下： 而我们想要的数据是下面这种情况，将重复的行进行合并，使表格看起来简单明了，如下： 所谓的合并行就是将多行相同的数据变成一行来显示，直接上代码，页面的布局比较简单 是el-table上属性，其值是一个，objectSpanMethod方法是用来处理合并行的返回值，tableData数据如下： 首先需要对数据就行处理，就是比较当前行与上一行的值是否相等（如果是第一行数据，直接将值赋值为1）
el-table 合并单元格（合并行）
CMDN123456的博客
03-28 1万+
vue2 el-table 合并行
el-table多行合并
最新发布
weixin_41127362的博客
04-16 844
我使用了一种笨方法实现了需求。主要是理解思路很重要。后面所有类型应该都能理解。
el-table合并行
王也的博客
06-01 3680
需求不变，因打印功能，el-table适配性不好，改为原生table布局，合并行要素为rowspan，所以在遍历数据时要分开控制rowspan，同理根据业务id分段数据源，分别处理各自的time合并行。需求为：序号根据业务id合并，合并后的业务数据再根据时间进行二次合并。同学的帖子，又根据自己的需求进行了调整。
el-table表格合并行
weixin_53584437的博客
03-18 2560
1
element表格 合并行两种方法
Yangpengxunb的博客
05-19 2153
【代码】element表格 合并行或列。
vue2.0 + element UI 中 el-table 数据导出Excel的方法
08-27
下面小编就为大家分享一篇vue2.0 + element UI 中 el-table 数据导出Excel的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 [email protected]，使用前请熟悉：[email protected]@2.12.0安装npm install --save el-table-infinite-...
el-table无限滚动+控制列是否显示+列排序（非json）
01-06
el-table加入无限滚动，并且可以控制列是否显示以及列的排序，不是网上大部分的json配置形式
使用小技巧实现el-table组件的合并行功能，ElementUI和ElementPlus都适用
都随它大小便吧
05-10 1万+
有时遇到一些需求，需要实现ElementUI或ElementPlus中，el-tabled组件合并单元格的功能，稍微了解一下它的数据格式，不难可以写出比合并方法。但是在鼠标经过单元行时，会出现高亮的行与鼠标经过的行不一致的BUG。因此还需要实现@cell-mouse-enter和@cell-mouse-leave这两个方法，才可解决此问题。
el-table行合并
qq_36712606的博客
05-06 3679
需要把指定列的相同且相邻的数据合并起来 在获取tabledata的接口调用getSpanArr方法,此方法通过遍历把需要合并的字段id判断,相同的就给spanArr数组加一,在表格渲染时调用objectSpanMethod方法 需要新增一个数组spanArr接受判断的数据 <el-table :data="tableData" :span-method="objectSpanMethod" border .
element-ui组件el-table实现导出表格
qq_39037897的博客
06-21 3895
element-ui组件el-table实现导出表格
详解element-ui表格的合并行和列(非常细节)
小墨鱼的前端问题录
12-16 4589
但是此时又有个问题了，如果将 1 ，2行合并，那么应该同时有两个ID值在同一行内、但是我们希望只有一个才行、因此需要用到 第二个 if 中的 else 中内容，即 0，0。​ 一起理解，第二个 if 的作用是：当行号为 0，2 时，即除以 2 的余数为 0。​ （2，1）：表示将自身以及下一行合并，即合并 2 行、将自身的列合并（如果值是 2 那么就是将自身和右边的一起合并）有时候开发中、我每一次需要合并的行数是不一定相同的、第一个需要合并3行，第二个需要合并6行甚至更多，那怎么办？
el-table 合并行
yusun1234的博客
07-12 2741
表格合并
el-table实现纯前端导出（适用于el-table任意表格）
qq_53986004的博客
09-01 2693
el-table实现纯前端导出（适用于el-table任意表格）
el-table相同行合并（通用函数，将相同多行数据合并为一行）
阿Q
08-22 3515
el-table相同行合并，通用函数，将相同多行数据合并为一行，使表格看起来清晰明了；该通用合并函数直接复制即用
element-ui中el-table数据合并行和列,应该怎么解决
shi15926lei的博客
11-09 2864
最近接到一个任务,要实现一个数据报表,涉及到很多合并问题,一开始想着原生会简单点,实际上很麻烦,最后还是用elemen-ui中table自带的合并方法.1.数据处理,后端返回来的数据是,一个大对象,包含三个数组,既然合并,肯定是要处理成一个数组,并且要把相同的追加一个属性,后面根据这个属性进行合并处理.5.合并方法,这里是要根据自己的业务请求进行调整处理的。2.请求回来的数据,进行数据处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

农夫_山泉水

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值