Table: Add spanMethod to support rowspan and colspan

packages/table/src/table-body.js

@@ -55,16 +55,74 @@ export default {
                 on-mouseleave={ _ => this.handleMouseLeave() }
                 class={ [this.getRowClass(row, $index)] }>
                 {
-                  this._l(this.columns, (column, cellIndex) =>
-                    <td
-                      class={ [column.id, column.align, column.className || '', columnsHidden[cellIndex] ? 'is-hidden' : '' ] }
-                      on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
-                      on-mouseleave={ this.handleCellMouseLeave }>
-                      {
-                        column.renderCell.call(this._renderProxy, h, { row, column, $index, store: this.store, _self: this.context || this.table.$vnode.context }, columnsHidden[cellIndex])
+                  this._l(this.columns, (column, cellIndex) => {
+                    const { rowspan, colspan } = this.getSpan(row, column, $index, cellIndex);
+                    if (!rowspan || !colspan) {
+                      return '';
+                    } else {
+                      if (rowspan === 1 && colspan === 1) {
+                        return (
+                          <td
+                            class={
+                              [
+                                column.id,
+                                column.align,
+                                column.className || '',
+                                columnsHidden[cellIndex] ? 'is-hidden' : ''
+                              ]
+                            }
+                            on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
+                            on-mouseleave={ this.handleCellMouseLeave }>
+                            {
+                              column.renderCell.call(
+                                this._renderProxy,
+                                h,
+                                {
+                                  row,
+                                  column,
+                                  $index,
+                                  store: this.store,
+                                  _self: this.context || this.table.$vnode.context
+                                },
+                                columnsHidden[cellIndex]
+                              )
+                            }
+                          </td>
+                        );
+                      } else {
+                        return (
+                          <td
+                            class={
+                              [
+                                column.id,
+                                column.align,
+                                column.className || '',
+                                columnsHidden[cellIndex] ? 'is-hidden' : ''
+                              ]
+                            }
+                            rowspan={ rowspan }
+                            colspan={ colspan }
+                            on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
+                            on-mouseleave={ this.handleCellMouseLeave }>
+                            {
+                              column.renderCell.call(
+                                this._renderProxy,
+                                h,
+                                {
+                                  row,
+                                  column,
+                                  $index,
+                                  store: this.store,
+                                  _self: this.context || this.table.$vnode.context
+                                },
+                                columnsHidden[cellIndex]
+                              )
+                            }
+                          </td>
+                        );
                       }
-                    </td>
-                  )
+                    }
+                  })
                 }
                 {
                   !this.fixed && this.layout.scrollY && this.layout.gutterWidth ? <td class="gutter" /> : ''
@@ -186,6 +244,36 @@ export default {
       }
     },
 
+    getSpan(row, column, rowIndex, columnIndex) {
+      let rowspan = 1;
+      let colspan = 1;
+
+      const fn = this.table.spanMethod;
+      if (typeof fn === 'function') {
+        const result = fn({
+          row,
+          column,
+          rowIndex,
+          columnIndex
+        });
+
+        console.log(result);
+
+        if (Array.isArray(result)) {
+          rowspan = result[0];
+          colspan = result[1];
+        } else if (typeof result === 'object') {
+          rowspan = result.rowspan;
+          colspan = result.colspan;
+        }
+      }
+
+      return {
+        rowspan,
+        colspan
+      };
+    },
+
     getRowStyle(row, index) {
       const rowStyle = this.rowStyle;
       if (typeof rowStyle === 'function') {

packages/table/src/table.vue

@@ -217,7 +217,9 @@
 
       defaultSort: Object,
 
-      tooltipEffect: String
+      tooltipEffect: String,
+
+      spanMethod: Function
     },
 
     components: {