element 中表格合并 span-method 函数详解

项目要求 : 合并下边表格中第二行和第三行中内容相同的表格

如图中表格 我们需要合并第一列 第二列 第三列 第四列中第二行和第三行的内容

代码实现
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
//第一列合并
if(columnIndex 0){
//第一列第一行 不需要合并
if(rowIndex0){
return {
rowspan: 1
colspan: 1
}
}
//第一列第二行 与第一列第三行内容相同需要合并
if(rowIndex1){
return {
rowspan: 2 //从第一列第二行开始 向下合并一行
colspan: 1 //列保持不变
}
}
//第一列第三行内容已合并到第二行 需将合并的内容删除
if(rowIndex3){
return {
rowspan: 0 //删除合并的单元格
colspan: 0
}
}
}
}
//第二列合并
if(columnIndex 1){
//第二列第一行 不需要合并
if(rowIndex0){
return {
rowspan: 1
colspan: 1
}
}
//第二列第二行 与第一列第三行内容相同需要合并
if(rowIndex1){
return {
rowspan: 2 //从第一列第二行开始 向下合并一行
colspan: 1 //列保持不变
}
}
//第二列第三行内容已合并到第二行 需将合并的内容删除
if(rowIndex3){
return {
rowspan: 0 //删除合并的单元格
colspan: 0
}
}
}
}
//第三列第四列合并 以此类推…
}
合并完之后表格如下

总结

用rowIndex, columnIndex 找到要合并的开始单元格
return {rowspan: 1,colspan: 1 } 表示表格不变
return {rowspan: 2,colspan: 1 } 表示表格向下合并一个单元格
return {rowspan: 1,colspan: 2 } 表示表格向右合并一个单元格
return {rowspan: 0,colspan: 0 } 表示删除此单元格

提醒

在合并完单元格后一定要找到合并完的单元格的rowIndex, columnIndex 并 return {rowspan: 0,colspan: 0 } 将其删除 如 你讲 rowIndex, columnIndex 为 0 3 的单元格合并到的 rowIndex, columnIndex为 0 2的单元格 你就需要将 rowIndex, columnIndex 为 0 3 的单元格 return {rowspan: 0,colspan: 0 } 将其删除