vue中ElementUI el-table 动态跨列、跨行显示

开发过程中，经常遇到自定义表格，需要跨行或跨列显示。
效果：

通过el-table 属性方法span-method实现。

<el-table
      v-if="columnsList && tableData"
      :row-class-name="tableRowClassName"
      max-height="528"
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%">
      ...
</el-table>

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // rowIndex 表示当前行号，从0开始
      // columnIndex 表示当前列号，从0开始
      
      //通过数组动态控制合并
      let arr =  [1,2,0,5,0,0,0,0,1]  
      
      // rowIndex === 0 判断只第一行
      if (rowIndex == 0) {
        let _col = arr[columnIndex] 
        let _row = _col > 0 ? 1 : 0
        console.log(_row + ',' + _col)
        return [_row, _col]
      }
}

这两个方法等价，通过数组动态控制合并

let arr =  [1,2,0,5,0,0,0,0,1]  
if (rowIndex == 0) {
  let _col = arr[columnIndex] 
  let _row = _col > 0 ? 1 : 0
  console.log(_row + ',' + _col)
  return [_row, _col]
}
等价
if (columnIndex == 0) {
  return [1, 1]        //  保持不变
} else if (columnIndex == 1) {
  return [1, 2]        // 跨2列合并，下一列需设置为0，
} else if (columnIndex == 2) {
  return [0, 0]        // 自动合并不显示
} else if (columnIndex == 3) {
  return [1, 5]        //跨5列合并，后4列需设置为0
} else if (columnIndex == 4) {
  return [0, 0]        // 自动合并不显示
 } else if (columnIndex == 5) {
  return [0, 0]
} else if (columnIndex == 6) {
  return [0, 0]
} else if (columnIndex == 7) {
  return [0, 0]
} else if (columnIndex == 8) {
  return [1, 1]      //  保持不变
}