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-input
            v-model="queryParams.wellName"
            placeholder="搜索井名"
            clearable
            style="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为关键