Skip to content

Commit 045d731

Browse files
lycHublycHub
committed
checkeds
1 parent c358223 commit 045d731

File tree

4 files changed

+75
-52
lines changed

4 files changed

+75
-52
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.6",
3+
"version": "4.0.7",
44
"description": "Tree component for large amount of data, base on Vue3",
55
"scripts": {
66
"start": "vue-cli-service serve",

‎src/components/VirtualTree/index.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,8 @@ export default defineComponent({
8686
watch(() => props.defaultCheckedKeys, newVal => {
8787
service.resetDefaultCheckedKeys(newVal);
8888
if (newVal.length) {
89-
service.checkedNodes.value.clear();
90-
service.checkedNodes.value.select(...newVal);
89+
service.checkedNodeKeys.value.clear();
90+
service.checkedNodeKeys.value.select(...newVal);
9191
}
9292
});
9393

@@ -110,7 +110,7 @@ export default defineComponent({
110110

111111

112112
const checkChange = ([checked, node]: [boolean, Required<TreeNodeOptions>]) => {
113-
service.checkedNodes.value.toggle(node.nodeKey);
113+
service.checkedNodeKeys.value.toggle(node.nodeKey);
114114
if (!checked) {
115115
service.removeDefaultCheckedKeys(node);
116116
}
@@ -119,17 +119,17 @@ export default defineComponent({
119119
service.updateUpwards(node, flatList.value);
120120
}
121121
// console.log('checkChange defaultCheckedKeys:>> ', service.defaultCheckedKeys);
122-
// console.log('checkChange selected:>> ', service.checkedNodes.value.selected);
122+
// console.log('checkChange selected:>> ', service.checkedNodeKeys.value.selected);
123123
emit('checkChange', {checked, node});
124124
}
125125

126126
const expandNode = (node: Required<TreeNodeOptions>, children: TreeNodeOptions[] = []) => {
127127
const trueChildren = children.length ? children : cloneDeep(node.children)!;
128128
const selectedKey = service.selectedNodes.value.selected[0]?.nodeKey || service.defaultSelectedKey;
129129
const allExpandedKeys = service.expandedKeys.value.selected.concat(service.defaultExpandedKeys);
130-
const allCheckedKeys = service.checkedNodes.value.selected.concat(service.defaultCheckedKeys);
130+
const allCheckedKeys = service.checkedNodeKeys.value.selected.concat(service.defaultCheckedKeys);
131131
// !props.checkStrictly &&
132-
if (!props.checkStrictly && service.checkedNodes.value.isSelected(node.nodeKey)) {
132+
if (!props.checkStrictly && service.checkedNodeKeys.value.isSelected(node.nodeKey)) {
133133
allCheckedKeys.push(...trueChildren.map(item => item.nodeKey));
134134
}
135135
node.children = service.flattenTree(trueChildren, selectedKey, uniq(allCheckedKeys), allExpandedKeys, props.defaultDisabledKeys, props.checkStrictly, node);
@@ -195,8 +195,8 @@ export default defineComponent({
195195
},
196196
getCheckedNodes: (): TreeNodeOptions[] => {
197197
return props.loadData
198-
? flatList.value.filter(item => service.checkedNodes.value.selected.includes(item.nodeKey))
199-
: service.getCheckedNodes(props.source, service.checkedNodes.value.selected, props.checkStrictly);
198+
? flatList.value.filter(item => service.checkedNodeKeys.value.selected.includes(item.nodeKey))
199+
: service.getCheckedNodes(props.source, service.checkedNodeKeys.value.selected, props.checkStrictly);
200200
},
201201
getHalfCheckedNodes: (): TreeNodeOptions[] => {
202202
return nodeRefs.value.filter(item => item.halfChecked()).map(item => item.rawNode);
@@ -221,10 +221,10 @@ export default defineComponent({
221221
default: (data: { item: Required<TreeNodeOptions>, index: number }) => h(VirTreeNode, {
222222
ref: setRef.bind(null, data.index),
223223
node: data.item,
224-
selectedNodes: service.selectedNodes.value,
225-
checkedNodes: service.checkedNodes.value,
226-
expandedKeys: service.expandedKeys.value,
227-
disabledKeys: service.disabledKeys.value,
224+
selectedNodes: service.selectedNodes.value.selected,
225+
checkedNodeKeys: service.checkedNodeKeys.value.selected,
226+
expandedKeys: service.expandedKeys.value.selected,
227+
disabledKeys: service.disabledKeys.value.selected,
228228
showCheckbox: props.showCheckbox,
229229
checkStrictly: props.checkStrictly,
230230
iconSlot: slots.icon,

‎src/components/VirtualTree/node.tsx

Lines changed: 55 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {computed, defineComponent, PropType, Slot, watch} from "vue";
1+
import { computed, defineComponent, PropType, Slot, watch, onMounted } from 'vue';
22
import {NodeKey, TreeNodeOptions} from "./types";
33
import VirtualCheckbox from '../VirtualCheckbox';
44
import RenderNode from './render';
@@ -8,19 +8,19 @@ export default defineComponent({
88
name: 'VirTreeNode',
99
props: {
1010
selectedNodes: {
11-
type: Object as PropType<SelectionModel<Required<TreeNodeOptions>>>,
11+
type: Array as PropType<Required<TreeNodeOptions>[]>,
1212
required: true
1313
},
14-
checkedNodes: {
15-
type: Object as PropType<SelectionModel<NodeKey>>,
14+
checkedNodeKeys: {
15+
type: Array as PropType<NodeKey[]>,
1616
required: true
1717
},
1818
expandedKeys: {
19-
type: Object as PropType<SelectionModel<NodeKey>>,
19+
type: Array as PropType<NodeKey[]>,
2020
required: true
2121
},
2222
disabledKeys: {
23-
type: Object as PropType<SelectionModel<NodeKey>>,
23+
type: Array as PropType<NodeKey[]>,
2424
required: true
2525
},
2626
node: {
@@ -40,45 +40,69 @@ export default defineComponent({
4040
},
4141
emits: ['selectChange', 'toggleExpand', 'checkChange'],
4242
setup(props, { emit, expose }) {
43-
/*watch(() => props.checkedNodes, newVal => {
44-
console.log('wat checkedNodes', newVal.selected);
45-
}, {
46-
deep: true,
47-
immediate: true
48-
});*/
49-
const halfChecked = computed(() => {
50-
let result = false;
43+
const getCheckedChildrenSize =(): number => {
44+
let result = 0;
5145
if (!props.checkStrictly && props.node.hasChildren) {
5246
const { children } = props.node;
53-
const checkedChildren = (children as Required<TreeNodeOptions>[])!.filter(item => props.checkedNodes.isSelected(item.nodeKey));
54-
result = checkedChildren.length > 0 && checkedChildren.length < children!.length;
47+
const checkedChildren = (children as Required<TreeNodeOptions>[])!.filter(item => props.checkedNodeKeys.includes(item.nodeKey));
48+
result = checkedChildren.length;
5549
}
5650
return result;
57-
});
58-
const textCls = computed(() => {
59-
let result = 'node-title';
60-
if (props.selectedNodes.isSelected(props.node)) {
61-
result += ' selected';
62-
}
63-
if (props.disabledKeys.isSelected(props.node.nodeKey)) {
64-
result += ' disabled';
51+
}
52+
53+
const setCheckedStatus = ()=> {
54+
const checkedChildrenSize = getCheckedChildrenSize();
55+
const shouldChecked = checkedChildrenSize > 0 && checkedChildrenSize === props.node.children!.length;
56+
if (shouldChecked && ! props.checkedNodeKeys.includes(props.node.nodeKey)) {
57+
handleCheckChange(shouldChecked);
6558
}
66-
return result;
67-
});
59+
}
60+
6861
const handleSelect = (event: MouseEvent) => {
6962
event.stopPropagation();
70-
if (!props.disabledKeys.isSelected(props.node.nodeKey)) {
63+
if (!props.disabledKeys.includes(props.node.nodeKey)) {
7164
emit('selectChange', props.node);
7265
}
7366
}
7467
const handleExpand = () => {
7568
emit('toggleExpand', props.node);
7669
}
7770
const handleCheckChange = (checked: boolean) => {
78-
emit('checkChange', [checked, props.node])
71+
emit('checkChange', [checked, props.node]);
7972
}
73+
74+
watch(() => props.node, () => {
75+
setCheckedStatus();
76+
});
77+
78+
watch(() => props.checkedNodeKeys, newVal => {
79+
setCheckedStatus();
80+
});
81+
82+
onMounted(() => {
83+
setCheckedStatus();
84+
});
85+
86+
const halfChecked = computed(() => {
87+
let result = false;
88+
const checkedChildrenSize = getCheckedChildrenSize();
89+
result = checkedChildrenSize > 0 && checkedChildrenSize < props.node.children!.length;
90+
return result;
91+
});
92+
93+
const textCls = computed(() => {
94+
let result = 'node-title';
95+
if (props.selectedNodes[0].nodeKey === props.node.nodeKey) {
96+
result += ' selected';
97+
}
98+
if (props.disabledKeys.includes(props.node.nodeKey)) {
99+
result += ' disabled';
100+
}
101+
return result;
102+
});
103+
80104
const renderArrow = (): JSX.Element | null => {
81-
return <div class={ ['node-arrow', props.expandedKeys.isSelected(props.node.nodeKey) ? 'expanded' : ''] }>
105+
return <div class={ ['node-arrow', props.expandedKeys.includes(props.node.nodeKey) ? 'expanded' : ''] }>
82106
{
83107
props.node.hasChildren
84108
? props.iconSlot ? props.iconSlot(props.node.loading) : props.node.loading
@@ -90,12 +114,11 @@ export default defineComponent({
90114
}
91115

92116
const renderContent = () => {
93-
// console.log('checkedNodes>>>>>>', props.checkedNodes);
94117
if (props.showCheckbox) {
95118
return <VirtualCheckbox
96119
class="node-content node-check-box"
97-
disabled={ props.disabledKeys.isSelected(props.node.nodeKey) }
98-
modelValue={ props.checkedNodes.isSelected(props.node.nodeKey) }
120+
disabled={ props.disabledKeys.includes(props.node.nodeKey) }
121+
modelValue={ props.checkedNodeKeys.includes(props.node.nodeKey) }
99122
halfChecked={ halfChecked.value }
100123
// @ts-ignore
101124
onChange={ handleCheckChange }>

‎src/components/VirtualTree/service.ts

Lines changed: 7 additions & 7 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<NodeKey>(true));
7+
checkedNodeKeys = ref(new SelectionModel<NodeKey>(true));
88
expandedKeys = ref(new SelectionModel<NodeKey>(true));
99
disabledKeys = ref(new SelectionModel<NodeKey>(true));
1010

@@ -48,7 +48,7 @@ class TreeService {
4848
if (defaultExpandedKeys.includes(parent.nodeKey)) {
4949
if (!checkStrictly && defaultCheckedKeys.includes(parent.nodeKey)) { // 默认展开并选中了
5050
defaultCheckedKeys.push(flatNode.nodeKey);
51-
this.checkedNodes.value.select(flatNode.nodeKey);
51+
this.checkedNodeKeys.value.select(flatNode.nodeKey);
5252
}
5353
result.push(flatNode);
5454
} else {
@@ -69,7 +69,7 @@ class TreeService {
6969
}
7070

7171
if (defaultCheckedKeys.includes(flatNode.nodeKey)) {
72-
this.checkedNodes.value.select(flatNode.nodeKey);
72+
this.checkedNodeKeys.value.select(flatNode.nodeKey);
7373
}
7474

7575
if (goon && childrenSize) {
@@ -88,7 +88,7 @@ class TreeService {
8888
if (children.length) {
8989
children.forEach(child => {
9090
const checkFunc = checked ? 'select' : 'deselect';
91-
this.checkedNodes.value[checkFunc](child.nodeKey);
91+
this.checkedNodeKeys.value[checkFunc](child.nodeKey);
9292
if (!checked) {
9393
this.removeDefaultCheckedKeys(child);
9494
}
@@ -106,9 +106,9 @@ class TreeService {
106106
if (node.parentKey != null) { // 说明是子节点
107107
const parentNode = flatList.find(item => item.nodeKey == node.parentKey)!;
108108
// console.log('parentNode', parentNode);
109-
const parentChecked = (parentNode.children as Required<TreeNodeOptions>[]).every((child) => this.checkedNodes.value.isSelected(child.nodeKey));
110-
if (parentChecked !== this.checkedNodes.value.isSelected(parentNode.nodeKey)) { // 父节点变了的话，就还要继续向上更新
111-
this.checkedNodes.value.toggle(parentNode.nodeKey);
109+
const parentChecked = (parentNode.children as Required<TreeNodeOptions>[]).every((child) => this.checkedNodeKeys.value.isSelected(child.nodeKey));
110+
if (parentChecked !== this.checkedNodeKeys.value.isSelected(parentNode.nodeKey)) { // 父节点变了的话，就还要继续向上更新
111+
this.checkedNodeKeys.value.toggle(parentNode.nodeKey);
112112
if (!parentChecked) {
113113
this.removeDefaultCheckedKeys(parentNode);
114114
}

0 commit comments

Comments
 (0)