| | |
| | | import debounce from 'throttle-debounce/debounce'; |
| | | import LayoutObserver from './layout-observer'; |
| | | import { mapStates } from './store/helper'; |
| | | import TableRow from './table-row.js'; |
| | | |
| | | export default { |
| | | name: 'ElTableBody', |
| | |
| | | |
| | | components: { |
| | | ElCheckbox, |
| | | ElTooltip |
| | | ElTooltip, |
| | | TableRow |
| | | }, |
| | | |
| | | props: { |
| | |
| | | border="0"> |
| | | <colgroup> |
| | | { |
| | | this.columns.map(column => <col name={ column.id } key={column.id} />) |
| | | this.columns.map(column => <col name={column.id} key={column.id} />) |
| | | } |
| | | </colgroup> |
| | | <tbody> |
| | |
| | | return acc.concat(this.wrappedRowRender(row, acc.length)); |
| | | }, []) |
| | | } |
| | | <el-tooltip effect={ this.table.tooltipEffect } placement="top" ref="tooltip" content={ this.tooltipContent }></el-tooltip> |
| | | <el-tooltip effect={this.table.tooltipEffect} placement="top" ref="tooltip" content={this.tooltipContent}></el-tooltip> |
| | | </tbody> |
| | | </table> |
| | | ); |
| | |
| | | rightFixedCount: states => states.rightFixedColumns.length, |
| | | hasExpandColumn: states => states.columns.some(({ type }) => type === 'expand') |
| | | }), |
| | | |
| | | columnsHidden() { |
| | | return this.columns.map((column, index) => this.isColumnHidden(index)); |
| | | }, |
| | | |
| | | firstDefaultColumnIndex() { |
| | | return arrayFindIndex(this.columns, ({ type }) => type === 'default'); |
| | |
| | | |
| | | if (cell) { |
| | | const column = getColumnByCell(table, cell); |
| | | const hoverState = table.hoverState = {cell, column, row}; |
| | | const hoverState = table.hoverState = { cell, column, row }; |
| | | table.$emit('cell-mouse-enter', hoverState.row, hoverState.column, hoverState.cell, event); |
| | | } |
| | | |
| | |
| | | |
| | | rowRender(row, $index, treeRowData) { |
| | | const { treeIndent, columns, firstDefaultColumnIndex } = this; |
| | | const columnsHidden = columns.map((column, index) => this.isColumnHidden(index)); |
| | | const rowClasses = this.getRowClass(row, $index); |
| | | let display = true; |
| | | if (treeRowData) { |
| | |
| | | let displayStyle = display ? null : { |
| | | display: 'none' |
| | | }; |
| | | return (<tr |
| | | style={ [displayStyle, this.getRowStyle(row, $index)] } |
| | | class={ rowClasses } |
| | | key={ this.getKeyOfRow(row, $index) } |
| | | on-dblclick={ ($event) => this.handleDoubleClick($event, row) } |
| | | on-click={ ($event) => this.handleClick($event, row) } |
| | | on-contextmenu={ ($event) => this.handleContextMenu($event, row) } |
| | | on-mouseenter={ _ => this.handleMouseEnter($index) } |
| | | on-mouseleave={ this.handleMouseLeave }> |
| | | { |
| | | columns.map((column, cellIndex) => { |
| | | const { rowspan, colspan } = this.getSpan(row, column, $index, cellIndex); |
| | | if (!rowspan || !colspan) { |
| | | return null; |
| | | } |
| | | const columnData = { ...column }; |
| | | columnData.realWidth = this.getColspanRealWidth(columns, colspan, cellIndex); |
| | | const data = { |
| | | store: this.store, |
| | | _self: this.context || this.table.$vnode.context, |
| | | column: columnData, |
| | | row, |
| | | $index |
| | | }; |
| | | if (cellIndex === firstDefaultColumnIndex && treeRowData) { |
| | | data.treeNode = { |
| | | indent: treeRowData.level * treeIndent, |
| | | level: treeRowData.level |
| | | }; |
| | | if (typeof treeRowData.expanded === 'boolean') { |
| | | data.treeNode.expanded = treeRowData.expanded; |
| | | // 表明是懒加载 |
| | | if ('loading' in treeRowData) { |
| | | data.treeNode.loading = treeRowData.loading; |
| | | } |
| | | if ('noLazyChildren' in treeRowData) { |
| | | data.treeNode.noLazyChildren = treeRowData.noLazyChildren; |
| | | } |
| | | } |
| | | } |
| | | return ( |
| | | <td |
| | | style={ this.getCellStyle($index, cellIndex, row, column) } |
| | | class={ this.getCellClass($index, cellIndex, row, column) } |
| | | rowspan={ rowspan } |
| | | colspan={ colspan } |
| | | on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) } |
| | | on-mouseleave={ this.handleCellMouseLeave }> |
| | | { |
| | | column.renderCell.call( |
| | | this._renderProxy, |
| | | this.$createElement, |
| | | data, |
| | | columnsHidden[cellIndex] |
| | | ) |
| | | } |
| | | </td> |
| | | ); |
| | | }) |
| | | } |
| | | </tr>); |
| | | return ( |
| | | <TableRow |
| | | style={[displayStyle, this.getRowStyle(row, $index)]} |
| | | class={rowClasses} |
| | | key={this.getKeyOfRow(row, $index)} |
| | | nativeOn-dblclick={($event) => this.handleDoubleClick($event, row)} |
| | | nativeOn-click={($event) => this.handleClick($event, row)} |
| | | nativeOn-contextmenu={($event) => this.handleContextMenu($event, row)} |
| | | nativeOn-mouseenter={_ => this.handleMouseEnter($index)} |
| | | nativeOn-mouseleave={this.handleMouseLeave} |
| | | columns={columns} |
| | | row={row} |
| | | index={$index} |
| | | store={this.store} |
| | | context={this.context || this.table.$vnode.context} |
| | | firstDefaultColumnIndex={firstDefaultColumnIndex} |
| | | treeRowData={treeRowData} |
| | | treeIndent={treeIndent} |
| | | columnsHidden={this.columnsHidden} |
| | | getSpan={this.getSpan} |
| | | getColspanRealWidth={this.getColspanRealWidth} |
| | | getCellStyle={this.getCellStyle} |
| | | getCellClass={this.getCellClass} |
| | | handleCellMouseEnter={this.handleCellMouseEnter} |
| | | handleCellMouseLeave={this.handleCellMouseLeave} |
| | | isSelected={this.store.isSelected(row)} |
| | | isExpanded={this.store.states.expandRows.indexOf(row) > -1} |
| | | fixed={this.fixed} |
| | | > |
| | | </TableRow> |
| | | ); |
| | | }, |
| | | |
| | | wrappedRowRender(row, $index) { |