el-table的select回显问题

<template><Dialog v-model="dialogVisible" title="井权限" width="800"><el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="auto"><el-form-item :label="t('searchbar.roleNameLabel')"><el-tag>{{ formData.name }}</el-tag></el-form-item><el-form-item :label="t('searchbar.roleCodeLabel')"><el-tag>{{ formData.code }}</el-tag></el-form-item><el-form-item :label="t('action.permissionScope')"><el-select v-model="formData.dataScope"><el-option value="" /><el-inputv-model="queryParams.wellName"placeholder="搜索井名"clearablestyle="margin-left: 10px; width: 200px"/><el-button @click="handleQuery"><Icon class="mr-5px" icon="ep:search" />{{ t('action.search') }}</el-button><el-table:data="wellList"style="width: 100%"@selection-change="handleSelectionChange"@row-click="handleRowClick"ref="wellTable":row-key="getRowKeys":reserve-selection="true"><el-table-column type="selection" width="55" :reserve-selection="true" /><el-table-column prop="wellName" label="井名" width="150" /><el-table-column prop="builder" label="建设方" width="200" /><el-table-column prop="servePlace" label="服务地区" width="200" /><el-table-column prop="oilProduction" label="采油厂" /></el-table></el-select></el-form-item></el-form><template #footer><el-button :disabled="formLoading" type="primary" @click="submitForm">{{ t('action.confirm') }}</el-button><el-button @click="dialogVisible = false">{{ t('action.cancel') }}</el-button></template></Dialog>
</template><script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import { useI18n } from 'vue-i18n';
import * as RoleApi from '@/api/system/role';
import * as PermissionApi from '@/api/system/permission';
import { SiteApi } from '@/api/base/site';
import { SystemDataScopeEnum } from '@/utils/constants';defineOptions({ name: 'SystemRoleDataPermissionForm' });const { t } = useI18n();
const message = useMessage();const dialogVisible = ref(false);
const formLoading = ref(false);
const formData = reactive({id: 0,name: '',code: '',dataScope: '',dataScopeDeptIds: [],selection: undefined,
});const queryParams = reactive({reportIndex: 1,pageNo: 1,pageSize: 10,wellName: '',
});const formRef = ref();
const wellList = ref([]);
const wellTable = ref(null);
const selectedRows = ref<any[]>([]);/** 打开弹窗 */
const open = async (row: RoleApi.RoleVO) => {dialogVisible.value = true;resetForm();formData.id = row.id;formData.name = row.name;formData.code = row.code;formData.dataScope = '';const wellCodes = await PermissionApi.getRoleWellList(row.id);wellList.value = await SiteApi.getSiteList(queryParams.wellName);// 根据 wellCodes 筛选选中行selectedRows.value = wellList.value.filter((well) => wellCodes.includes(well.wellCode));// 设置 formData.dataScope 为选中行的 wellName，用逗号分隔formData.dataScope = selectedRows.value.map((row) => row.wellName).join(',');// 使用 nextTick 确保表格渲染完成后再设置选中状态await nextTick();selectedRows.value.forEach((row) => {wellTable.value.toggleRowSelection(row, true);});
};defineExpose({ open });/** 提交表单 */
const emit = defineEmits(['success']);/** 搜索按钮操作 */
const handleQuery = async () => {wellList.value = await SiteApi.getSiteList(queryParams.wellName);
};/** 确定按钮操作 */
const submitForm = async () => {formLoading.value = true;try {const data = {roleId: formData.id,dataScope: 1,selection: formData.selection,dataScopeDeptIds:formData.dataScope !== SystemDataScopeEnum.DEPT_CUSTOM ? [] : treeRef.value.getCheckedKeys(false),};await PermissionApi.assignRoleWellScope(data);message.success(t('common.updateSuccess'));dialogVisible.value = false;emit('success');} finally {formLoading.value = false;}
};/** 选中操作 */
const handleSelectionChange = (selection) => {formData.selection = selection;formData.dataScope = selection.map((i) => i.wellName).join(',');selectedRows.value = selection;
};/** 行点击事件 */
const handleRowClick = (row) => {const index = selectedRows.value.findIndex((item) => item.wellCode === row.wellCode);if (index === -1) {selectedRows.value.push(row);} else {selectedRows.value.splice(index, 1);}
};/** 获取唯一键 */
const getRowKeys = (row) => {return row.wellCode;
};/** 重置表单 */
const resetForm = () => {formData.id = 0;formData.name = '';formData.code = '';formData.dataScope = '';formData.dataScopeDeptIds = [];formRef.value?.resetFields();
};
</script>

getRowKeys为关键