mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-12-03 12:48:45 +08:00
Table: fix setCurrentRow unable to clear highlight row (#16879)
This commit is contained in:
parent
f7e3103513
commit
eddf85271e
@ -35,34 +35,41 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
updateCurrentRow(currentRow) {
|
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 { states, table } = this;
|
||||||
const { rowKey, _currentRowKey } = states;
|
const { rowKey, _currentRowKey } = states;
|
||||||
// data 为 null 时,结构时的默认值会被忽略
|
// data 为 null 时,结构时的默认值会被忽略
|
||||||
const data = states.data || [];
|
const data = states.data || [];
|
||||||
const oldCurrentRow = states.currentRow;
|
const oldCurrentRow = states.currentRow;
|
||||||
|
|
||||||
if (currentRow) {
|
// 当 currentRow 不在 data 中时尝试更新数据
|
||||||
|
if (data.indexOf(oldCurrentRow) === -1 && oldCurrentRow) {
|
||||||
|
if (rowKey) {
|
||||||
|
const currentRowKey = getRowIdentity(oldCurrentRow, rowKey);
|
||||||
|
this.setCurrentRowByKey(currentRowKey);
|
||||||
|
} else {
|
||||||
|
states.currentRow = null;
|
||||||
|
}
|
||||||
|
if (states.currentRow === null) {
|
||||||
|
table.$emit('current-change', null, oldCurrentRow);
|
||||||
|
}
|
||||||
|
} else if (_currentRowKey) {
|
||||||
|
// 把初始时下设置的 rowKey 转化成 rowData
|
||||||
|
this.setCurrentRowByKey(_currentRowKey);
|
||||||
this.restoreCurrentRowKey();
|
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) {
|
|
||||||
table.$emit('current-change', null, oldCurrentRow);
|
|
||||||
}
|
|
||||||
} else if (_currentRowKey) {
|
|
||||||
this.setCurrentRowByKey(_currentRowKey);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -10,7 +10,7 @@ Watcher.prototype.mutations = {
|
|||||||
this.execQuery();
|
this.execQuery();
|
||||||
// 数据变化,更新部分数据。
|
// 数据变化,更新部分数据。
|
||||||
// 没有使用 computed,而是手动更新部分数据 https://github.com/vuejs/vue/issues/6660#issuecomment-331417140
|
// 没有使用 computed,而是手动更新部分数据 https://github.com/vuejs/vue/issues/6660#issuecomment-331417140
|
||||||
this.updateCurrentRow();
|
this.updateCurrentRowData();
|
||||||
this.updateExpandRows();
|
this.updateExpandRows();
|
||||||
if (states.reserveSelection) {
|
if (states.reserveSelection) {
|
||||||
this.assertRowKey();
|
this.assertRowKey();
|
||||||
|
@ -1843,6 +1843,41 @@ describe('Table', () => {
|
|||||||
assertSortIconCount(vm.$el, 'sorting icon is not one after sort same column');
|
assertSortIconCount(vm.$el, 'sorting icon is not one after sort same column');
|
||||||
destroyVM(vm);
|
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() => {
|
it('hover', async() => {
|
||||||
|
Loading…
Reference in New Issue
Block a user