@@ -72,29 +72,54 @@ export default {
7272 } ,
7373 handleClickCheckBox ( e ) {
7474 e . stopPropagation ( )
75+ } ,
76+ renderExpandSlot ( ) {
77+ const { expandIcon : expandIconSlot } = this . tree
78+ const { node, toggleFold, visibleExpand } = this
79+ const { expanded } = node . data
80+ return expandIconSlot ? expandIconSlot ( { expanded, toggleFoldCb : toggleFold } ) : ( < span class = { [ 'icon' , expanded ? 'rotate180-enter icon-expand' : 'rotate180-leave icon-unexpand' ] } onClick = { ( ) => toggleFold ( node ) } style = { { display : visibleExpand } } > ▼</ span > )
81+ } ,
82+ renderCheckbox ( ) {
83+ const { node, handleClickCheckBox, selectToggle } = this
84+ const { checkbox : checkboxSlot , showCheckbox } = this . tree
85+ const { checked, partialSelected, exceptDisabledChecked, disabled, } = node . data
86+ return showCheckbox ? checkboxSlot ? checkboxSlot ( { handleClickCheckBox, selectToggle, node : node . data } ) : ( < Checkbox
87+ value = { checked }
88+ style = "margin-right: 10px;"
89+ indeterminate = { partialSelected }
90+ key = { exceptDisabledChecked }
91+ disabled = { disabled }
92+ nativeOnClick = { handleClickCheckBox }
93+ onChange = { ( val ) => selectToggle ( val , node ) } /> ) : null
94+ } ,
95+ renderLoading ( ) {
96+ const { loading : loadingSlot } = this . tree
97+ const { loading } = this
98+ return loading ? loadingSlot ? loadingSlot ( { loading } ) : ( < div > ↻</ div > ) : null
99+ } ,
100+ renderNodeName ( ) {
101+ const { tree, node} = this
102+ const { name } = node . data
103+ const { renderTreeNode, $scopedSlots : { default : defaultSlot } } = tree
104+ 105+ return renderTreeNode ? renderTreeNode ( node . data ) : defaultSlot ? defaultSlot ( { node : node . data , treeNode : node } ) : < span > { name } </ span >
75106 }
76107 } ,
77108 render ( ) {
78- const { tree, node, loading, clickContent, handleClickCheckBox, activeNode, visibleExpand } = this
79- const { name, checked, disabled, partialSelected, expanded, exceptDisabledChecked } = node . data || { }
80- const { renderTreeNode, $scopedSlots : { default : defaultSlot } , showCheckbox } = tree
109+ const { clickContent, activeNode, renderExpandSlot, renderCheckbox, renderLoading, renderNodeName } = this
110+ 81111 return ( < div
82112 class = { [ 'node-content' , { 'active-li' : activeNode } ] }
83113 >
84- { < span class = { [ 'icon' , expanded ? 'rotate180-enter icon-expand' : 'rotate180-leave icon-unexpand' ] } onClick = { ( ) => this . toggleFold ( node ) } style = { { display : visibleExpand } } > ▼ </ span > }
114+ { renderExpandSlot ( ) }
85115 < div class = { [ 'inner-wrap' ] } onClick = { clickContent } >
86116 {
87- showCheckbox && < Checkbox
88- value = { checked }
89- style = "margin-right: 10px;"
90- indeterminate = { partialSelected }
91- key = { exceptDisabledChecked }
92- disabled = { disabled }
93- nativeOnClick = { handleClickCheckBox }
94- onChange = { ( val ) => this . selectToggle ( val , node ) } />
117+ renderCheckbox ( )
95118 }
96- { loading && < div loading > ↻</ div > }
97- < div class = 'node-name' > { renderTreeNode ? renderTreeNode ( node . data ) : defaultSlot ? defaultSlot ( { node : node . data , treeNode : node } ) : < span > { name } </ span > } </ div >
119+ { renderLoading ( ) }
120+ < div class = 'node-name' >
121+ { renderNodeName ( ) }
122+ </ div >
98123 </ div >
99124 </ div > )
100125 }
0 commit comments