需求:名字一样的合并单元格
前端思路:方法一
// 处理表格数据,将同一名称的数据进行组合
// 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);
标签:index,const,spanArr,单元格,合并,item,Vue2,position,table From: https://www.cnblogs.com/lcaiqin/p/18323369