Kaynağa Gözat

fix: 修复设置default-expanded-level后无法check更低层级节点 logic and tree value updates (#7155)

假设缺省展开2级,当check 3级节点时,会触发effectWatch重新收缩到2级,并丢失check操作check操作andling.
Leo Caan (陈栋) 4 ay önce
ebeveyn
işleme
4f1eeb7da5

+ 25 - 15
packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue

@@ -65,16 +65,24 @@ const modelValue = defineModel<Arrayable<number | string>>();
 const expanded = ref<Array<number | string>>(props.defaultExpandedKeys ?? []);
 const expanded = ref<Array<number | string>>(props.defaultExpandedKeys ?? []);
 
 
 const treeValue = ref();
 const treeValue = ref();
+let lastTreeData: any = null;
 
 
 onMounted(() => {
 onMounted(() => {
   watchEffect(() => {
   watchEffect(() => {
     flattenData.value = flatten(props.treeData, props.childrenField);
     flattenData.value = flatten(props.treeData, props.childrenField);
     updateTreeValue();
     updateTreeValue();
-    if (
-      props.defaultExpandedLevel !== undefined &&
-      props.defaultExpandedLevel > 0
-    )
-      expandToLevel(props.defaultExpandedLevel);
+
+    // 只在 treeData 变化时执行展开
+    const currentTreeData = JSON.stringify(props.treeData);
+    if (lastTreeData !== currentTreeData) {
+      lastTreeData = currentTreeData;
+      if (
+        props.defaultExpandedLevel !== undefined &&
+        props.defaultExpandedLevel > 0
+      ) {
+        expandToLevel(props.defaultExpandedLevel);
+      }
+    }
   });
   });
 });
 });
 
 
@@ -87,9 +95,11 @@ function getItemByValue(value: number | string) {
 function updateTreeValue() {
 function updateTreeValue() {
   const val = modelValue.value;
   const val = modelValue.value;
   if (val === undefined) {
   if (val === undefined) {
-    treeValue.value = undefined;
-  } else {
-    if (Array.isArray(val)) {
+    treeValue.value = props.multiple ? [] : undefined;
+  } else if (Array.isArray(val)) {
+    if (val.length === 0) {
+      treeValue.value = [];
+    } else {
       const filteredValues = val.filter((v) => {
       const filteredValues = val.filter((v) => {
         const item = getItemByValue(v);
         const item = getItemByValue(v);
         return item && !get(item, props.disabledField);
         return item && !get(item, props.disabledField);
@@ -99,14 +109,14 @@ function updateTreeValue() {
       if (filteredValues.length !== val.length) {
       if (filteredValues.length !== val.length) {
         modelValue.value = filteredValues;
         modelValue.value = filteredValues;
       }
       }
+    }
+  } else {
+    const item = getItemByValue(val);
+    if (item && !get(item, props.disabledField)) {
+      treeValue.value = item;
     } else {
     } else {
-      const item = getItemByValue(val);
-      if (item && !get(item, props.disabledField)) {
-        treeValue.value = item;
-      } else {
-        treeValue.value = undefined;
-        modelValue.value = undefined;
-      }
+      treeValue.value = props.multiple ? [] : undefined;
+      modelValue.value = props.multiple ? [] : undefined;
     }
     }
   }
   }
 }
 }