github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Table: remove some html DOM operations (#13643)

pull/14396/head
HarlanLuo 2019-01-02 15:54:18 +08:00 committed by Zhi Cun
parent 96b1577ec2
commit a54802c71a
3 changed files with 85 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
packages/table/src/table-body.js
View File

@ -1,5 +1,5 @@
import { getCell, getColumnByCell, getRowIdentity } from './util';
import { getStyle, hasClass, addClass, removeClass } from 'element-ui/src/utils/dom';
import { getStyle, hasClass } from 'element-ui/src/utils/dom';
import ElCheckbox from 'element-ui/packages/checkbox';
import ElTooltip from 'element-ui/packages/tooltip';
import debounce from 'throttle-debounce/debounce';
@ -103,42 +103,6 @@ export default {
);
},
watch: {
'store.states.hoverRow'(newVal, oldVal) {
if (!this.store.states.isComplex) return;
const el = this.$el;
if (!el) return;
const tr = el.querySelector('tbody').children;
const rows = [].filter.call(tr, row => hasClass(row, 'el-table__row'));
const oldRow = rows[oldVal];
const newRow = rows[newVal];
if (oldRow) {
removeClass(oldRow, 'hover-row');
}
if (newRow) {
addClass(newRow, 'hover-row');
}
},
'store.states.currentRow'(newVal, oldVal) {
if (!this.highlight) return;
const el = this.$el;
if (!el) return;
const data = this.store.states.data;
const tr = el.querySelector('tbody').children;
const rows = [].filter.call(tr, row => hasClass(row, 'el-table__row'));
const oldRow = rows[data.indexOf(oldVal)];
const newRow = rows[data.indexOf(newVal)];
if (oldRow) {
removeClass(oldRow, 'current-row');
} else {
[].forEach.call(rows, row => removeClass(row, 'current-row'));
}
if (newRow) {
addClass(newRow, 'current-row');
}
}
},
computed: {
table() {
return this.$parent;
@ -247,6 +211,10 @@ export default {
classes.push('current-row');
}
if (rowIndex === this.store.states.hoverRow) {
classes.push('hover-row');
}
if (this.stripe && rowIndex % 2 === 1) {
classes.push('el-table__row--striped');
}

12
packages/table/src/table-store.js
View File

@ -1,7 +1,6 @@
import Vue from 'vue';
import debounce from 'throttle-debounce/debounce';
import merge from 'element-ui/src/utils/merge';
import { hasClass, addClass, removeClass } from 'element-ui/src/utils/dom';
import { orderBy, getColumnById, getRowIdentity, getColumnByKey } from './util';
const sortData = (data, states) => {
@ -193,17 +192,6 @@ TableStore.prototype.mutations = {
changeSortCondition(states, options) {
states.data = sortData((states.filteredData || states._data || []), states);
const { $el, highlightCurrentRow } = this.table;
if ($el && highlightCurrentRow) {
const data = states.data;
const tr = $el.querySelector('tbody').children;
const rows = [].filter.call(tr, row => hasClass(row, 'el-table__row'));
const row = rows[data.indexOf(states.currentRow)];
[].forEach.call(rows, row => removeClass(row, 'current-row'));
addClass(row, 'current-row');
}
if (!options || !options.silent) {
this.table.$emit('sort-change', {
column: this.states.sortingColumn,

83
test/unit/specs/table.spec.js
View File

@ -1773,9 +1773,10 @@ describe('Table', () => {
<el-table-column prop="runtime" label="时长（分）" />
</el-table>
`,
created() {
this.testData = getTestData();
data() {
return {
testData: getTestData()
};
}
}, true);
setTimeout(_ => {
@ -1835,4 +1836,80 @@ describe('Table', () => {
}, DELAY);
}, DELAY);
});
it('keep highlight row when data change', done => {
const vm = createVue({
template: `
<el-table :data="testData" highlight-current-row row-key="release">
<el-table-column prop="name" label="片名" />
<el-table-column prop="release" label="发行日期" />
<el-table-column prop="director" label="导演" />
<el-table-column prop="runtime" label="时长（分）" sortable />
</el-table>
`,
data() {
return {
testData: getTestData()
};
}
}, true);
setTimeout(() => {
let rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
triggerEvent(rows[2], 'click', true, false);
setTimeout(() => {
expect(rows[2].classList.contains('current-row')).to.be.true;
const data = getTestData();
data.splice(0, 0, {
id: 8,
name: 'Monsters, Inc.',
release: '2018-02-01',
director: 'Peter Docter',
runtime: 92
});
data[2].name = 'Modified Name';
vm.testData = data;
setTimeout(() => {
rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
expect(rows[3].classList.contains('current-row')).to.be.true;
destroyVM(vm);
done();
}, DELAY);
}, DELAY);
}, DELAY);
});
it('keep highlight row after sort', done => {
const vm = createVue({
template: `
<el-table :data="testData" highlight-current-row row-key="release">
<el-table-column prop="name" label="片名" />
<el-table-column prop="release" label="发行日期" />
<el-table-column prop="director" label="导演" />
<el-table-column prop="runtime" label="时长（分）" sortable />
</el-table>
`,
data() {
return {
testData: getTestData()
};
}
}, true);
setTimeout(() => {
let rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
triggerEvent(rows[1], 'click', true, false);
setTimeout(() => {
expect(rows[1].classList.contains('current-row')).to.be.true;
const cells = vm.$el.querySelectorAll('.el-table__header-wrapper thead th > .cell');
triggerEvent(cells[3], 'click', true, false);
setTimeout(() => {
rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
expect(rows[3].classList.contains('current-row')).to.be.true;
destroyVM(vm);
done();
}, DELAY);
}, DELAY);
}, DELAY);
});
});