github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Table: Add spanMethod to support rowspan and colspan

pull/7605/head
lirilsu 2017-10-18 11:25:43 +08:00 committed by 杨奕
parent d8dd114a16
commit 8e09988918
2 changed files with 100 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
packages/table/src/table-body.js
View File

@ -55,16 +55,74 @@ export default {
on-mouseleave={ _ => this.handleMouseLeave() } on-mouseleave={ _ => this.handleMouseLeave() }
class={ [this.getRowClass(row, $index)] }> class={ [this.getRowClass(row, $index)] }>
{ {
this._l(this.columns, (column, cellIndex) => this._l(this.columns, (column, cellIndex) => {
<td const { rowspan, colspan } = this.getSpan(row, column, $index, cellIndex);
class={ [column.id, column.align, column.className || '', columnsHidden[cellIndex] ? 'is-hidden' : '' ] } if (!rowspan || !colspan) {
on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) } return '';
on-mouseleave={ this.handleCellMouseLeave }> } else {
{ if (rowspan === 1 && colspan === 1) {
column.renderCell.call(this._renderProxy, h, { row, column, $index, store: this.store, _self: this.context || this.table.$vnode.context }, columnsHidden[cellIndex]) 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" /> : '' !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) { getRowStyle(row, index) {
const rowStyle = this.rowStyle; const rowStyle = this.rowStyle;
if (typeof rowStyle === 'function') { if (typeof rowStyle === 'function') {

4
packages/table/src/table.vue
View File

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