背景
最近基本上都是以Vue来构建项目，而UI框架也基本上都是使用的element-ui，所以里面组件用的也是越来越多，今天想记录的是非常非常小的一个属性的用法。
Table组件
Table组件用了真的太多次了，里面各种属性也基本上都用过了，今天就又用到了一个属性：span-method
官方介绍：
通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
也给了示例，截取其中的代码：
objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
}
这里以行合并为例：
就这么看这个例子，结合文档说明，说能看明白吧，还是有一部分人看不明白的（我就属于没看明白的这一类）。
但是，如果加上一行注释，非常简短的注释，那真的是再明白不过的了。
if (rowIndex % 2 === 0) { // 用于设置合并开始的行号
关键点在于这个if判断仅仅是需要找到合并开始的行，而不需要我们找到合并在一起的所有行。
只要找到开始合并的行，在返回值当中，返回合并的行的数量，并且利用最后一个else，返回return {rowspan: 0, colspan: 0}，就能够完成我们合并行的需求。
看一个具体的例子，加上注释：
if (columnIndex === 0) {
if (rowIndex === 0) { // 合并第一行到第四行，从第一行开始，共4行
return {
rowspan: 4,
colspan: 1
}
} else if (rowIndex === 4) { // 合并第五行到第九行，从第五行开始，共5行
return {
rowspan: 5,
colspan: 1
}
} else if (rowIndex === 9) { // 合并第10行到第14行，从第10行开始，共5行
return {
rowspan: 5,
colspan: 1
}
} else { // 其余被合并的行，诸如1、2、3、5、6、7、8、10、11、12、13全都设为0
return {
rowspan: 0,
colspan: 0
}
}
}
是不是明白多了。说白了，这个方法中if所要判断的是仅仅是从哪一行开始合并，然和返回结果为合并多少行、多少列。