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() }
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') {

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

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