fix half checked node

lycHub · Mar 5, 2022 · 896fee0 · 896fee0
1 parent aae20c4
commit 896fee0
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 43 deletions.
diff --git a/package.json b/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",

diff --git a/src/components/VirtualTree/index.tsx b/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>[]));
  }

diff --git a/src/components/VirtualTree/service.ts b/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;
  }