el-table之合并表格自定义span-method_el-table span-method

<el-table ref="tableList"  :data="tableData"  :span-method="arraySpanMethod" ></el-table>

自定义span-method方法达到合并表格目的

getSpanArr方法 重置tableData数据格式

arraySpanMethod 合并方法

cellClassName  定义单元格类名

tempList 储存添加过的字段

getSpanArr() {
  let newTabelData=[]
  for (let index = 0; index < this.tableData.length; index++) {
    const element = this.tableData[index];
    for (let grindIndex = 0; grindIndex < (element.grindsStones.length||1); grindIndex++) {
      const grindElement = element.grindsStones[grindIndex]||{steelInfos:[]};
      for (let steelIndex = 0; steelIndex < (grindElement.steelInfos.length||1); steelIndex++) {
        const steelElement = grindElement.steelInfos[steelIndex]||{};
        let obj={
          objectId:element.objectId||'',
          deviceCode:element.deviceCode||'',
          deviceName:element.deviceName||'',
          deviceRowspan:element.rowSpan,
          name:grindElement.name||'',
          code:grindElement.code||'',
          nameRowspan:grindElement.rowSpan,
          gyscj:grindElement.gyscj||'',
          slld:grindElement.slld||'',
          sysl:grindElement.sysl||'',
          steelName:steelElement.steelName||'',
          steelCode:steelElement.steelCode||'',
          steelRowspan:steelElement.rowSpan,
          formatSteelWeight:steelElement.formatSteelWeight||'',
          formatConversionWeight:steelElement.formatConversionWeight||'',
          formatSandingWeight:steelElement.formatSandingWeight||'',
          formatSandingArea:steelElement.formatSandingArea||''
        }
        newTabelData.push(obj)
      }
    }
  }
  this.tableData=newTabelData
  this.$nextTick(() => {
    tempList=[]
    this.$refs.tableList.doLayout()
  })
},
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
    let deviceCode=row.deviceCode
    let objectId=row.objectId
    let deviceName=row.deviceName
    let code=objectId+row.code
    //按数组顺序取值拼接保证每一行数据不重复
    let name='name'+objectId+code+row.name
    let gyscj='gyscj'+objectId+code+row.gyscj
    let slld='slld'+objectId+code+row.slld
    let sysl='sysl'+objectId+code+row.sysl
    let len=tempList.filter((item)=>{return item==deviceCode}).length
    let lendeviceName=tempList.filter((item)=>{return item==deviceName}).length
    let lenname=tempList.filter((item)=>{return item==name}).length
    let lengyscj=tempList.filter((item)=>{return item==gyscj}).length
    let lenslld=tempList.filter((item)=>{return item==slld}).length
    let lensysl=tempList.filter((item)=>{return item==sysl}).length
    if(columnIndex==0&&rowIndex==this.tableData.length-1){
        // 第一列 最后一行 合计 合并
      return {
        rowspan: 1,
        colspan: 5
      };
    }else if(rowIndex==this.tableData.length-1&&columnIndex<5){
//最后一行 被合计 合并的设置0,0
      return {
        rowspan: 0,
        colspan: 0
      };
    }else{
      if(columnIndex==0&&len==0){
//第一列 首次 合并列数
          tempList.push(deviceCode)
          return {
            rowspan: row.deviceRowspan,
            colspan: 1
          };
      }else if(columnIndex==0&&len<row.deviceRowspan){
//第一列 合并列之外归零
        tempList.push(deviceCode)
        return {
          rowspan: 0,
          colspan: 0
        };
      }
      if(columnIndex==1&&lendeviceName==0){//第二列 合并
        tempList.push(deviceName)
        return {
          rowspan: row.deviceRowspan,
          colspan: 1
        };
      }else if(columnIndex==1&&lendeviceName<row.deviceRowspan){
        tempList.push(deviceName)
        return {
          rowspan: 0,
          colspan: 0
        };
      }
      if(columnIndex==2&&lenname==0){
        tempList.push(name)
        return {
          rowspan: row.nameRowspan,
          colspan: 1
        };
      }else if(columnIndex==2&&lenname<row.nameRowspan){
        tempList.push(name)
        return {
          rowspan: 0,
          colspan: 0
        };
      }
      if(columnIndex==3&&lengyscj==0){
        tempList.push(gyscj)
        return {
          rowspan: row.nameRowspan,
          colspan: 1
        };
      }else if(columnIndex==3&&lengyscj<row.nameRowspan){
        tempList.push(gyscj)
        return {
          rowspan: 0,
          colspan: 0
        };
      }
      if(columnIndex==4&&lenslld==0){
        tempList.push(slld)
        return {
          rowspan: row.nameRowspan,
          colspan: 1
        };
      }else if(columnIndex==4&&lenslld<row.nameRowspan){
        tempList.push(slld)
        return {
          rowspan: 0,
          colspan: 0
        };
      }
      if(columnIndex==5&&lensysl==0){
        tempList.push(sysl)
        return {
          rowspan: row.nameRowspan,
          colspan: 1
        };
      }else if(columnIndex==5&&lensysl<row.nameRowspan){
        tempList.push(sysl)
        return {
          rowspan: 0,
          colspan: 0
        };
      }
    }
},
cellClassName({ row, column, rowIndex, columnIndex }){
  if(row.deviceCode=='合计'){
    return 'emptyClassColor'
  }
  if(columnIndex >5&&row.steelName=='合计'){
    return 'emptyClass'
  }
},

