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所要判斷的是僅僅是從哪一行開始合並，然和返回結果為合並多少行、多少列。