diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js index f5cc2e5b3..64d32a107 100644 --- a/packages/table/src/table-body.js +++ b/packages/table/src/table-body.js @@ -1,4 +1,4 @@ -import { getValueByPath, getCell, getColumnByCell, getRowIdentity } from './util'; +import { getCell, getColumnByCell, getRowIdentity } from './util'; export default { props: { @@ -15,6 +15,7 @@ export default { }, render(h) { + const columnsHidden = this.columns.map((column, index) => this.isColumnHidden(index)); return (
this.handleCellMouseEnter($event, row) }
on-mouseleave={ this.handleCellMouseLeave }>
{
@@ -62,9 +63,10 @@ export default {
watch: {
'store.states.hoverRow'(newVal, oldVal) {
+ if (!this.store.states.isComplex) return;
const el = this.$el;
if (!el) return;
- const rows = el.querySelectorAll('tr');
+ const rows = el.querySelectorAll('tbody > tr');
const oldRow = rows[oldVal];
const newRow = rows[newVal];
if (oldRow) {
@@ -79,7 +81,7 @@ export default {
const el = this.$el;
if (!el) return;
const data = this.store.states.data;
- const rows = el.querySelectorAll('tr');
+ const rows = el.querySelectorAll('tbody > tr');
const oldRow = rows[data.indexOf(oldVal)];
const newRow = rows[data.indexOf(newVal)];
if (oldRow) {
@@ -128,7 +130,7 @@ export default {
return index;
},
- isCellHidden(index) {
+ isColumnHidden(index) {
if (this.fixed === true || this.fixed === 'left') {
return index >= this.leftFixedCount;
} else if (this.fixed === 'right') {
@@ -197,18 +199,6 @@ export default {
this.store.commit('setCurrentRow', row);
table.$emit('row-click', row, event);
- },
-
- getCellContent(row, property, column) {
- if (column && column.formatter) {
- return column.formatter(row, column);
- }
-
- if (property && property.indexOf('.') === -1) {
- return row[property];
- }
-
- return getValueByPath(row, property);
}
}
};
diff --git a/packages/table/src/table-column.js b/packages/table/src/table-column.js
index 9a13ebe33..6844ba67d 100644
--- a/packages/table/src/table-column.js
+++ b/packages/table/src/table-column.js
@@ -1,6 +1,7 @@
import ElCheckbox from 'element-ui/packages/checkbox';
import ElTag from 'element-ui/packages/tag';
import objectAssign from 'element-ui/src/utils/merge';
+import { getValueByPath } from './util';
let columnIdSeed = 1;
@@ -72,8 +73,17 @@ const getDefaultColumn = function(type, options) {
return column;
};
-const DEFAULT_RENDER_CELL = function(h, { row, column }, parent) {
- return parent.getCellContent(row, column.property, column);
+const DEFAULT_RENDER_CELL = function(h, { row, column }) {
+ const property = column.property;
+ if (column && column.formatter) {
+ return column.formatter(row, column);
+ }
+
+ if (property && property.indexOf('.') === -1) {
+ return row[property];
+ }
+
+ return getValueByPath(row, property);
};
export default {
@@ -182,7 +192,7 @@ export default {
className: this.className,
property: this.prop || this.property,
type,
- renderCell: DEFAULT_RENDER_CELL,
+ renderCell: null,
renderHeader: this.renderHeader,
minWidth,
width,
@@ -229,15 +239,19 @@ export default {
};
}
+ if (!renderCell) {
+ renderCell = DEFAULT_RENDER_CELL;
+ }
+
return _self.showOverflowTooltip || _self.showTooltipWhenOverflow
? { renderCell(h, data, this._renderProxy) }
- { renderCell(h, data, this._renderProxy) }
+ { renderCell(h, data) }
+ { renderCell(h, data) }
{ renderCell(h, data, this._renderProxy) } ;
+ : { renderCell(h, data) } ;
};
this.columnConfig = column;
diff --git a/packages/table/src/table-layout.js b/packages/table/src/table-layout.js
index 8dcf6071a..640bd24eb 100644
--- a/packages/table/src/table-layout.js
+++ b/packages/table/src/table-layout.js
@@ -42,6 +42,8 @@ class TableLayout {
}
updateScrollY() {
+ const height = this.height;
+ if (typeof height !== 'string' || typeof height !== 'number') return;
const bodyWrapper = this.table.$refs.bodyWrapper;
if (this.table.$el && bodyWrapper) {
const body = bodyWrapper.querySelector('.el-table__body');
diff --git a/packages/table/src/table-store.js b/packages/table/src/table-store.js
index 594e84fc3..3df908b11 100644
--- a/packages/table/src/table-store.js
+++ b/packages/table/src/table-store.js
@@ -55,6 +55,7 @@ const TableStore = function(table, initialState = {}) {
columns: [],
fixedColumns: [],
rightFixedColumns: [],
+ isComplex: false,
_data: null,
filteredData: null,
data: null,
@@ -246,6 +247,7 @@ TableStore.prototype.updateColumns = function() {
states.fixedColumns.unshift(_columns[0]);
}
states.columns = [].concat(states.fixedColumns).concat(_columns.filter((column) => !column.fixed)).concat(states.rightFixedColumns);
+ states.isComplex = states.fixedColumns.length > 0 || states.rightFixedColumns.length > 0;
};
TableStore.prototype.isSelected = function(row) {
diff --git a/packages/table/src/table.vue b/packages/table/src/table.vue
index 3f659eaed..250535209 100644
--- a/packages/table/src/table.vue
+++ b/packages/table/src/table.vue
@@ -1,6 +1,12 @@
diff --git a/packages/theme-default/src/table.css b/packages/theme-default/src/table.css
index 7c5fcb931..506ce31e1 100644
--- a/packages/theme-default/src/table.css
+++ b/packages/theme-default/src/table.css
@@ -325,15 +325,11 @@
}
@e body {
- td {
- transition: background-color .25s ease;
- }
-
- tr.hover-row td {
+ tr.hover-row > td {
background-color: #eff2f7;
}
- tr.current-row td {
+ tr.current-row > td {
background: #eff7ff;
}
}
@@ -364,5 +360,17 @@
color: #99a9bf;
}
}
+
+ @modifier enable-row-transition {
+ .el-table__body td {
+ transition: background-color .25s ease;
+ }
+ }
+
+ @modifier enable-row-hover {
+ tr:hover > td {
+ background-color: #eff2f7;
+ }
+ }
}
}
diff --git a/test/unit/specs/table.spec.js b/test/unit/specs/table.spec.js
index e44f95107..f96904606 100644
--- a/test/unit/specs/table.spec.js
+++ b/test/unit/specs/table.spec.js
@@ -1054,7 +1054,7 @@ describe('Table', () => {
const vm = createVue({
template: `
|