Commit 3c145e6ffeb2628b24a9c8fd75f2a89bdf4cd793
1 parent
cb84e64a
update Tree
Showing
2 changed files
with
19 additions
and
16 deletions
Show diff stats
src/components/tree/node.vue
@@ -66,7 +66,7 @@ | @@ -66,7 +66,7 @@ | ||
66 | classes () { | 66 | classes () { |
67 | return [ | 67 | return [ |
68 | `${prefixCls}-children` | 68 | `${prefixCls}-children` |
69 | - ] | 69 | + ]; |
70 | }, | 70 | }, |
71 | selectedCls () { | 71 | selectedCls () { |
72 | return [ | 72 | return [ |
@@ -112,7 +112,13 @@ | @@ -112,7 +112,13 @@ | ||
112 | }, | 112 | }, |
113 | handleCheck () { | 113 | handleCheck () { |
114 | if (this.disabled) return; | 114 | if (this.disabled) return; |
115 | - this.data.checked = !this.data.checked; | 115 | + const checked = !this.data.checked; |
116 | + if (!checked || this.indeterminate) { | ||
117 | + findComponentsDownward(this, 'TreeNode').forEach(node => node.data.checked = false); | ||
118 | + } else { | ||
119 | + findComponentsDownward(this, 'TreeNode').forEach(node => node.data.checked = true); | ||
120 | + } | ||
121 | + this.data.checked = checked; | ||
116 | this.dispatch('Tree', 'checked'); | 122 | this.dispatch('Tree', 'checked'); |
117 | }, | 123 | }, |
118 | setIndeterminate () { | 124 | setIndeterminate () { |
@@ -126,7 +132,7 @@ | @@ -126,7 +132,7 @@ | ||
126 | mounted () { | 132 | mounted () { |
127 | this.$on('indeterminate', () => { | 133 | this.$on('indeterminate', () => { |
128 | this.setIndeterminate(); | 134 | this.setIndeterminate(); |
129 | - }) | 135 | + }); |
130 | } | 136 | } |
131 | }; | 137 | }; |
132 | </script> | 138 | </script> |
133 | \ No newline at end of file | 139 | \ No newline at end of file |
src/components/tree/tree.vue
1 | <template> | 1 | <template> |
2 | <div :class="prefixCls"> | 2 | <div :class="prefixCls"> |
3 | <Tree-node | 3 | <Tree-node |
4 | - v-for="item in currentData" | 4 | + v-for="item in data" |
5 | :key="item" | 5 | :key="item" |
6 | :data="item" | 6 | :data="item" |
7 | visible | 7 | visible |
@@ -46,21 +46,15 @@ | @@ -46,21 +46,15 @@ | ||
46 | }, | 46 | }, |
47 | data () { | 47 | data () { |
48 | return { | 48 | return { |
49 | - prefixCls: prefixCls, | ||
50 | - currentData: this.data | 49 | + prefixCls: prefixCls |
51 | }; | 50 | }; |
52 | }, | 51 | }, |
53 | - watch: { | ||
54 | - data (val) { | ||
55 | - | ||
56 | - } | ||
57 | - }, | ||
58 | methods: { | 52 | methods: { |
59 | getSelectedNodes () { | 53 | getSelectedNodes () { |
60 | const nodes = findComponentsDownward(this, 'TreeNode'); | 54 | const nodes = findComponentsDownward(this, 'TreeNode'); |
61 | return nodes.filter(node => node.data.selected).map(node => node.data); | 55 | return nodes.filter(node => node.data.selected).map(node => node.data); |
62 | }, | 56 | }, |
63 | - updateData () { | 57 | + updateData (isInit = true) { |
64 | // init checked status | 58 | // init checked status |
65 | function reverseChecked(data) { | 59 | function reverseChecked(data) { |
66 | if (data.children) { | 60 | if (data.children) { |
@@ -69,8 +63,11 @@ | @@ -69,8 +63,11 @@ | ||
69 | if (node.children) node = reverseChecked(node); | 63 | if (node.children) node = reverseChecked(node); |
70 | if (node.checked) checkedLength++; | 64 | if (node.checked) checkedLength++; |
71 | }); | 65 | }); |
72 | -// data.checked = checkedLength >= data.children.length; | ||
73 | - if (checkedLength >= data.children.length) data.checked = true; | 66 | + if (isInit) { |
67 | + if (checkedLength >= data.children.length) data.checked = true; | ||
68 | + } else { | ||
69 | + data.checked = checkedLength >= data.children.length; | ||
70 | + } | ||
74 | return data; | 71 | return data; |
75 | } else { | 72 | } else { |
76 | return data; | 73 | return data; |
@@ -88,7 +85,7 @@ | @@ -88,7 +85,7 @@ | ||
88 | return data; | 85 | return data; |
89 | } | 86 | } |
90 | } | 87 | } |
91 | - this.currentData = this.data.map(node => reverseChecked(node)).map(node => forwardChecked(node)); | 88 | + this.data.map(node => reverseChecked(node)).map(node => forwardChecked(node)); |
92 | this.broadcast('TreeNode', 'indeterminate'); | 89 | this.broadcast('TreeNode', 'indeterminate'); |
93 | } | 90 | } |
94 | }, | 91 | }, |
@@ -106,7 +103,7 @@ | @@ -106,7 +103,7 @@ | ||
106 | this.$emit('on-select-change', this.getSelectedNodes()); | 103 | this.$emit('on-select-change', this.getSelectedNodes()); |
107 | }); | 104 | }); |
108 | this.$on('checked', () => { | 105 | this.$on('checked', () => { |
109 | - this.updateData(); | 106 | + this.updateData(false); |
110 | }); | 107 | }); |
111 | } | 108 | } |
112 | }; | 109 | }; |