fix check bug

Author: lycHub

package.json

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

src/components/VirtualTree/index.tsx

@@ -57,7 +57,7 @@ export default defineComponent({
     const service = new TreeService();
 
     watch(() => props.source, newVal => {
-      flatList.value = service.flattenTree(newVal, props.defaultSelectedKey, props.defaultCheckedKeys, props.defaultExpandedKeys, props.defaultDisabledKeys);
+      flatList.value = service.flattenTree(newVal, props.defaultSelectedKey, props.defaultCheckedKeys, props.defaultExpandedKeys, props.defaultDisabledKeys, props.checkStrictly);
       // console.log('flatList :>> ', flatList.value);
     }, {immediate: true});
 
@@ -127,11 +127,12 @@ export default defineComponent({
       const trueChildren = children.length ? children : cloneDeep(node.children)!;
       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;
-      if (service.checkedNodes.value.isSelected(node.nodeKey)) {
+      const allCheckedKeys = service.checkedNodes.value.selected.concat(service.defaultCheckedKeys);
+      // !props.checkStrictly && 
+      if (!props.checkStrictly && service.checkedNodes.value.isSelected(node.nodeKey)) {
         allCheckedKeys.push(...trueChildren.map(item => item.nodeKey));
       }
-      node.children = service.flattenTree(trueChildren, selectedKey, uniq(allCheckedKeys), allExpandedKeys, props.defaultDisabledKeys, node);
+      node.children = service.flattenTree(trueChildren, selectedKey, uniq(allCheckedKeys), allExpandedKeys, props.defaultDisabledKeys, props.checkStrictly, node);
       const targetIndex = flatList.value.findIndex(item => item.nodeKey === node.nodeKey);
       flatList.value.splice(targetIndex + 1, 0, ...(node.children as Required<TreeNodeOptions>[]));
     }
@@ -193,8 +194,9 @@ export default defineComponent({
         return service.selectedNodes.value.selected[0];
       },
       getCheckedNodes: (): TreeNodeOptions[] => {
-        // return flatList.value.filter(item => service.checkedNodes.value.selected.includes(item.nodeKey));
-        return service.getCheckedNodes(props.source, service.checkedNodes.value.selected);
+        return props.loadData
+          ? flatList.value.filter(item => service.checkedNodes.value.selected.includes(item.nodeKey))
+          : service.getCheckedNodes(props.source, service.checkedNodes.value.selected, props.checkStrictly);
       },
       getHalfCheckedNodes: (): TreeNodeOptions[] => {
         return nodeRefs.value.filter(item => item.halfChecked()).map(item => item.rawNode);

src/components/VirtualTree/service.ts

@@ -13,6 +13,7 @@ class TreeService {
   defaultExpandedKeys: NodeKey[] = [];
   defaultDisabledKeys: NodeKey[] = [];
 
+  // flatSourceTree: TreeNodeOptions[] = [];
   flatTree: Required<TreeNodeOptions>[] = [];
 
   constructor() {}
@@ -23,14 +24,14 @@ class TreeService {
     defaultCheckedKeys: NodeKey[],
     defaultExpandedKeys: NodeKey[],
     defaultDisabledKeys: NodeKey[],
+    checkStrictly = false,
     parent: TypeWithNull<Required<TreeNodeOptions>> = null
   ): Required<TreeNodeOptions>[] {
     this.defaultSelectedKey = defaultSelectedKey;
     this.defaultCheckedKeys = defaultCheckedKeys;
     this.defaultExpandedKeys = defaultExpandedKeys;
     this.defaultDisabledKeys = defaultDisabledKeys;
     const result: Required<TreeNodeOptions>[] = [];
-
     const recursion = (list: TreeNodeOptions[], parent: TypeWithNull<Required<TreeNodeOptions>> = null) => {
       return list.map(item => {
         const childrenSize = item.children?.length || 0;
@@ -45,7 +46,7 @@ class TreeService {
         let goon = true;
         if (parent) {
           if (defaultExpandedKeys.includes(parent.nodeKey)) {
-            if (defaultCheckedKeys.includes(parent.nodeKey)) { // 默认展开并选中了
+            if (!checkStrictly && defaultCheckedKeys.includes(parent.nodeKey)) { // 默认展开并选中了
               defaultCheckedKeys.push(flatNode.nodeKey);
               this.checkedNodes.value.select(flatNode.nodeKey);
             }
@@ -70,7 +71,7 @@ class TreeService {
         if (defaultCheckedKeys.includes(flatNode.nodeKey)) {
           this.checkedNodes.value.select(flatNode.nodeKey);
         }
-
+        
         if (goon && childrenSize) {
           flatNode.children = recursion(flatNode.children, flatNode);
         }
@@ -151,24 +152,26 @@ class TreeService {
 
   getCheckedNodes(
     source: TreeNodeOptions[],
-    checkedKeys: NodeKey[]
+    checkedKeys: NodeKey[],
+    checkStrictly = false
   ): TreeNodeOptions[] {
     const result: TreeNodeOptions[] = [];
     const checkedSize = checkedKeys.length;
     // console.log('checkedSize :>> ', checkedSize);
     let count = 0;
+    // console.log('flatSourceTree :>> ', this.flatSourceTree);
     const recursion = (list: TreeNodeOptions[], parent: TypeWithNull<TreeNodeOptions> = null) => {
       for (const item of list) {
         let goon = true;
         if (parent) {
-          if (result.map(rItem => rItem.nodeKey).includes(parent.nodeKey)) {
+          if (checkedKeys.includes(item.nodeKey)) { // 本身就在checkedKeys里的让它走正常流程
+            count++;
             result.push(item);
           } else {
-            if (checkedKeys.includes(item.nodeKey)) {
-              count++;
-              result.push(item);
+            if (!checkStrictly && result.map(rItem => rItem.nodeKey).includes(parent.nodeKey)) {
+              result.push(item); // 爹已选中 但自身不在checkedKeys里的让它跟爹走
             } else {
-              if (count >= checkedSize) {
+              if (count >= checkedSize) { // 爹和自己都没选中，如果checkedKeys里的内容找齐了，结束
                 goon = false;
               }
             }

src/doc/AsyncDataDemo.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="demo">
     <a-button @click="checkedNodes">获取勾选节点</a-button>
-    <vir-tree ref="virTree" :source="list" show-checkbox :loadData="loadData" />
+    <vir-tree
+      ref="virTree"
+      :source="list"
+      show-checkbox
+      :loadData="loadData"
+       :default-checked-keys="defaultCheckedKeys"
+    />
   </div>
 </template>
 
@@ -30,6 +36,7 @@
     setup(prop, {emit}) {
       const list = ref<TreeNodeOptions[]>([]);
       const virTree = ref<TreeInstance | null>(null);
+      const defaultCheckedKeys = ref([]);
       onMounted(() => {
         list.value = recursion();
       });
@@ -57,6 +64,7 @@
         list,
         virTree,
         loadData,
+        defaultCheckedKeys,
         checkedNodes
       }
     }

src/doc/CheckboxDemo.vue

@@ -3,12 +3,23 @@
     <section>
       <h5>默认父子节点联动</h5>
       <a-button @click="halfNodes">获取半选节点</a-button>
-      <a-button @click="checkedNodes">获取勾选节点</a-button>
+      <!-- <a-button @click="checkedNodes">获取勾选节点</a-button> -->
+      <!--  :default-expanded-keys="defaultExpandedKeys" -->
       <vir-tree
         ref="virTreeOne"
         show-checkbox
         :source="list"
-        :default-expanded-keys="defaultExpandedKeys"
+        :default-checked-keys="defaultCheckedKeys"
+      />
+    </section>
+    <section>
+      <h5>父子节点不联动</h5>
+      <a-button @click="checkedNodes">获取勾选节点</a-button>
+      <vir-tree
+        ref="virTreeTwo"
+        show-checkbox
+        check-strictly
+        :source="list"
         :default-checked-keys="defaultCheckedKeys"
       />
     </section>
@@ -28,13 +39,13 @@
         nodeKey,
         name: nodeKey,
         children: [],
-        // hasChildren: true
+        hasChildren: true
       };
 
       if (level > 0) {
         treeNode.children = recursion(nodeKey, level - 1);
       } else {
-        // treeNode.hasChildren = false;
+        treeNode.hasChildren = false;
       }
 
       list.push(treeNode);
@@ -48,17 +59,18 @@
       const list = ref<TreeNodeOptions[]>([]);
       const virTreeOne = ref<TreeInstance | null>(null);
       const virTreeTwo = ref<TreeInstance | null>(null);
-      const defaultExpandedKeys = ref(['0-3']);
+      const defaultExpandedKeys = ref(['0-2']);
       const defaultCheckedKeys = ref(['0-0-0', '0-2']);
 
+
       onMounted(() => {
         list.value = recursion();
       });
       const halfNodes = () => {
         getHalfCheckNodes(virTreeOne.value!);
       }
       const checkedNodes = () => {
-        getCheckNodes(virTreeOne.value!);
+        getCheckNodes(virTreeTwo.value!);
       }
       return {
         list,

src/doc/index.vue

@@ -38,6 +38,29 @@
     <section class="sec mid">
       <a-typography-title :level="3">代码演示</a-typography-title>
       <a-row :gutter="16" class="demo-boxes">
+        <a-col :span="12">
+          <demo-box
+            id="base-demo"
+            title="基本用法"
+            desc="展开、选中、禁用的基本功能"
+            code-type="base">
+            <base-demo />
+          </demo-box>
+          <demo-box
+            id="async-dada-demo"
+            title="异步加载数据"
+            desc="点击展开节点，动态加载数据。"
+            code-type="asyncData">
+            <async-data-demo />
+          </demo-box>
+          <demo-box
+            id="custom-icon-demo"
+            title="自定义图标"
+            desc="自定义展开、收起图标"
+            code-type="customIcon">
+            <custom-icon-demo />
+          </demo-box>
+        </a-col>
         <a-col :span="12">
           <demo-box
             id="checkbox-demo"
@@ -46,6 +69,20 @@
             code-type="checkbox">
             <checkbox-demo />
           </demo-box>
+          <demo-box
+            id="custom-node-demo"
+            title="自定义渲染节点"
+            desc="绑定render函数自定义节点，参数data为当前node数据。注意：如果改变了默认的高度(size), 需要传入size属性"
+            code-type="customNode">
+            <custom-node-demo />
+          </demo-box>
+          <demo-box
+            id="search-node-demo"
+            title="搜索树"
+            desc="虽然组件内部没有直接提供，但可以配合render自行实现"
+            code-type="searchNode">
+            <search-node-demo />
+          </demo-box>
         </a-col>
       </a-row>
     </section>
@@ -116,9 +153,6 @@
       h3 {
         font-size: $font-size-huge;
       }
-      .demo-boxes {
-
-      }
     }
   }