Table: fix setCurrentRow unable to clear highlight row (#16879)

This commit is contained in:
hetech 2019-08-29 11:29:02 +08:00 committed by GitHub
parent f7e3103513
commit eddf85271e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 64 additions and 22 deletions

View File

@ -35,34 +35,41 @@ export default {
},
updateCurrentRow(currentRow) {
const { states, table } = this;
const oldCurrentRow = states.currentRow;
if (currentRow && currentRow !== oldCurrentRow) {
states.currentRow = currentRow;
table.$emit('current-change', currentRow, oldCurrentRow);
return;
}
if (!currentRow && oldCurrentRow) {
states.currentRow = null;
table.$emit('current-change', null, oldCurrentRow);
}
},
updateCurrentRowData() {
const { states, table } = this;
const { rowKey, _currentRowKey } = states;
// data 为 null 时,结构时的默认值会被忽略
const data = states.data || [];
const oldCurrentRow = states.currentRow;
if (currentRow) {
this.restoreCurrentRowKey();
states.currentRow = currentRow;
if (oldCurrentRow !== currentRow) {
this.table.$emit('current-change', currentRow, oldCurrentRow);
}
} else {
// 当 currentRow 不在 data 中时尝试更新数据
if (data.indexOf(oldCurrentRow) === -1 && oldCurrentRow) {
this.restoreCurrentRowKey();
if (rowKey) {
const currentRowKey = getRowIdentity(oldCurrentRow, rowKey);
this.setCurrentRowByKey(currentRowKey);
} else {
states.currentRow = null;
}
if (states.currentRow !== oldCurrentRow) {
if (states.currentRow === null) {
table.$emit('current-change', null, oldCurrentRow);
}
} else if (_currentRowKey) {
// 把初始时下设置的 rowKey 转化成 rowData
this.setCurrentRowByKey(_currentRowKey);
}
this.restoreCurrentRowKey();
}
}
}

View File

@ -10,7 +10,7 @@ Watcher.prototype.mutations = {
this.execQuery();
// 数据变化,更新部分数据。
// 没有使用 computed而是手动更新部分数据 https://github.com/vuejs/vue/issues/6660#issuecomment-331417140
this.updateCurrentRow();
this.updateCurrentRowData();
this.updateExpandRows();
if (states.reserveSelection) {
this.assertRowKey();

View File

@ -1843,6 +1843,41 @@ describe('Table', () => {
assertSortIconCount(vm.$el, 'sorting icon is not one after sort same column');
destroyVM(vm);
});
it('setCurrentRow', async() => {
const vm = createVue({
template: `
<div>
<el-table ref="table" :data="testData" highlight-current-row>
<el-table-column prop="name" sortable />
<el-table-column prop="release" sortable />
<el-table-column prop="director" sortable />
<el-table-column prop="runtime" sortable />
</el-table>
<button class="clear" @click="clear">clear</button>
</div>
`,
data() {
return { testData: getTestData() };
},
methods: {
clear() {
this.$refs.table.setCurrentRow();
}
}
});
vm.$refs.table.setCurrentRow(vm.testData[1]);
await waitImmediate();
const secondRow = vm.$el.querySelectorAll('.el-table__row')[1];
expect(secondRow.classList.contains('current-row')).to.true;
vm.$el.querySelector('.clear').click();
await waitImmediate();
expect(secondRow.classList.contains('current-row')).to.false;
destroyVM(vm);
});
});
it('hover', async() => {