element-ui当中table组件的合并行和列的属性:span-method的用法

背景

---

最近基本上都是以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所要判断的是仅仅是从哪一行开始合并，然和返回结果为合并多少行、多少列。