33const TREE_DATA = { selected : false , partialSelected : false }
44class TreeData {
55 constructor ( data ) {
6- this . name = 'TreeData'
76 this . data = { ...TREE_DATA , ...data }
87 this . children = [ ]
98 }
@@ -26,7 +25,7 @@ class TreeData{
2625 return this . children . every ( ( child ) => child . isSelected ( ) )
2726 }
2827 hasChildrenPartialSelected ( ) {
29- return ! this . isAllChildrenSelected ( ) && this . children . some ( ( child ) => child . isSelected ( ) || child . isPartialSelected ( ) )
28+ return this . children . some ( ( child ) => child . isSelected ( ) || child . isPartialSelected ( ) )
3029 }
3130}
3231
@@ -47,8 +46,8 @@ const demeData = [
4746 name : '四级 1-1-1-1' ,
4847 id : '4' ,
4948 children : [ ] ,
50- checked : true ,
51- disabled : true
49+ selected : false ,
50+ disabled : false
5251 } ,
5352 {
5453 name : '四级 1-1-1-2' ,
@@ -122,8 +121,8 @@ const demeData = [
122121]
123122
124123const generateNode = ( data ) => {
125- const { id , name , children } = data
126- const node = new TreeData ( { id , name } )
124+ const { children , ... rest } = data
125+ const node = new TreeData ( rest )
127126 console . log ( node . name )
128127 children . forEach ( ( child ) => {
129128 // eslint-disable-next-line no-debugger
@@ -145,10 +144,10 @@ export default {
145144 } ,
146145 methods : {
147146 nodeView ( node , level ) {
148- const { name, selected} = node ?. data ?? { }
147+ const { name, selected, disabled , partialSelected } = node ?. data ?? { }
149148 return ( name && < div style = { `margin-left: ${ level * 10 } } >
150- { node . hasChildrenPartialSelected ( ) && `-` }
151- < input type = 'checkbox' checked = { selected } onClick = { ( ) => this . selectToggle ( node ) } />
149+ { partialSelected && `-` }
150+ < input type = 'checkbox' disabled = { disabled } checked = { selected } onClick = { ( ) => this . selectToggle ( node ) } />
152151 { name }
153152 </ div > )
154153 } ,
@@ -162,22 +161,22 @@ export default {
162161 } )
163162 return node
164163 } ,
165- getView ( paths , level ) {
166- const node = this . getNode ( paths )
164+ getView ( node , level ) {
165+ // const node = this.getNode(paths)
167166 // eslint-disable-next-line no-debugger
168167 // debugger
169168 const currentNode = this . nodeView ( node , level )
170169 return ( < div >
171170 { currentNode }
172- { node ?. children ?. map ( ( _ , index ) => this . getView ( [ ... paths , index ] , level + 1 ) ) }
171+ { node ?. children ?. map ( ( child ) => this . getView ( child , level + 1 ) ) }
173172 </ div > )
174173 } ,
175174 refreshUp ( { parent} ) {
176175 if ( ! parent ) return
177176 const toState = parent . isAllChildrenSelected ( )
178177 // eslint-disable-next-line no-debugger
179178 // debugger
180- Object . assign ( parent . data , { selected : toState , partialSelected : parent . hasChildrenPartialSelected ( ) } )
179+ Object . assign ( parent . data , { selected : toState , partialSelected : ! toState && parent . hasChildrenPartialSelected ( ) } )
181180 this . refreshUp ( parent )
182181 } ,
183182 refreshDown ( node ) {
@@ -205,7 +204,7 @@ export default {
205204 render ( ) {
206205 return (
207206 < div style = 'text-align: left' >
208- { this . getView ( [ ] , 0 ) }
207+ { this . getView ( this . root , 0 ) }
209208 </ div >
210209 )
211210 }
0 commit comments