elementui Table组件单元格合并功能剖析

说在前面

近期项目开发过程中用到了单元格合并的功能，在研究官网的介绍时其实不是很了解，好在给的有demo可以参考，如果需求是直接合并某一列，可能就不会有后面的故事了，恰好需求有点变化，如图所示：比如要求合并第一列除第一行的内容。

温故知新

下面带各位看官理解一下官方提供的demo，假设我们使用tableData长度为5，全篇设定，后面不再赘述。

<el-table></el-table>
<script>
	export default {
        data() {
            tableData: [..], // 假设tableData的长度是5,
        },
        methods: {
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 0) {
                  if (rowIndex % 2 === 0) {
                    return {
                      rowspan: 2,
                      colspan: 1
                    };
                  } else {
                    return {
                      rowspan: 0,
                      colspan: 0
                    };
                  }
                }
            }
        }
    }
</script>

上述代码最终展示效果如图：

rowIndex和colunmIndex分别代指当前的行和列，上述代码控制的合并第一列的内容(columnIndex === 0)。

rowspan和colspan分别代指需要合并的行和列，以上述代码为例，return {rowspan:2,colspan:1}，就是合并纵向的2个单元格，return {rowspan:0,colspan:0},就是删掉单元格（如果仅仅是删掉，而没有合并的动作，就会出现数据行前移的现象，文章下面会说到）。

然后，我们判断rowIndex % 2 === 0,余数（%）大家应该不陌生，0%2==0,2%2==0,4%2==0，

第一行与第二行合并，值取第一行，第三行与第四行合并，值取第三行，以此类推…

羊肠九转

当我拿到需求之后，我最开始是这样想的,固定第一行不动，所以返回return {rowspan:1,colspan:1},然后将取余的逻辑换成了行数大于0的逻辑，别问我为什么写出这么蠢的逻辑，过程调试而已。下面我们需要做的是根据表现推算出为什么他会如此，从而深刻理解每一个变量的含义。

if (columnIndex === 0) {
    if (rowIndex === 0) {
        return {
            rowspan: 1,
            colspan: 1,
        }; 
    } else if (rowIndex > 0) {
        return {
            rowspan: 2,
            colspan: 1,
        };
    } else { // rowIndex始终>=0，这部分不会被执行
        return {
            rowspan: 0,
            colspan: 0,
        };
    }
}

大家注意到，两个ID被“挤”到后面去了，而且因为五行数据只有4个值，还自动把第二列3-4行的数据合并了，最开始我还纳闷，我只操作了columnIndex===0的情况，也是后来才意识到。

继续改进逻辑：

if (columnIndex === 0) {
    if (rowIndex === 0) {
        return {
            rowspan: 1,
            colspan: 1,
        }
    } else if (rowIndex % 4 === 0) {
        return {
            rowspan: 4,
            colspan: 1,
        };
    } else {
        return {
            rowspan: 0,
            colspan: 0,
        };
    }
}

这里大家注意到，2-4行都前进了一格，这肯定是return{rowspan:0,colspan:0}起了作用，而且我们也可以推断出来，第五列合并的原因-----数据前移，“挤”出来一块空地，由于只有第五行有数据，所以再次合并了单元格。

我们离真相越来越近了。

拨得云开

大家可以考虑下，怎么做才能实现文章开头说的效果呢？不急着往下看，给你5分钟…

if (columnIndex === 0) {
    if (rowIndex === 0) {
        return {
            rowspan: 1,
            colspan: 1,
        };
    } else if ((rowIndex-1) % 4 === 0) {
        return {
            rowspan: 4,
            colspan: 1,
        }
    } else {
        return {
            rowspan: 0,
            colspan: 0,
        }
    }
}

效果图参见文章开头。

需求可能会变，但当理解了过程，就可以轻松应对变化。

说到最后

学好数理化，走遍天下都不怕。

以上。