第一步,处理数据,添加合并标识符
第二步,使用iview 合并的方法,将要合并的列的索引拿到,返回两个参数,rowspan(跨行)和 colspan(跨列)(要合并几行为1列)
所以 return [row.标识符, 1]
this.computedData(arr);
// 处理表格数据,添加需要合并数量的标识符 computedData (arr) { if (arr) { let newarr = []; arr.forEach((item, index) => { // 序号为第一层源数组的索引+1 item.num = index + 1; // 第二层 item.licenceWasteInfoList.forEach(ele => { // 转化为一维数组 newarr.push({ ...ele, ...item }); }) }) // 传入key值,进行列的合并计算,第一个参数为表格数据数组,第二个参数为需要合并的表格数据数组中的key this.rangeData = handleSpanColumn(newarr, ['num', 'disposalway', 'alias', 'count', 'typecode', 'trade']); } }, // 表格合并 handleSpan ({ row, column, rowIndex, columnIndex }) { // 序号和操作 if ([0, 7].includes(columnIndex)) { if (row.num_num) { return [row.num_num, 1] } else { return [0, 0] } } if ([1].includes(columnIndex)) { if (row.disposalway_num) { return [row.disposalway_num, 1] } else { return [0, 0] } } if ([2].includes(columnIndex)) { if (row.alias_num) { return [row.alias_num, 1] } else { return [0, 0] } } if ([3].includes(columnIndex)) { if (row.count_num) { return [row.count_num, 1] } else { return [0, 0] } } if ([4].includes(columnIndex)) { if (row.typecode_num) { return [row.typecode_num, 1] } else { return [0, 0] } } if ([5].includes(columnIndex)) { if (row.trade_num) { return [row.trade_num, 1] } else { return [0, 0] } } },
// 合并表格处理数据, jsonList:表格数据;strList:需要合并的key的数组export function handleSpanColumn (jsonList, strList) { strList = strList.map(str => { return { name: str } }) jsonList.forEach((json, index1) => { for (let index2 = 0; index2 < strList.length; index2++) { const ele = strList[index2]; if (index1 === 0 || index1 > 0 && (json[ele.name] !== jsonList[index1 - 1][ele.name])) { json[ele.name + '_num'] = 1 ele.num = index1 } else { let bol = true for (let index3 = 0; index3 < index2; index3++) { if (json[strList[index3].name] !== jsonList[index1 - 1][strList[index3].name]) { json[ele.name + '_num'] = 1 ele.num = index1 bol = false break } } if (bol) jsonList[ele.num][ele.name + '_num']++ } } }) return jsonList}