fix(TreeSelect): fix v-model failure when lazy load (Tencent#4639)

ylunwang · Oct 28, 2024 · cc5f470 · cc5f470
1 parent f66dbf5
commit cc5f470
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 34 deletions.
diff --git a/src/tree-select/tree-select.tsx b/src/tree-select/tree-select.tsx
@@ -196,7 +196,7 @@ export default defineComponent({
     ) => {
       let current: TreeSelectValue = valueParam;
       if (isObjectValue.value) {
-        current = valueParam.map((nodeValue) => getTreeNode(props.data, nodeValue));
+        current = valueParam.map(getNodeItem);
       }
       change(current, context.node, 'check');
     };
@@ -219,7 +219,7 @@ export default defineComponent({
       let current: TreeSelectValue = valueParam;
       if (isObjectValue.value) {
         const nodeValue = isEmpty(valueParam) ? '' : valueParam[0];
-        current = getTreeNode(props.data, nodeValue);
+        current = getNodeItem(nodeValue);
       } else {
         current = isEmpty(valueParam) ? '' : valueParam[0];
       }
@@ -281,48 +281,49 @@ export default defineComponent({
 
     const getSingleNodeInfo = () => {
       const nodeValue = isObjectValue.value ? (treeSelectValue.value as INodeOptions).value : treeSelectValue.value;
-      if (treeRef.value && (props.treeProps as TreeProps)?.load) {
-        if (!isEmpty(props.data)) {
-          const node = treeRef.value.getItem(nodeValue);
-          if (node) {
-            return { ...node.data, label: node.data[realLabel.value], value: node.data[realValue.value] };
-          }
-        }
-        return { label: nodeValue, value: nodeValue };
-      }
-      const node = getTreeNode(props.data, nodeValue);
-      if (!node) {
-        return { label: nodeValue, value: nodeValue };
-      }
-      return node;
+      return getNodeItem(nodeValue);
     };
 
     const getMultipleNodeInfo = () => {
       return (treeSelectValue.value as Array<TreeSelectValue>).map((value) => {
         const nodeValue = isObjectValue.value ? (value as INodeOptions).value : value;
-        if (treeRef.value && (props.treeProps as TreeProps)?.load) {
-          if (!isEmpty(props.data)) {
-            const node = treeRef.value.getItem(nodeValue);
-            if (node) {
-              return { ...node.data, label: node.data[realLabel.value], value: node.data[realValue.value] };
-            }
-          }
-          return { label: nodeValue, value: nodeValue };
-        }
-        const node = getTreeNode(props.data, nodeValue);
-        if (!node) {
-          return { label: nodeValue, value: nodeValue };
+        return getNodeItem(nodeValue);
+      });
+    };
+
+    const getNodeItem = (targetValue: TreeSelectValue) => {
+      if (treeRef.value) {
+        const node = treeRef.value.getItem(targetValue);
+        if (node) {
+          return {
+            ...node.data,
+            label: node.data[realLabel.value],
+            value: node.data[realValue.value],
+          };
         }
+      }
+      const node = getTreeNode(props.data, targetValue);
+      if (node) {
         return node;
-      });
+      }
+      return {
+        label: targetValue,
+        value: targetValue,
+      };
     };
+
     const getTreeNode = (data: Array<TreeOptionData>, targetValue: TreeSelectValue): TreeSelectValue | null => {
       for (let i = 0, len = data.length; i < len; i++) {
-        if (data[i][realValue.value] === targetValue) {
-          return { ...data[i], label: data[i][realLabel.value], value: data[i][realValue.value] };
+        const item = data[i];
+        if (item[realValue.value] === targetValue) {
+          return {
+            ...item,
+            label: item[realLabel.value],
+            value: item[realValue.value],
+          };
         }
-        if (data[i]?.[realChildren.value]) {
-          const result = getTreeNode(data[i]?.[realChildren.value], targetValue);
+        if (item?.[realChildren.value]) {
+          const result = getTreeNode(item?.[realChildren.value], targetValue);
           if (!isNil(result)) {
             return result;
           }

diff --git a/src/tree/hooks/useTreeAction.ts b/src/tree/hooks/useTreeAction.ts
@@ -93,8 +93,10 @@ export default function useTreeAction(state: TypeTreeState) {
     }
     const checked = node.setChecked(isChecked, {
       isAction: evtCtx.trigger === 'node-click',
-      directly: true,
     });
+    if (evtCtx.trigger !== 'setItem') {
+      store.replaceChecked(checked);
+    }
     setTValue(checked, evtCtx);
     // 这是针对受控执行的操作，如果 props.value 未变更，则执行还原操作
     if (evtCtx.trigger !== 'setItem') {