fix half checked node

Author: lycHub

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-virtual-tree",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "description": "Tree component for large amount of data, base on Vue3",
   "scripts": {
     "serve": "vue-cli-service serve --port 4200",

src/components/VirtualTree/index.tsx

@@ -1,4 +1,4 @@
-import {defineComponent, watch, ref, shallowRef, PropType, h, watchEffect} from 'vue';
+import {defineComponent, watch, ref, shallowRef, PropType, h} from 'vue';
 import { cloneDeep } from 'lodash-es';
 import {NodeKey, TreeNodeInstance, TreeNodeOptions, TypeWithNull, TypeWithUndefined} from "./types";
 
@@ -63,6 +63,7 @@ export default defineComponent({
     watch(() => props.defaultExpandedKeys, newVal => {
       service.resetDefaultExpandedKeys(newVal);
       service.expandedKeys.value.clear();
+      service.expandedKeys.value.select(...newVal);
       flatList.value = service.flattenTree(props.source, props.defaultSelectedKey, props.defaultCheckedKeys, props.defaultExpandedKeys, props.defaultDisabledKeys);
     });
 
@@ -82,7 +83,6 @@ export default defineComponent({
     });
 
     watch(() => props.defaultCheckedKeys, newVal => {
-      
       const targets = flatList.value.filter(item => newVal.includes(item.nodeKey));
       // console.log('watch defaultCheckedKeys:>> ', targets);
       service.resetDefaultCheckedKeys(newVal);
@@ -115,7 +115,6 @@ export default defineComponent({
       if (!checked) {
         service.removeDefaultCheckedKeys(node);
       }
-
       if (!props.checkStrictly) {
         service.updateDownwards(checked, node);
         service.updateUpwards(node, flatList.value);
@@ -125,33 +124,14 @@ export default defineComponent({
 
     const expandNode = (node: Required<TreeNodeOptions>, children: TreeNodeOptions[] = []) => {
       const trueChildren = children.length ? children : cloneDeep(node.children)!;
-      node.children = (trueChildren as Required<TreeNodeOptions>[]).map(item => {
-        item.loading = false;
-        item.level = item.level || node.level! + 1;
-        item.children = item.children || [];
-        item.hasChildren = item.hasChildren || false;
-        item.parentKey = node.nodeKey || null;
-
-        if (props.defaultDisabledKeys.includes(item.nodeKey)) {
-          service.disabledKeys.value.select(item.nodeKey);
-        }
-
-        const selectedKey = service.selectedNodes.value.selected[0]?.nodeKey || service.defaultSelectedKey;
-        if (selectedKey === item.nodeKey) {
-          service.selectedNodes.value.select(item as Required<TreeNodeOptions>);
-        }
-
-        const allCheckedKeys = service.checkedNodes.value.selected.map(item => item.nodeKey).concat(service.defaultCheckedKeys);
-        if (allCheckedKeys.includes(item.nodeKey) || (!props.checkStrictly && service.checkedNodes.value.isSelected(node))) {
-          service.checkedNodes.value.select(item as Required<TreeNodeOptions>);
-        }
-
-        const allExpandedKeys = service.expandedKeys.value.selected.concat(service.defaultExpandedKeys);
-        if (allExpandedKeys.includes(item.nodeKey)) {
-          service.expandedKeys.value.select(item.nodeKey);
-        }
-        return item;
-      });
+      const selectedKey = service.selectedNodes.value.selected[0]?.nodeKey || service.defaultSelectedKey;
+      const allExpandedKeys = service.expandedKeys.value.selected.concat(service.defaultExpandedKeys);
+      const allCheckedKeys = service.checkedNodes.value.selected.map(item => item.nodeKey).concat(service.defaultCheckedKeys);
+      if (service.checkedNodes.value.isSelected(node)) {
+        allCheckedKeys.push(...trueChildren.map(item => item.nodeKey));
+      }
+      // console.log('allCheckedKeys', allCheckedKeys);
+      node.children = service.flattenTree(trueChildren, selectedKey, allCheckedKeys, allExpandedKeys, props.defaultDisabledKeys, node);
       const targetIndex = flatList.value.findIndex(item => item.nodeKey === node.nodeKey);
       flatList.value.splice(targetIndex + 1, 0, ...(node.children as Required<TreeNodeOptions>[]));
     }

src/components/VirtualTree/service.ts

@@ -23,6 +23,7 @@ class TreeService {
     defaultCheckedKeys: NodeKey[],
     defaultExpandedKeys: NodeKey[],
     defaultDisabledKeys: NodeKey[],
+    parent: Required<TreeNodeOptions> | null = null
   ): Required<TreeNodeOptions>[] {
 
     this.defaultSelectedKey = defaultSelectedKey;
@@ -34,33 +35,47 @@ class TreeService {
       return list.map(item => {
         const flatNode: Required<TreeNodeOptions> = {
           ...item,
-          level,
+          level: item.level || level + 1,
           loading: false,
           hasChildren: item.hasChildren || false,
           parentKey: parent?.nodeKey || null,
           children: item.children || []
         };
-        result.push(flatNode);
-        if (defaultDisabledKeys.includes(item.nodeKey)) {
-          this.disabledKeys.value.select(item.nodeKey);
+        let goon = true;
+        if (parent) {
+          if (defaultExpandedKeys.includes(parent.nodeKey)) {
+            this.expandedKeys.value.select(parent.nodeKey);
+            if (defaultCheckedKeys.includes(parent.nodeKey)) {
+              defaultCheckedKeys.push(flatNode.nodeKey);
+            }
+            result.push(flatNode);
+          } else {
+            goon = false;
+          }
+        } else {
+          result.push(flatNode);
         }
-        if (defaultSelectedKey === item.nodeKey) {
-          this.selectedNodes.value.select(flatNode);
+        if (goon) {
+          if (defaultDisabledKeys.includes(item.nodeKey)) {
+            this.disabledKeys.value.select(item.nodeKey);
+          }
+          if (defaultSelectedKey === item.nodeKey) {
+            this.selectedNodes.value.select(flatNode);
+          }
+          if (item.children?.length) {
+            flatNode.children = recursion(item.children, level + 1, flatNode);
+          }
         }
 
-        // console.log('defaultCheckedKeys :>> ', item.nodeKey, defaultDisabledKeys.includes(item.nodeKey));
+        // || (parent && defaultCheckedKeys.includes(parent.nodeKey))
         if (defaultCheckedKeys.includes(item.nodeKey)) {
           this.checkedNodes.value.select(flatNode);
         }
-        if (defaultExpandedKeys.includes(item.nodeKey) && item.children?.length) {
-          this.expandedKeys.value.select(item.nodeKey);
-          flatNode.children = recursion(item.children, level + 1, flatNode);
-        }
         return flatNode;
       });
     }
 
-    recursion(source);
+    recursion(source, parent?.level);
     return result;
   }