Skip to content

E
Element
Commit 9b938421 authored by FuryBean's avatar FuryBean Committed by 杨奕
Browse files
Options

Table: improve performance (#9426) 

* improve table render time in some condition

* Update table.vue
parent b27f3405
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 407 additions and 221 deletions
packages/table/src/layout-observer.js 0 → 100644
View file @ 9b938421
export default {
created() {
this.tableLayout.addObserver(this);
},
destroyed() {
this.tableLayout.removeObserver(this);
},
computed: {
tableLayout() {
let layout = this.layout;
if (!layout && this.table) {
layout = this.table.layout;
}
if (!layout) {
throw new Error('Can not find table layout.');
}
return layout;
}
},
mounted() {
this.onColumnsChange(this.tableLayout);
this.onScrollableChange(this.tableLayout);
},
updated() {
if (this.__updated__) return;
this.onColumnsChange(this.tableLayout);
this.onScrollableChange(this.tableLayout);
this.__updated__ = true;
},
methods: {
onColumnsChange() {
const cols = this.$el.querySelectorAll('colgroup > col');
if (!cols.length) return;
const flattenColumns = this.tableLayout.getFlattenColumns();
const columnsMap = {};
flattenColumns.forEach((column) => {
columnsMap[column.id] = column;
});
for (let i = 0, j = cols.length; i < j; i++) {
const col = cols[i];
const name = col.getAttribute('name');
const column = columnsMap[name];
if (column) {
col.setAttribute('width', column.realWidth || column.width);
}
}
},
onScrollableChange(layout) {
const cols = this.$el.querySelectorAll('colgroup > col[name=gutter]');
for (let i = 0, j = cols.length; i < j; i++) {
const col = cols[i];
col.setAttribute('width', layout.scrollY ? layout.gutterWidth : '0');
}
const ths = this.$el.querySelectorAll('th.gutter');
for (let i = 0, j = ths.length; i < j; i++) {
const th = ths[i];
th.style.width = layout.scrollY ? layout.gutterWidth + 'px' : '0';
th.style.display = layout.scrollY ? '' : 'none';
}
}
}
};
packages/table/src/table-body.js
View file @ 9b938421
...@@ -3,8 +3,13 @@ import { hasClass, addClass, removeClass } from 'element-ui/src/utils/dom'; ...@@ -3,8 +3,13 @@ import { hasClass, addClass, removeClass } from 'element-ui/src/utils/dom';
import ElCheckbox from 'element-ui/packages/checkbox'; import ElCheckbox from 'element-ui/packages/checkbox';
import ElTooltip from 'element-ui/packages/tooltip'; import ElTooltip from 'element-ui/packages/tooltip';
import debounce from 'throttle-debounce/debounce'; import debounce from 'throttle-debounce/debounce';
import LayoutObserver from './layout-observer';
export default { export default {
name: 'ElTableBody',
mixins: [LayoutObserver],
components: { components: {
ElCheckbox, ElCheckbox,
ElTooltip ElTooltip
...@@ -16,9 +21,6 @@ export default { ...@@ -16,9 +21,6 @@ export default {
}, },
stripe: Boolean, stripe: Boolean,
context: {}, context: {},
layout: {
required: true
},
rowClassName: [String, Function], rowClassName: [String, Function],
rowStyle: [Object, Function], rowStyle: [Object, Function],
fixed: String, fixed: String,
...@@ -35,11 +37,7 @@ export default { ...@@ -35,11 +37,7 @@ export default {
border="0"> border="0">
<colgroup> <colgroup>
{ {
this._l(this.columns, column => this._l(this.columns, column => <col name={ column.id } />)
<col
name={ column.id }
width={ column.realWidth || column.width }
/>)
} }
</colgroup> </colgroup>
<tbody> <tbody>
...@@ -112,9 +110,6 @@ export default { ...@@ -112,9 +110,6 @@ export default {
} }
}) })
} }
{
!this.fixed && this.layout.scrollY && this.layout.gutterWidth ? <td class="gutter" /> : ''
}
</tr>, </tr>,
this.store.isRowExpanded(row) this.store.isRowExpanded(row)
? (<tr> ? (<tr>
...@@ -344,7 +339,7 @@ export default { ...@@ -344,7 +339,7 @@ export default {
if (hasClass(cellChild, 'el-tooltip') && cellChild.scrollWidth > cellChild.offsetWidth && this.$refs.tooltip) { if (hasClass(cellChild, 'el-tooltip') && cellChild.scrollWidth > cellChild.offsetWidth && this.$refs.tooltip) {
const tooltip = this.$refs.tooltip; const tooltip = this.$refs.tooltip;
// TODO 会引起整个 Table 的重新渲染，需要优化
this.tooltipContent = cell.textContent || cell.innerText; this.tooltipContent = cell.textContent || cell.innerText;
tooltip.referenceElm = cell; tooltip.referenceElm = cell;
tooltip.$refs.popper && (tooltip.$refs.popper.style.display = 'none'); tooltip.$refs.popper && (tooltip.$refs.popper.style.display = 'none');
...@@ -363,7 +358,7 @@ export default { ...@@ -363,7 +358,7 @@ export default {
const cell = getCell(event); const cell = getCell(event);
if (!cell) return; if (!cell) return;
const oldHoverState = this.table.hoverState; const oldHoverState = this.table.hoverState || {};
this.table.$emit('cell-mouse-leave', oldHoverState.row, oldHoverState.column, oldHoverState.cell, event); this.table.$emit('cell-mouse-leave', oldHoverState.row, oldHoverState.column, oldHoverState.cell, event);
}, },
......
packages/table/src/table-column.js
View file @ 9b938421
...@@ -116,6 +116,26 @@ const DEFAULT_RENDER_CELL = function(h, { row, column }) { ...@@ -116,6 +116,26 @@ const DEFAULT_RENDER_CELL = function(h, { row, column }) {
return value; return value;
}; };
const parseWidth = (width) => {
if (width !== undefined) {
width = parseInt(width, 10);
if (isNaN(width)) {
width = null;
}
}
return width;
};
const parseMinWidth = (minWidth) => {
if (minWidth !== undefined) {
minWidth = parseInt(minWidth, 10);
if (isNaN(minWidth)) {
minWidth = 80;
}
}
return minWidth;
};
export default { export default {
name: 'ElTableColumn', name: 'ElTableColumn',
...@@ -205,25 +225,12 @@ export default { ...@@ -205,25 +225,12 @@ export default {
let parent = this.columnOrTableParent; let parent = this.columnOrTableParent;
let owner = this.owner; let owner = this.owner;
this.isSubColumn = owner !== parent; this.isSubColumn = owner !== parent;
this.columnId = (parent.tableId || (parent.columnId + '_')) + 'column_' + columnIdSeed++; this.columnId = (parent.tableId || parent.columnId) + '_column_' + columnIdSeed++;
let type = this.type; let type = this.type;
let width = this.width; const width = parseWidth(this.width);
if (width !== undefined) { const minWidth = parseMinWidth(this.minWidth);
width = parseInt(width, 10);
if (isNaN(width)) {
width = null;
}
}
let minWidth = this.minWidth;
if (minWidth !== undefined) {
minWidth = parseInt(minWidth, 10);
if (isNaN(minWidth)) {
minWidth = 80;
}
}
let isColumnGroup = false; let isColumnGroup = false;
...@@ -353,14 +360,14 @@ export default { ...@@ -353,14 +360,14 @@ export default {
width(newVal) { width(newVal) {
if (this.columnConfig) { if (this.columnConfig) {
this.columnConfig.width = newVal; this.columnConfig.width = parseWidth(newVal);
this.owner.store.scheduleLayout(); this.owner.store.scheduleLayout();
} }
}, },
minWidth(newVal) { minWidth(newVal) {
if (this.columnConfig) { if (this.columnConfig) {
this.columnConfig.minWidth = newVal; this.columnConfig.minWidth = parseMinWidth(newVal);
this.owner.store.scheduleLayout(); this.owner.store.scheduleLayout();
} }
}, },
...@@ -368,7 +375,7 @@ export default { ...@@ -368,7 +375,7 @@ export default {
fixed(newVal) { fixed(newVal) {
if (this.columnConfig) { if (this.columnConfig) {
this.columnConfig.fixed = newVal; this.columnConfig.fixed = newVal;
this.owner.store.scheduleLayout(); this.owner.store.scheduleLayout(true);
} }
}, },
......
packages/table/src/table-footer.js
View file @ 9b938421
import LayoutObserver from './layout-observer';
export default { export default {
name: 'ElTableFooter', name: 'ElTableFooter',
mixins: [LayoutObserver],
render(h) { render(h) {
const sums = []; const sums = [];
this.columns.forEach((column, index) => { this.columns.forEach((column, index) => {
...@@ -41,16 +45,10 @@ export default { ...@@ -41,16 +45,10 @@ export default {
border="0"> border="0">
<colgroup> <colgroup>
{ {
this._l(this.columns, column => this._l(this.columns, column => <col name={ column.id } />)
<col
name={ column.id }
width={ column.realWidth || column.width }
/>)
} }
{ {
!this.fixed && this.layout.gutterWidth this.hasGutter ? <col name="gutter" /> : ''
? <col name="gutter" width={ this.layout.scrollY ? this.layout.gutterWidth : '' }></col>
: ''
} }
</colgroup> </colgroup>
<tbody class={ [{ 'has-gutter': this.hasGutter }] }> <tbody class={ [{ 'has-gutter': this.hasGutter }] }>
...@@ -70,9 +68,7 @@ export default { ...@@ -70,9 +68,7 @@ export default {
) )
} }
{ {
this.hasGutter this.hasGutter ? <th class="gutter"></th> : ''
? <td class="gutter" style={{ width: this.layout.scrollY ? this.layout.gutterWidth + 'px' : '0' }}></td>
: ''
} }
</tr> </tr>
</tbody> </tbody>
...@@ -85,9 +81,6 @@ export default { ...@@ -85,9 +81,6 @@ export default {
store: { store: {
required: true required: true
}, },
layout: {
required: true
},
summaryMethod: Function, summaryMethod: Function,
sumText: String, sumText: String,
border: Boolean, border: Boolean,
...@@ -103,6 +96,10 @@ export default { ...@@ -103,6 +96,10 @@ export default {
}, },
computed: { computed: {
table() {
return this.$parent;
},
isAllSelected() { isAllSelected() {
return this.store.states.isAllSelected; return this.store.states.isAllSelected;
}, },
...@@ -124,7 +121,7 @@ export default { ...@@ -124,7 +121,7 @@ export default {
}, },
hasGutter() { hasGutter() {
return !this.fixed && this.layout.gutterWidth; return !this.fixed && this.tableLayout.gutterWidth;
} }
}, },
......
packages/table/src/table-header.js
View file @ 9b938421
...@@ -3,6 +3,7 @@ import ElCheckbox from 'element-ui/packages/checkbox'; ...@@ -3,6 +3,7 @@ import ElCheckbox from 'element-ui/packages/checkbox';
import ElTag from 'element-ui/packages/tag'; import ElTag from 'element-ui/packages/tag';
import Vue from 'vue'; import Vue from 'vue';
import FilterPanel from './filter-panel.vue'; import FilterPanel from './filter-panel.vue';
import LayoutObserver from './layout-observer';
const getAllColumns = (columns) => { const getAllColumns = (columns) => {
const result = []; const result = [];
...@@ -65,13 +66,14 @@ const convertToRows = (originColumns) => { ...@@ -65,13 +66,14 @@ const convertToRows = (originColumns) => {
export default { export default {
name: 'ElTableHeader', name: 'ElTableHeader',
mixins: [LayoutObserver],
render(h) { render(h) {
const originColumns = this.store.states.originColumns; const originColumns = this.store.states.originColumns;
const columnRows = convertToRows(originColumns, this.columns); const columnRows = convertToRows(originColumns, this.columns);
// 是否拥有多级表头 // 是否拥有多级表头
const isGroup = columnRows.length > 1; const isGroup = columnRows.length > 1;
if (isGroup) this.$parent.isGroup = true; if (isGroup) this.$parent.isGroup = true;
return ( return (
<table <table
class="el-table__header" class="el-table__header"
...@@ -80,16 +82,10 @@ export default { ...@@ -80,16 +82,10 @@ export default {
border="0"> border="0">
<colgroup> <colgroup>
{ {
this._l(this.columns, column => this._l(this.columns, column => <col name={ column.id } />)
<col
name={ column.id }
width={ column.realWidth || column.width }
/>)
} }
{ {
!this.fixed && this.layout.gutterWidth this.hasGutter ? <col name="gutter" /> : ''
? <col name="gutter" width={ this.layout.scrollY ? this.layout.gutterWidth : '' }></col>
: ''
} }
</colgroup> </colgroup>
<thead class={ [{ 'is-group': isGroup, 'has-gutter': this.hasGutter }] }> <thead class={ [{ 'is-group': isGroup, 'has-gutter': this.hasGutter }] }>
...@@ -137,12 +133,7 @@ export default { ...@@ -137,12 +133,7 @@ export default {
) )
} }
{ {
this.hasGutter this.hasGutter ? <th class="gutter"></th> : ''
? <th class="gutter" style={{
width: this.layout.scrollY ? this.layout.gutterWidth + 'px' : '0',
display: this.layout.scrollY ? '' : 'none'
}}></th>
: ''
} }
</tr> </tr>
) )
...@@ -157,9 +148,6 @@ export default { ...@@ -157,9 +148,6 @@ export default {
store: { store: {
required: true required: true
}, },
layout: {
required: true
},
border: Boolean, border: Boolean,
defaultSort: { defaultSort: {
type: Object, type: Object,
...@@ -211,7 +199,7 @@ export default { ...@@ -211,7 +199,7 @@ export default {
}, },
hasGutter() { hasGutter() {
return !this.fixed && this.layout.gutterWidth; return !this.fixed && this.tableLayout.gutterWidth;
} }
}, },
......
packages/table/src/table-layout.js
View file @ 9b938421
import scrollbarWidth from 'element-ui/src/utils/scrollbar-width'; import scrollbarWidth from 'element-ui/src/utils/scrollbar-width';
import Vue from 'vue';
class TableLayout { class TableLayout {
constructor(options) { constructor(options) {
this.observers = [];
this.table = null; this.table = null;
this.store = null; this.store = null;
this.columns = null; this.columns = null;
...@@ -43,7 +45,7 @@ class TableLayout { ...@@ -43,7 +45,7 @@ class TableLayout {
const bodyWrapper = this.table.bodyWrapper; const bodyWrapper = this.table.bodyWrapper;
if (this.table.$el && bodyWrapper) { if (this.table.$el && bodyWrapper) {
const body = bodyWrapper.querySelector('.el-table__body'); const body = bodyWrapper.querySelector('.el-table__body');
this.scrollY = body.offsetHeight > bodyWrapper.offsetHeight; this.scrollY = body.offsetHeight > this.bodyHeight;
} }
} }
...@@ -52,19 +54,19 @@ class TableLayout { ...@@ -52,19 +54,19 @@ class TableLayout {
if (typeof value === 'string' && /^\d+$/.test(value)) { if (typeof value === 'string' && /^\d+$/.test(value)) {
value = Number(value); value = Number(value);
} }
this.height = value; this.height = value;
if (!el) return; if (!el && value) return Vue.nextTick(() => this.setHeight(value, prop));
if (typeof value === 'number') { if (typeof value === 'number') {
el.style[prop] = value + 'px'; el.style[prop] = value + 'px';
this.updateHeight(); this.updateElsHeight();
} else if (typeof value === 'string') { } else if (typeof value === 'string') {
if (value === '') { if (value === '') {
el.style[prop] = ''; el.style[prop] = '';
} }
this.updateHeight(); this.updateElsHeight();
} }
} }
...@@ -72,37 +74,33 @@ class TableLayout { ...@@ -72,37 +74,33 @@ class TableLayout {
return this.setHeight(value, 'max-height'); return this.setHeight(value, 'max-height');
} }
updateHeight() { updateElsHeight() {
const height = this.tableHeight = this.table.$el.clientHeight; if (!this.table.$ready) return Vue.nextTick(() => this.updateElsHeight());
const noData = !this.table.data || this.table.data.length === 0;
const { headerWrapper, appendWrapper, footerWrapper } = this.table.$refs; const { headerWrapper, appendWrapper, footerWrapper } = this.table.$refs;
const footerHeight = this.footerHeight = footerWrapper ? footerWrapper.offsetHeight : 0;
this.appendHeight = appendWrapper ? appendWrapper.offsetHeight : 0; this.appendHeight = appendWrapper ? appendWrapper.offsetHeight : 0;
if (this.showHeader && !headerWrapper) return; if (this.showHeader && !headerWrapper) return;
if (!this.showHeader) { const headerHeight = this.headerHeight = !this.showHeader ? 0 : headerWrapper.offsetHeight;
this.headerHeight = 0; if (this.showHeader && headerWrapper.offsetWidth > 0 && headerHeight < 2) {
if (this.height !== null && (!isNaN(this.height) || typeof this.height === 'string')) { return Vue.nextTick(() => this.updateElsHeight());
this.bodyHeight = height - footerHeight + (footerWrapper ? 1 : 0);
}
this.fixedBodyHeight = this.scrollX ? height - this.gutterWidth : height;
} else {
const headerHeight = this.headerHeight = headerWrapper.offsetHeight;
const bodyHeight = height - headerHeight - footerHeight + (footerWrapper ? 1 : 0);
if (this.height !== null && (!isNaN(this.height) || typeof this.height === 'string')) {
this.bodyHeight = bodyHeight;
}
this.fixedBodyHeight = this.scrollX ? bodyHeight - this.gutterWidth : bodyHeight;
} }
this.viewportHeight = this.scrollX ? height - (noData ? 0 : this.gutterWidth) : height; const tableHeight = this.tableHeight = this.table.$el.clientHeight;
} if (this.height !== null && (!isNaN(this.height) || typeof this.height === 'string')) {
const footerHeight = this.footerHeight = footerWrapper ? footerWrapper.offsetHeight : 0;
this.bodyHeight = tableHeight - headerHeight - footerHeight + (footerWrapper ? 1 : 0);
}
this.fixedBodyHeight = this.scrollX ? this.bodyHeight - this.gutterWidth : this.bodyHeight;
update() { const noData = !this.table.data || this.table.data.length === 0;
const fit = this.fit; this.viewportHeight = this.scrollX ? tableHeight - (noData ? 0 : this.gutterWidth) : tableHeight;
const columns = this.table.columns;
const bodyWidth = this.table.$el.clientWidth;
let bodyMinWidth = 0;
this.updateScrollY();
this.notifyObservers('scrollable');
}
getFlattenColumns() {
const flattenColumns = []; const flattenColumns = [];
const columns = this.table.columns;
columns.forEach((column) => { columns.forEach((column) => {
if (column.isColumnGroup) { if (column.isColumnGroup) {
flattenColumns.push.apply(flattenColumns, column.columns); flattenColumns.push.apply(flattenColumns, column.columns);
...@@ -111,8 +109,21 @@ class TableLayout { ...@@ -111,8 +109,21 @@ class TableLayout {
} }
}); });
return flattenColumns;
}
updateColumnsWidth() {
const fit = this.fit;
const bodyWidth = this.table.$el.clientWidth;
let bodyMinWidth = 0;
const flattenColumns = this.getFlattenColumns();
let flexColumns = flattenColumns.filter((column) => typeof column.width !== 'number'); let flexColumns = flattenColumns.filter((column) => typeof column.width !== 'number');
flattenColumns.forEach((column) => { // Clean those columns whose width changed from flex to unflex
if (typeof column.width === 'number' && column.realWidth) column.realWidth = null;
});
if (flexColumns.length > 0 && fit) { if (flexColumns.length > 0 && fit) {
flattenColumns.forEach((column) => { flattenColumns.forEach((column) => {
bodyMinWidth += column.width || column.minWidth || 80; bodyMinWidth += column.width || column.minWidth || 80;
...@@ -169,7 +180,7 @@ class TableLayout { ...@@ -169,7 +180,7 @@ class TableLayout {
if (fixedColumns.length > 0) { if (fixedColumns.length > 0) {
let fixedWidth = 0; let fixedWidth = 0;
fixedColumns.forEach(function(column) { fixedColumns.forEach(function(column) {
fixedWidth += column.realWidth; fixedWidth += column.realWidth || column.width;
}); });
this.fixedWidth = fixedWidth; this.fixedWidth = fixedWidth;
...@@ -179,11 +190,40 @@ class TableLayout { ...@@ -179,11 +190,40 @@ class TableLayout {
if (rightFixedColumns.length > 0) { if (rightFixedColumns.length > 0) {
let rightFixedWidth = 0; let rightFixedWidth = 0;
rightFixedColumns.forEach(function(column) { rightFixedColumns.forEach(function(column) {
rightFixedWidth += column.realWidth; rightFixedWidth += column.realWidth || column.width;
}); });
this.rightFixedWidth = rightFixedWidth; this.rightFixedWidth = rightFixedWidth;
} }
this.notifyObservers('columns');
}
addObserver(observer) {
this.observers.push(observer);
}
removeObserver(observer) {
const index = this.observers.indexOf(observer);
if (index !== -1) {
this.observers.splice(index, 1);
}
}
notifyObservers(event) {
const observers = this.observers;
observers.forEach((observer) => {
switch (event) {
case 'columns':
observer.onColumnsChange(this);
break;
case 'scrollable':
observer.onScrollableChange(this);
break;
default:
throw new Error(`Table Layout don't have event ${event}.`);
}
});
} }
} }
......
packages/table/src/table-store.js
View file @ 9b938421
...@@ -94,7 +94,6 @@ const TableStore = function(table, initialState = {}) { ...@@ -94,7 +94,6 @@ const TableStore = function(table, initialState = {}) {
fixedLeafColumnsLength: 0, fixedLeafColumnsLength: 0,
rightFixedLeafColumnsLength: 0, rightFixedLeafColumnsLength: 0,
isComplex: false, isComplex: false,
_data: null,
filteredData: null, filteredData: null,
data: null, data: null,
sortingColumn: null, sortingColumn: null,
...@@ -137,15 +136,6 @@ TableStore.prototype.mutations = { ...@@ -137,15 +136,6 @@ TableStore.prototype.mutations = {
states.filteredData = data; states.filteredData = data;
states.data = sortData((data || []), states); states.data = sortData((data || []), states);
// states.data.forEach((item) => {
// if (!item.$extra) {
// Object.defineProperty(item, '$extra', {
// value: {},
// enumerable: false
// });
// }
// });
this.updateCurrentRow(); this.updateCurrentRow();
if (!states.reserveSelection) { if (!states.reserveSelection) {
...@@ -252,8 +242,10 @@ TableStore.prototype.mutations = { ...@@ -252,8 +242,10 @@ TableStore.prototype.mutations = {
states.reserveSelection = column.reserveSelection; states.reserveSelection = column.reserveSelection;
} }
this.updateColumns(); // hack for dynamics insert column if (this.table.$ready) {
this.scheduleLayout(); this.updateColumns(); // hack for dynamics insert column
this.scheduleLayout();
}
}, },
removeColumn(states, column, parent) { removeColumn(states, column, parent) {
...@@ -266,8 +258,10 @@ TableStore.prototype.mutations = { ...@@ -266,8 +258,10 @@ TableStore.prototype.mutations = {
array.splice(array.indexOf(column), 1); array.splice(array.indexOf(column), 1);
} }
this.updateColumns(); // hack for dynamics remove column if (this.table.$ready) {
this.scheduleLayout(); this.updateColumns(); // hack for dynamics remove column
this.scheduleLayout();
}
}, },
setHoverRow(states, row) { setHoverRow(states, row) {
...@@ -370,7 +364,9 @@ TableStore.prototype.clearSelection = function() { ...@@ -370,7 +364,9 @@ TableStore.prototype.clearSelection = function() {
const states = this.states; const states = this.states;
states.isAllSelected = false; states.isAllSelected = false;
const oldSelection = states.selection; const oldSelection = states.selection;
states.selection = []; if (states.selection.length) {
states.selection = [];
}
if (oldSelection.length > 0) { if (oldSelection.length > 0) {
this.table.$emit('selection-change', states.selection ? states.selection.slice() : []); this.table.$emit('selection-change', states.selection ? states.selection.slice() : []);
} }
...@@ -531,8 +527,11 @@ TableStore.prototype.updateAllSelected = function() { ...@@ -531,8 +527,11 @@ TableStore.prototype.updateAllSelected = function() {
states.isAllSelected = isAllSelected; states.isAllSelected = isAllSelected;
}; };
TableStore.prototype.scheduleLayout = function() { TableStore.prototype.scheduleLayout = function(updateColumns) {
this.table.debouncedLayout(); if (updateColumns) {
this.updateColumns();
}
this.table.debouncedUpdateLayout();
}; };
TableStore.prototype.setCurrentRowKey = function(key) { TableStore.prototype.setCurrentRowKey = function(key) {
......
packages/table/src/table.vue
View file @ 9b938421
This diff is collapsed.
packages/theme-chalk/src/table.scss
View file @ 9b938421
...@@ -83,6 +83,18 @@ ...@@ -83,6 +83,18 @@
} }
} }
@include m(scrollable-x) {
.el-table__body-wrapper {
overflow-x: auto;
}
}
@include m(scrollable-y) {
.el-table__body-wrapper {
overflow-y: auto;
}
}
thead { thead {
color: $--table-header-color; color: $--table-header-color;
font-weight: 500; font-weight: 500;
...@@ -296,6 +308,7 @@ ...@@ -296,6 +308,7 @@
top: 0; top: 0;
left: 0; left: 0;
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden;
box-shadow: $--table-fixed-box-shadow; box-shadow: $--table-fixed-box-shadow;
&::before { &::before {
...@@ -372,6 +385,7 @@ ...@@ -372,6 +385,7 @@
@include e((header, body, footer)) { @include e((header, body, footer)) {
table-layout: fixed; table-layout: fixed;
border-collapse: separate;
} }
@include e((header-wrapper, footer-wrapper)) { @include e((header-wrapper, footer-wrapper)) {
...@@ -384,36 +398,36 @@ ...@@ -384,36 +398,36 @@
} }
@include e(body-wrapper) { @include e(body-wrapper) {
overflow: auto; overflow: hidden;
position: relative; position: relative;
@include when(scroll-none) { @include when(scrolling-none) {
~ .el-table__fixed, ~ .el-table__fixed,
~ .el-table__fixed-right { ~ .el-table__fixed-right {
box-shadow: none; box-shadow: none;
} }
} }
@include when(scroll-left) { @include when(scrolling-left) {
~ .el-table__fixed { ~ .el-table__fixed {
box-shadow: none; box-shadow: none;
} }
} }
@include when(scroll-right) { @include when(scrolling-right) {
~ .el-table__fixed-right { ~ .el-table__fixed-right {
box-shadow: none; box-shadow: none;
} }
} }
.el-table--border { .el-table--border {
@include when(scroll-right) { @include when(scrolling-right) {
~ .el-table__fixed-right { ~ .el-table__fixed-right {
border-left: $--table-border; border-left: $--table-border;
} }
} }
@include when(scroll-left) { @include when(scrolling-left) {
~ .el-table__fixed { ~ .el-table__fixed {
border-right: $--table-border; border-right: $--table-border;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment