父页面调用子组件时,传入el-table中应当选中的值列表,但在使用toggleRowSelection时触发两次selection-change事件,无法正确显示。
可以看到打印了两次selection。
解决方法:el-table标签需要包含row-key、reserve-selection属性
<el-table @row-click="clickRow"
ref="refTable"
:reserve-selection="true"
:row-key="getRowKey"
:data="userList"
@selection-change="handleSelectionChange" height="260px"
>
<el-table-column type="selection" width="55"></el-table-column>
</el-table>
在script里使用nextTick
props.ids.forEach(id => {
nextTick(() => {
userList.value.forEach(row => {
if (row.userName == id.userName) {
proxy.$refs["refTable"].toggleRowSelection(row, true);
}
})
});
});