Skip to content

Commit 3814d27

Browse files
author
yichao.li.ext
committed
check bug
1 parent 896fee0 commit 3814d27

File tree

4 files changed

+23
-24
lines changed

4 files changed

+23
-24
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-virtual-tree",
3-
"version": "4.0.3",
3+
"version": "4.0.4",
44
"description": "Tree component for large amount of data, base on Vue3",
55
"scripts": {
66
"serve": "vue-cli-service serve --port 4200",

‎src/components/VirtualTree/index.tsx

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {defineComponent, watch, ref, shallowRef, PropType, h} from 'vue';
2-
import { cloneDeep } from 'lodash-es';
2+
import { cloneDeep, uniq } from 'lodash-es';
33
import {NodeKey, TreeNodeInstance, TreeNodeOptions, TypeWithNull, TypeWithUndefined} from "./types";
44

55
import VirTreeNode from './node';
@@ -83,12 +83,10 @@ export default defineComponent({
8383
});
8484

8585
watch(() => props.defaultCheckedKeys, newVal => {
86-
const targets = flatList.value.filter(item => newVal.includes(item.nodeKey));
87-
// console.log('watch defaultCheckedKeys:>> ', targets);
8886
service.resetDefaultCheckedKeys(newVal);
89-
if (targets.length) {
87+
if (newVal.length) {
9088
service.checkedNodes.value.clear();
91-
service.checkedNodes.value.select(...targets);
89+
service.checkedNodes.value.select(...newVal);
9290
}
9391
});
9492

@@ -111,27 +109,28 @@ export default defineComponent({
111109

112110

113111
const checkChange = ([checked, node]: [boolean, Required<TreeNodeOptions>]) => {
114-
service.checkedNodes.value.toggle(node);
112+
service.checkedNodes.value.toggle(node.nodeKey);
115113
if (!checked) {
116114
service.removeDefaultCheckedKeys(node);
117115
}
118116
if (!props.checkStrictly) {
119117
service.updateDownwards(checked, node);
120118
service.updateUpwards(node, flatList.value);
121119
}
120+
// console.log('checkChange defaultCheckedKeys:>> ', service.defaultCheckedKeys);
121+
// console.log('checkChange selected:>> ', service.checkedNodes.value.selected);
122122
emit('checkChange', {checked, node});
123123
}
124124

125125
const expandNode = (node: Required<TreeNodeOptions>, children: TreeNodeOptions[] = []) => {
126126
const trueChildren = children.length ? children : cloneDeep(node.children)!;
127127
const selectedKey = service.selectedNodes.value.selected[0]?.nodeKey || service.defaultSelectedKey;
128128
const allExpandedKeys = service.expandedKeys.value.selected.concat(service.defaultExpandedKeys);
129-
const allCheckedKeys = service.checkedNodes.value.selected.map(item => item.nodeKey).concat(service.defaultCheckedKeys);
130-
if (service.checkedNodes.value.isSelected(node)) {
129+
const allCheckedKeys = service.checkedNodes.value.selected;
130+
if (service.checkedNodes.value.isSelected(node.nodeKey)) {
131131
allCheckedKeys.push(...trueChildren.map(item => item.nodeKey));
132132
}
133-
// console.log('allCheckedKeys', allCheckedKeys);
134-
node.children = service.flattenTree(trueChildren, selectedKey, allCheckedKeys, allExpandedKeys, props.defaultDisabledKeys, node);
133+
node.children = service.flattenTree(trueChildren, selectedKey, uniq(allCheckedKeys), allExpandedKeys, props.defaultDisabledKeys, node);
135134
const targetIndex = flatList.value.findIndex(item => item.nodeKey === node.nodeKey);
136135
flatList.value.splice(targetIndex + 1, 0, ...(node.children as Required<TreeNodeOptions>[]));
137136
}
@@ -193,7 +192,7 @@ export default defineComponent({
193192
return service.selectedNodes.value.selected[0];
194193
},
195194
getCheckedNodes: (): TreeNodeOptions[] => {
196-
return service.checkedNodes.value.selected;
195+
return flatList.value.filter(item => service.checkedNodes.value.selected.includes(item.nodeKey));
197196
},
198197
getHalfCheckedNodes: (): TreeNodeOptions[] => {
199198
return nodeRefs.value.filter(item => item.halfChecked()).map(item => item.rawNode);

‎src/components/VirtualTree/node.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default defineComponent({
1212
required: true
1313
},
1414
checkedNodes: {
15-
type: Object as PropType<SelectionModel<Required<TreeNodeOptions>>>,
15+
type: Object as PropType<SelectionModel<NodeKey>>,
1616
required: true
1717
},
1818
expandedKeys: {
@@ -50,7 +50,7 @@ export default defineComponent({
5050
let result = false;
5151
if (!props.checkStrictly && props.node.hasChildren) {
5252
const { children } = props.node;
53-
const checkedChildren = (children as Required<TreeNodeOptions>[])!.filter(item => props.checkedNodes.isSelected(item));
53+
const checkedChildren = (children as Required<TreeNodeOptions>[])!.filter(item => props.checkedNodes.isSelected(item.nodeKey));
5454
result = checkedChildren.length > 0 && checkedChildren.length < children!.length;
5555
}
5656
return result;
@@ -95,7 +95,7 @@ export default defineComponent({
9595
return <VirtualCheckbox
9696
class="node-content node-check-box"
9797
disabled={ props.disabledKeys.isSelected(props.node.nodeKey) }
98-
modelValue={ props.checkedNodes.isSelected(props.node) }
98+
modelValue={ props.checkedNodes.isSelected(props.node.nodeKey) }
9999
halfChecked={ halfChecked.value }
100100
// @ts-ignore
101101
onChange={ handleCheckChange }>

‎src/components/VirtualTree/service.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {SelectionModel} from "../selections";
44

55
class TreeService {
66
selectedNodes = ref(new SelectionModel<Required<TreeNodeOptions>>());
7-
checkedNodes = ref(new SelectionModel<Required<TreeNodeOptions>>(true));
7+
checkedNodes = ref(new SelectionModel<NodeKey>(true));
88
expandedKeys = ref(new SelectionModel<NodeKey>(true));
99
disabledKeys = ref(new SelectionModel<NodeKey>(true));
1010

@@ -30,6 +30,7 @@ class TreeService {
3030
this.defaultCheckedKeys = defaultCheckedKeys;
3131
this.defaultExpandedKeys = defaultExpandedKeys;
3232
this.defaultDisabledKeys = defaultDisabledKeys;
33+
console.log('defaultCheckedKeys 22 :>> ', defaultCheckedKeys);
3334
const result: Required<TreeNodeOptions>[] = [];
3435
const recursion = (list: TreeNodeOptions[], level = 0, parent: Required<TreeNodeOptions> | null = null) => {
3536
return list.map(item => {
@@ -45,7 +46,7 @@ class TreeService {
4546
if (parent) {
4647
if (defaultExpandedKeys.includes(parent.nodeKey)) {
4748
this.expandedKeys.value.select(parent.nodeKey);
48-
if (defaultCheckedKeys.includes(parent.nodeKey)) {
49+
if (defaultCheckedKeys.includes(parent.nodeKey)) { // 默认展开并选中了
4950
defaultCheckedKeys.push(flatNode.nodeKey);
5051
}
5152
result.push(flatNode);
@@ -67,9 +68,8 @@ class TreeService {
6768
}
6869
}
6970

70-
// || (parent && defaultCheckedKeys.includes(parent.nodeKey))
71-
if (defaultCheckedKeys.includes(item.nodeKey)) {
72-
this.checkedNodes.value.select(flatNode);
71+
if (defaultCheckedKeys.includes(flatNode.nodeKey)) {
72+
this.checkedNodes.value.select(flatNode.nodeKey);
7373
}
7474
return flatNode;
7575
});
@@ -84,7 +84,7 @@ class TreeService {
8484
if (children.length) {
8585
children.forEach(child => {
8686
const checkFunc = checked ? 'select' : 'deselect';
87-
this.checkedNodes.value[checkFunc](child);
87+
this.checkedNodes.value[checkFunc](child.nodeKey);
8888
if (!checked) {
8989
this.removeDefaultCheckedKeys(child);
9090
}
@@ -102,9 +102,9 @@ class TreeService {
102102
if (node.parentKey != null) { // 说明是子节点
103103
const parentNode = flatList.find(item => item.nodeKey == node.parentKey)!;
104104
// console.log('parentNode', parentNode);
105-
const parentChecked = (parentNode.children as Required<TreeNodeOptions>[]).every((child) => this.checkedNodes.value.isSelected(child));
106-
if (parentChecked !== this.checkedNodes.value.isSelected(parentNode)) { // 父节点变了的话，就还要继续向上更新
107-
this.checkedNodes.value.toggle(parentNode);
105+
const parentChecked = (parentNode.children as Required<TreeNodeOptions>[]).every((child) => this.checkedNodes.value.isSelected(child.nodeKey));
106+
if (parentChecked !== this.checkedNodes.value.isSelected(parentNode.nodeKey)) { // 父节点变了的话，就还要继续向上更新
107+
this.checkedNodes.value.toggle(parentNode.nodeKey);
108108
if (!parentChecked) {
109109
this.removeDefaultCheckedKeys(parentNode);
110110
}

0 commit comments

Comments
 (0)