Vue2 el-table 合并第一列单元格

需求：名字一样的合并单元格

前端思路：方法一

// 处理表格数据，将同一名称的数据进行组合
// tableData 是请求后端返回的List<对象>
    handleData(tableData) {
      debugger
      const keys = [] // 唯一值的数组
      tableData.forEach((item, index) => {
        if (!keys.includes(item.group_name)) {// group_name 需要合并的名称 // 如 生物干化  掺烧 等
          keys.push(item.group_name)
        }
      })

      const temp = []
      keys.forEach((item) => { // 将同一名称的数据放在相邻位置
        this.tableData.forEach((cell) => {
          if (item === cell.group_name) {
            temp.push(cell)
          }
        })
      })

      this.tableData = temp
      this.getSpanArr(this.tableData)
    },

    /**
     *  获取单元格的合并行数
     * */
    getSpanArr(data) {
      debugger
      const spanArr = []
      let position // 当前合并的行位置（连续相同名称的第一条数据位置）
      // 每一条数据合并的行数，避免表格错乱！
      data.forEach((item, index) => {
        if (index === 0) { // 第一行， 不进行处理
          spanArr.push(1)
          position = 0
        } else {
          if (data[index].group_name === data[index - 1].group_name) {
            // 当条数据跟上一条数据名称相同，要合并
            spanArr[position] += 1 // 首条相同名称行合并行数增加
            spanArr.push(0) // 当前行消除
          } else { // 不需要处理的数据
            spanArr.push(1)
            position = index
          }
        }
      })
      this.spanArr = spanArr
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // const Arr = [1, 2, 0, 2, 0, 1] // 示例  共6行 第一行占1格，   第二行占2（2,3）格，  第三行占0 格，第四行占2（4,5）格，第五行占0行，第六行占1（6）格
      let Arr = []
      Arr = this.spanArr
      const _row = Arr[rowIndex] // 合并行数
      const _col = _row > 0 ? 1 : 0 // 合并列数，1：不改变，0：被消除
      if (columnIndex === 0) { // 对第一列进行操作
        return { // 分格子 主要是 控制这里返回值
          rowspan: _row,
          colspan: _col
        }
      }
    },

前端思路：方法二（配合后端省去一步）

 

// 处理表格数据，将同一名称的数据进行组合
// handleData(tableData) {
//   debugger
//   const keys = [] // 唯一值的数组
//   tableData.forEach((item, index) => {
//     if (!keys.includes(item.group_name)) {
//       keys.push(item.group_name)
//     }
//   })
//
//   const temp = []
//   keys.forEach((item) => { // 将同一名称的数据放在相邻位置   由后端 直接分组返回 省去这个步骤
//     this.tableData.forEach((cell) => {
//       if (item === cell.group_name) {
//         temp.push(cell)
//       }
//     })
//   })
//
//   this.tableData = temp
//   this.getSpanArr(this.tableData)
// },

/**
 *  获取单元格的合并行数
 * */
getSpanArr(data) {
  const spanArr = []
  let position // 当前合并的行位置（连续相同名称的第一条数据位置）
  // 每一条数据合并的行数，避免表格错乱！
  data.forEach((item, index) => {
    if (index === 0) { // 第一行， 不进行处理
      spanArr.push(1)
      position = 0
    } else {
      if (data[index].group_name === data[index - 1].group_name) {
        // 当条数据跟上一条数据名称相同，要合并
        spanArr[position] += 1 // 首条相同名称行合并行数增加
        spanArr.push(0) // 当前行消除
      } else { // 不需要处理的数据
        spanArr.push(1)
        position = index
      }
    }
  })
  this.spanArr = spanArr
},

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  // const Arr = [1, 2, 0, 2, 0, 1] // 示例  共6行 第一行占1格，   第二行占2（2,3）格，  第三行占0 格，第四行占2（4,5）格，第五行占0行，第六行占1（6）格
  let Arr = []
  Arr = this.spanArr
  const _row = Arr[rowIndex] // 合并行数
  const _col = _row > 0 ? 1 : 0 // 合并列数，1：不改变，0：被消除
  if (columnIndex === 0) { // 对第一列进行操作
    return { // 分格子 主要是 控制这里返回值
      rowspan: _row,
      colspan: _col
    }
  }
},

后端

小结：

其实最主要的是 objectSpanMethod     // const Arr = [1, 2, 0, 2, 0, 1] // 示例  共6行 第一行占1格，   第二行占2（2,3）格，  第三行占0 格，第四行占2（4,5）格，第五行占0行，第六行占1（6）格

 

关于：导出（同样格式化导出）观察规律

@AllArgsConstructor
public class CustomMergeStrategy implements RowWriteHandler {

    // [1,2,0,2,0,1]
    // 合并的数据
    private List<Integer> spanArr;


    @Override
    public void afterRowDispose(WriteSheetHolder writeSheetHolder, WriteTableHolder writeTableHolder, Row row,
                                Integer relativeRowIndex, Boolean isHead) {

        // 如果是标题，则直接返回
        if (isHead) {
            return;
        }

        Sheet sheet = writeSheetHolder.getSheet();

        // 合并单元格
        // 参数说明：开始行，结束行，开始列，结束列
        // 一行的数据 不用使用CellRangeAddress 自带合并
        //
        //[2, 0, 2, 0, 2, 0, 1] 个数
        // 0  1  2  3  4  5  6
        // 1  2  3  4  5  6  7
        int position = 0;
        if (ArrayUtil.isNotEmpty(spanArr) && spanArr.size() > 0) {
            for (int i = 0; i < spanArr.size(); i++) {
                position++;

                Integer i1 = spanArr.get(0);// 第一次值
                Integer i2 = spanArr.get(i);
                if (i1 >= 2 && i == 0) { // 第一种情况
                    CellRangeAddress cellRangeAddress = new CellRangeAddress(1, i1, 0, 0); // 合并第3-4行，第1列
                    sheet.addMergedRegionUnsafe(cellRangeAddress);
                } else if (i2 >= 2 && i > 0) {
                    CellRangeAddress cellRangeAddress = new CellRangeAddress(position, position + i2 - 1, 0, 0); // 合并第3-4行，第1列
                    sheet.addMergedRegionUnsafe(cellRangeAddress);
                }
            }
        }
    }


}

 

 // 前端传入的合并单元格
        List<Integer> spanArr = sewageVolumeVo.getSpanArr();
        Resource resource = new ClassPathResource("excel" + File.separator + "污水外运量.xlsx");
        EasyExcel.write(response.getOutputStream())
                .withTemplate(resource.getInputStream())
                .registerWriteHandler(new CustomMergeStrategy(spanArr))
                .sheet()
                .doFill(sewageVolumeDtoList);