From 41490c55e1b2e67074c624154629365a349f31ad Mon Sep 17 00:00:00 2001 From: furybean Date: Fri, 21 Oct 2016 23:13:34 +0800 Subject: [PATCH] [Table] Improve fixed implement method. --- packages/table/src/table-body.js | 37 +++++++++++++++++++--------- packages/table/src/table-header.js | 31 +++++++++++++++++------ packages/table/src/table-layout.js | 25 ------------------- packages/table/src/table-store.js | 3 --- packages/table/src/table.vue | 4 --- packages/theme-default/src/table.css | 19 +++++++++++--- 6 files changed, 65 insertions(+), 54 deletions(-) diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js index e40cbd50a..50ad46357 100644 --- a/packages/table/src/table-body.js +++ b/packages/table/src/table-body.js @@ -52,10 +52,10 @@ export default { on-mouseenter={ _ => this.handleMouseEnter($index) } class={ this.getRowClass(row, $index) }> { - this._l(this.columns, (column) => + this._l(this.columns, (column, cellIndex) => this.handleCellMouseEnter($event, row) } on-mouseleave={ this.handleCellMouseLeave }> { @@ -81,18 +81,24 @@ export default { data() { return this.store.states.data; }, + hoverRowIndex() { return this.store.states.hoverRow; }, - currentRow() { - return this.store.states.currentRow; + + columnsCount() { + return this.store.states.columns.length; }, + + leftFixedCount() { + return this.store.states.fixedColumns.length; + }, + + rightFixedCount() { + return this.store.states.rightFixedColumns.length; + }, + columns() { - if (this.fixed === true || this.fixed === 'left') { - return this.store.states.fixedColumns; - } else if (this.fixed === 'right') { - return this.store.states.rightFixedColumns; - } return this.store.states.columns; } }, @@ -104,11 +110,18 @@ export default { }, methods: { + isCellHidden(index) { + if (this.fixed === true || this.fixed === 'left') { + return index >= this.leftFixedCount; + } else if (this.fixed === 'right') { + return index < this.columnsCount - this.rightFixedCount; + } else { + return (index < this.leftFixedCount) || (index >= this.columnsCount - this.rightFixedCount); + } + }, + getRowClass(row, index) { const classes = []; - if (row === this.currentRow) { - classes.push('current-row'); - } if (this.hoverRowIndex === index) { classes.push('hover-row'); } diff --git a/packages/table/src/table-header.js b/packages/table/src/table-header.js index 2f3beee91..e6748846c 100644 --- a/packages/table/src/table-header.js +++ b/packages/table/src/table-header.js @@ -26,13 +26,13 @@ export default { { - this._l(this.columns, column => + this._l(this.columns, (column, cellIndex) => this.handleMouseMove($event, column) } on-mouseout={ this.handleMouseOut } on-mousedown={ ($event) => this.handleMouseDown($event, column) } on-click={ ($event) => this.handleHeaderClick($event, column) } - class={ [column.id, column.direction, column.align] }> + class={ [column.id, column.direction, column.align, this.isCellHidden(cellIndex) ? 'hidden' : ''] }> { [ column.headerTemplate @@ -82,17 +82,34 @@ export default { return this.store.states.isAllSelected; }, + columnsCount() { + return this.store.states.columns.length; + }, + + leftFixedCount() { + return this.store.states.fixedColumns.length; + }, + + rightFixedCount() { + return this.store.states.rightFixedColumns.length; + }, + columns() { - if (this.fixed === true || this.fixed === 'left') { - return this.store.states.fixedColumns; - } else if (this.fixed === 'right') { - return this.store.states.rightFixedColumns; - } return this.store.states.columns; } }, methods: { + isCellHidden(index) { + if (this.fixed === true || this.fixed === 'left') { + return index >= this.leftFixedCount; + } else if (this.fixed === 'right') { + return index < this.columnsCount - this.rightFixedCount; + } else { + return (index < this.leftFixedCount) || (index >= this.columnsCount - this.rightFixedCount); + } + }, + toggleAllSelection() { this.store.commit('toggleAllSelection'); }, diff --git a/packages/table/src/table-layout.js b/packages/table/src/table-layout.js index e60b22707..02a1b050b 100644 --- a/packages/table/src/table-layout.js +++ b/packages/table/src/table-layout.js @@ -1,5 +1,4 @@ import { getScrollBarWidth } from './util'; -import Vue from 'vue'; let GUTTER_WIDTH; @@ -40,30 +39,6 @@ class TableLayout { } } - syncHeight() { - Vue.nextTick(() => { - const { bodyWrapper, fixedBodyWrapper } = this.table.$refs; - - // 若非固定列中的某行内容被撑高, 需要固定列中对应行高度与其保持一致 - const bodyHeight = bodyWrapper.offsetHeight; - const fixedBodyHeight = fixedBodyWrapper.offsetHeight; - - if (bodyHeight !== fixedBodyHeight) { - const rows = bodyWrapper.querySelectorAll('tr'); - const fixedRows = fixedBodyWrapper.querySelectorAll('tr'); - - [].forEach.call(rows, (row, i) => { - const fixedRow = fixedRows[i]; - const rowHeight = row.offsetHeight; - const fixedRowHeight = fixedRow.offsetHeight; - if (rowHeight !== fixedRowHeight) { - fixedRow.style.height = rowHeight + 'px'; - } - }); - } - }); - } - updateScrollY() { const bodyWrapper = this.table.$refs.bodyWrapper; if (this.table.$el && bodyWrapper) { diff --git a/packages/table/src/table-store.js b/packages/table/src/table-store.js index f4f2fc56f..9db6e6fa8 100644 --- a/packages/table/src/table-store.js +++ b/packages/table/src/table-store.js @@ -34,7 +34,6 @@ const TableStore = function(table, initialState = {}) { selection: [], reserveSelection: false, selectable: null, - currentRow: null, hoverRow: null }; @@ -77,14 +76,12 @@ TableStore.prototype.mutations = { } } - if (states.fixedColumns.length > 0 || states.rightFixedColumns.length > 0) Vue.nextTick(() => this.table.syncHeight()); Vue.nextTick(() => this.table.updateScrollY()); }, changeSortCondition(states) { states.data = orderBy((states._data || []), states.sortCondition.property, states.sortCondition.direction); - if (states.fixedColumns.length > 0 || states.rightFixedColumns.length > 0) Vue.nextTick(() => this.table.syncHeight()); Vue.nextTick(() => this.table.updateScrollY()); }, diff --git a/packages/table/src/table.vue b/packages/table/src/table.vue index 6888f2ae9..5180f3c67 100644 --- a/packages/table/src/table.vue +++ b/packages/table/src/table.vue @@ -162,10 +162,6 @@ this.layout.updateScrollY(); }, - syncHeight() { - this.layout.syncHeight(); - }, - bindEvents() { const { bodyWrapper, headerWrapper } = this.$refs; const refs = this.$refs; diff --git a/packages/theme-default/src/table.css b/packages/theme-default/src/table.css index f1cfd66a4..09db10267 100644 --- a/packages/theme-default/src/table.css +++ b/packages/theme-default/src/table.css @@ -58,7 +58,7 @@ } & th, td { - height: 20px; + height: 40px; min-width: 0; box-sizing: border-box; text-overflow: ellipsis; @@ -110,6 +110,7 @@ top: 0; left: 0; box-shadow: 1px 0 8px #d3d4d6; + overflow-x: hidden; &::before { content: ''; @@ -129,6 +130,11 @@ right: 0; box-shadow: -1px 0 8px #d3d4d6; + + .el-table__fixed-header-wrapper, .el-table__fixed-body-wrapper { + left: auto; + right: 0; + } } @e fixed-header-wrapper { @@ -251,11 +257,18 @@ width: 0; } - & td .cell { + & td.hidden, th.hidden { + > * { + visibility: hidden; + } + } + + & .cell { box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; - line-height: 40px; + white-space: normal; + line-height: 24px; padding-left: 18px; padding-right: 18px; }