element-ui的table表格行合并和列合并写法

行合并

在el-table中使用:span-method="SpanMethod"进行行合并

SpanMethod({row, column, rowIndex, columnIndex}) {
  if (columnIndex === 0) {
    if (rowIndex % 14 === 0) {
      return {
        rowspan: 14,
        colspan: 1
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0
      };
    }
  }
},

此处是将第1列的14行进行了合并

列合并

在el-table中使用:header-cell-style="headerSpanMethod"进行列合并

headerSpanMethod({row, column, rowIndex, columnIndex}) {
  if (rowIndex === 1) {
    if (columnIndex === 0) {
      this.$nextTick(() => {
        if (document.getElementsByClassName(column.id).length != 0) {
          document.getElementsByClassName(column.id)[0].setAttribute('colspan', 9);
        }
      });
    }
}

此处是将第1行的9列进行了合并