由于是弹窗,是父子组件,之前使用watch监听但是无法初始化已选择
要使用nextTick()方法+element表格中的toggleRowSelection()方法
记得在table标签中添加ref
<el-table v-loading="loading" border ref="multipleTable" @row-click="handleSelectionChange">
mounted(){
this.getList();
},
/** 查询列表 */
getList() {
this.loading = true;
listPersonnelEmployee(this.queryParams).then((response) => {
this.personnelEmployeeList = response.rows;
this.total = response.total;
this.loading = false;
// 初始化已选择的下拉
this.initAlreadySelectItem();
});
},
// 初始化已选中的信息
initAlreadySelectItem() {
// 清理选中的行
this.$refs.multipleTable.clearSelection();
this.data.forEach(item => {
// 必须要在this.$nextTick函数中调用this.$refs.multipleTable.toggleRowSelection,才会生效选中
this.$nextTick(() => {
// this.List : table对应的数据,一般是列表接口获取到的数据的保存字段
this.List .find(e => {
if (e.id === item.employeeId) {
// this.$refs.multipleTable:选中当前表格,multipleTable 需要在表格的参数中添加 ref="multipleTable"
// 调用选中行方法,使用table数据对应的行数据
this.$refs.multipleTable.toggleRowSelection(e, true);
}
})
})
});
},