文档表格导出方法

exportList() {
  //导出表头信息
  let excelArr = [
    ["设备编号",
      "设备名称",
      "砂轮种类",
      "厂家",
      "粒度",
      "数量(片)",
      "钢种名称",
      "产量(吨)",
      "折算重量(吨)",
      "磨削量(吨)",
      "修磨面积(m²)"
    ]
  ];
  let mergeArr=[],tempLIst=[];//合并数组  储存合并值
  this.tableData.forEach((item,rowIndex) => {
    //对应字典值
    excelArr.push([
      item.deviceCode,
      item.deviceName,
      item.name,
      item.gyscj,
      item.slld,
      item.sysl,
      item.steelName,
      item.formatSteelWeight,
      item.formatConversionWeight,
      item.formatSandingWeight,
      item.formatSandingArea,
    ]);
    if(!tempLIst.includes('objectId'+item.objectId)){
      // 未包含 添加id 合并开始
      tempLIst.push('objectId'+item.objectId)
      if(item.deviceCode=='合计'){
        mergeArr.push({ s: { r: rowIndex+1, c: 0 }, e: { r: (rowIndex+1), c:  4 } })
      }else{
        mergeArr.push({ s: { r: rowIndex+1, c: 0 }, e: { r: (rowIndex+item.deviceRowspan), c:  0 } })
        mergeArr.push({ s: { r: rowIndex+1, c: 1 }, e: { r: (rowIndex+item.deviceRowspan), c:  1 } })
      }
    }
    if(!tempLIst.includes('name'+item.objectId+item.code+item.name)&&item.deviceCode!=='合计'){
      tempLIst.push('name'+item.objectId+item.code+item.name)
      mergeArr.push({ s: { r: rowIndex+1, c: 2 }, e: { r: (rowIndex+item.nameRowspan), c:  2 } })
      mergeArr.push({ s: { r: rowIndex+1, c: 3 }, e: { r: (rowIndex+item.nameRowspan), c:  3 } })
      mergeArr.push({ s: { r: rowIndex+1, c: 4 }, e: { r: (rowIndex+item.nameRowspan), c:  4 } })
      mergeArr.push({ s: { r: rowIndex+1, c: 5 }, e: { r: (rowIndex+item.nameRowspan), c:  5 } })
    }
  });
  this.$outputXlsxFile(
      excelArr,
      [
        {wch: 30},
        {wch: 30},
        {wch: 30},
        {wch: 30},
        {wch: 15},
        {wch: 10},
        {wch: 10},
        {wch: 15},
        {wch: 15},
        {wch: 15},
        {wch: 15},
      ],
      "耗材统计",
      mergeArr
  );
},

main.js中配置 xlsx导出配置

import XLSX from 'xlsx'
const outputXlsxFile = (data, wscols, xlsxName) => {
  /* convert state to workbook */
  const ws = XLSX.utils.aoa_to_sheet(data);
  ws['!cols'] = wscols;
 
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, xlsxName);
  /* generate file and send to client */
  XLSX.writeFile(wb, xlsxName + ".xlsx");
}
Vue.prototype.$outputXlsxFile = outputXlsxFile;