lcw

src/components/ChooseList/ChooseMarks/index.vue

@@ -173,14 +173,25 @@ const getListData = () => {
     });
 };
 
-//列表回显
+//列表回显 - 优化版，确保已选择数据正确回显
 function multipleUser() {
+  if (!multipleUserRef.value || !tableData.value || tableData.value.length === 0) {
+    return;
+  }
+
+  // 先清除所有选中状态
   tableData.value.forEach((item) => {
     multipleUserRef.value.toggleRowSelection(item, false);
-    if (props.roleIds.some((id) => id == item.id)) {
-      multipleUserRef.value.toggleRowSelection(item, true);
-    }
   });
+
+  // 再根据roleIds重新设置选中状态
+  if (props.roleIds && Array.isArray(props.roleIds) && props.roleIds.length > 0) {
+    tableData.value.forEach((item) => {
+      if (props.roleIds.some((id) => id == item.id)) {
+        multipleUserRef.value.toggleRowSelection(item, true);
+      }
+    });
+  }
 }
 
 const handleFilter = () => {
@@ -200,13 +211,28 @@ const handleSelectionChange = (val) => {
   }
 };
 
+// 监听弹窗打开状态，打开时重新加载数据
 watch(
   () => props.modelValue,
   (val) => {
-    if (val) handleFilter();
+    if (val) {
+      handleFilter();
+    }
   },
   { immediate: true }
 );
+
+// 监听roleIds变化，确保数据回显正确
+watch(
+  () => props.roleIds,
+  (newRoleIds) => {
+    // 使用setTimeout确保在表格数据加载完成后再进行选择
+    setTimeout(() => {
+      multipleUser();
+    }, 100);
+  },
+  { deep: true }
+);
 </script>
 
 <style lang="scss" scoped>