在‘将excel表格转换为element table(上)’我们把excel 转换后通过数据重构绑定到了element table上，现在要做的就是根据源文件进行行列进行合并操作
先看看最终处理的结果
这里在一步步分析实现步骤。
先分析一下合并的逻辑
大致思路理理如上。
思路有了接下来就是一步步的去实现了
- 第一步
首先通过分组的数据找到哪些行有合并操作
this.existMergeRow = {};
this.existMergeCol = {};
this.mergeColAtRow = {};
const existMergeRow = this.existMergeRow// 合并行行为记录
const existMergeCol = this.existMergeCol // 合并列行为记录
const mergeColAtRow = this.mergeColAtRow;// 记录合并列是属于哪一行的
// 计算出哪些行有合并参与合并行为，因为有的行完全没有合并操作，在table merge操作是需要特殊处理renter {rowspan:1,colspan:1}
Object.keys(categoryCN).map(key => {
categoryCN[key].forEach((e) => {
// 有e.rowspan才执行如下操作
if (e.rowspan) {
if (!existMergeRow[key]) { existMergeRow[key] = {} }
let rowspanNum = parseInt(e.rowspan);
const rowNum = e.rowNum - 4;// 行数
existMergeRow[key][rowNum] = true;// 标识他合并了
let step = 1;
while (rowspanNum > 1) {
existMergeRow[key][rowNum + step] = true;// 标识他合并了
step++;
rowspanNum -= 1;
}
}
})
- 第二步
根据分组数据找到哪些列有合并操作，我们直接找上面的方法中添加如下代码来记录有合并操作的列
if (e.colspan) {
const keynum = parseInt(key) - 1
const rowNumm = e.rowNum - 4;
const colNum = e.colNum;// 列数
// 行号:列号
if (!mergeColAtRow[rowNumm]) { mergeColAtRow[rowNumm] = {} }
mergeColAtRow[rowNumm][colNum] = true;
if (!existMergeCol[keynum]) { existMergeCol[keynum] = {} }
let colspanNum = parseInt(e.colspan);
existMergeCol[keynum][colNum] = true;// 标识他合并了
let colstep = 1;
while (colspanNum > 1) {
existMergeCol[keynum][colNum + colstep] = true;// 标识他合并了
mergeColAtRow[rowNumm][colNum + colstep] = true;
colstep++;
colspanNum -= 1;
}
}
- 第三步
拷贝objectSpanMethod 来进行合并操作，大致如下
objectSpanMethod ({ rowIndex, columnIndex }) {
// 需要合并的列
const mergeRow = this.categoryCN[columnIndex];
// 合并列先找到那一例属于哪一行
const mergeColAtRow = this.mergeColAtRow[rowIndex];
// 通过列index 获取这一列，哪些行有合并行为
const existMergeRow = this.existMergeRow[columnIndex]
const existMergeCol = this.existMergeCol[columnIndex]
if (mergeRow) {
let rowspanObj = mergeRow.find((ee, index) => (ee.rowNum - 4) == rowIndex)
// 第一列
if (columnIndex == 0) {
// 判断改行是否参与合并行为
if (existMergeRow[rowIndex]) {
if (rowspanObj) {
const _row = rowspanObj.rowspan
const _col = rowspanObj.colspan
return {
rowspan: _row ? _row : _col ? 1 : 0,
colspan: _col ? _col : _row ? 1 : 0
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
} else { // 其它列,合并操作
// 有行合并也有列合并
if (existMergeRow && existMergeRow[rowIndex] && existMergeCol && existMergeCol[columnIndex]) {
if (rowspanObj) {
const _row = rowspanObj.rowspan
const _col = rowspanObj.colspan
return {
rowspan: _row ? _row : _col ? 1 : 0,
colspan: _col ? _col : _row ? 1 : 0
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
} else if (existMergeRow && existMergeRow[rowIndex]) {// 只有行合并行为
if (rowspanObj) {
const _row = rowspanObj.rowspan
const _col = rowspanObj.colspan
return {
rowspan: _row ? _row : _col ? 1 : 0,
colspan: _col ? _col : _row ? 1 : 0
}
} else {
// 除开第一列，其它行进行合并后，未合并的行需要隐藏，避免出现多行错乱问题
return {
rowspan: 0,
colspan: 0
}
}
}
}
}
// 找合并列对应的那一行，避免所有列做重复操作
if (mergeColAtRow && mergeColAtRow[columnIndex]) {
const mergeRowPlus = this.categoryCN[columnIndex];
if (mergeRowPlus) {
// 只有列表合并，
let colspanObj = mergeRowPlus.find((ee, index) => ee.colNum == columnIndex && (ee.rowNum - 4) == rowIndex)
if (colspanObj) {
const _col = colspanObj.colspan
return {
rowspan: 1,
colspan: _col
}
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
},
这个逻辑有的多 ， 因为第一列合并操作有点特殊需要单独操作，后面的行合并又是单独的，而列合并又需要单独写逻辑。
哎不管了经过上面一系列的折腾简单的行列合并算是可以实现了，其它的情况后续再研究研究…
- 最后把源码与测试数据保存一份到 github.com/dengxiaoning/excelToTable，如有需要的小伙伴请自取