vue + elementUI 实现下拉树形结构选择部门，支持多选，支持检索
< template> < div> < el- select v- model= "multiple?choosedValue:choosedValue[0]" element- loading- background= "rgba(0,0,0,0.8)" : disabled= "disableFlag" @visible- change= "visibleChange" filterable clearable collapse- tags : filter- method= "filterMethod" @clear= "clear" @remove- tag= "removeTag" : multiple= "multiple" ref= "selectRef" v- loading= "loading" style= "width: 100%" > < el- option : label= "option.name" : value= "option.id" v- for = "option in options" : key= "option.id" class = "optionClass" / > < template v- slot: empty> < div/ > < / template> < el- tree : props= "treeProps" : load= "loadNode" : data= "treeData" : show- checkbox= "multiple" @check= "handleCheck" : expand- on- click- node= "false" @node- click= "chooseNode" : filter- node- method= "filterNodeMethod" class = "treeClass" ref= "treeRef" : node- key= "'id'" : default - checked- keys= "choosedValue" / > < / el- select> < / div>
< / template> < script>
import { getDwxxOfTree} from "@/api/commentTable/api" ; export default { name : "chooseUnitTree" , props : { disableFlag : { Type : Boolean, required : false , default : false } , value : { Type : Object, required : true } , multiple : { Type : Boolean, required : false , default : false } } , data ( ) { return { treeProps : { label : 'name' , value : 'id' , children : 'children' } , deptMap : { } , treeData : [ ] , options : [ ] , loading : false , choosedValue : [ ] , choosedOptions : [ ] , } } , computed : { } , watch : { } , mounted ( ) { this . choosedValue = [ ] this . getNodeData ( ) } , methods : { visibleChange ( visible ) { if ( ! visible) { this . $refs. treeRef. filter ( ) } } , removeTag ( nodeId ) { this . choosedValue = this . choosedValue. filter ( item => item !== nodeId) this . choosedOptions = this . choosedOptions. filter ( item => item. id !== nodeId) this . $refs. treeRef. setCheckedKeys ( this . choosedValue, false ) this . $emit ( 'input' , this . multiple ? this . choosedValue : this . choosedValue[ 0 ] ) } , clear ( ) { this . choosedValue = [ ] this . choosedOptions = [ ] this . $refs. treeRef. setCheckedKeys ( [ ] , false ) this . $emit ( 'input' , '' ) } , filterMethod ( keyWord ) { this . $refs. treeRef. filter ( keyWord) } , filterNodeMethod ( keyWord, node ) { if ( ! keyWord) { return true } return ( node. name + node. id) . includes ( keyWord) } , init ( ) { this . choosedValue = [ ] if ( typeof this . value === 'string' ) { this . choosedOptions. push ( this . deptMap[ this . value] ) this . choosedValue. push ( this . value) } else { this . value. forEach ( item => { this . choosedOptions. push ( this . deptMap[ item. id] ) this . choosedValue = this . value} ) } } , getNodeData ( resolve ) { this . loading = true getDwxxOfTree ( ) . then ( dwxxResult => { this . loading = false if ( dwxxResult. data) { this . options = dwxxResult. dataconst rootDept = [ ] this . deptMap = { } for ( let deptInfo of dwxxResult. data) { this . deptMap[ deptInfo. id] = deptInfo} for ( let deptInfo of dwxxResult. data) { if ( ! this . deptMap[ deptInfo. pid] ) { rootDept. push ( deptInfo) } } if ( resolve) { resolve ( rootDept) } } else { if ( resolve) { resolve ( [ ] ) } } this . init ( ) this . createTree ( dwxxResult. data) } ) } , createNodeChildren ( node ) { let children = [ ] for ( let deptId in this . deptMap) { let tmpNode = this . deptMap[ deptId] if ( tmpNode. pid === node. id) { children. push ( this . createNodeChildren ( tmpNode) ) } } node. children = childrenreturn node} , createTree ( ) { this . treeData = [ ] for ( let deptId in this . deptMap) { let node = this . deptMap[ deptId] if ( ! this . deptMap[ node. pid] ) { this . treeData. push ( this . createNodeChildren ( node) ) } } } , loadNode ( node, resolve ) { if ( node. level === 0 ) { this . getNodeData ( resolve) } else { const children = [ ] for ( let deptId in this . deptMap) { if ( this . deptMap[ deptId] . pid === node. data. id) { children. push ( this . deptMap[ deptId] ) } resolve ( children) } } } , handleCheck ( data, currentData ) { this . choosedOptions = this . multiple ? [ data] : currentData. checkedNodes if ( this . choosedOptions. length > 0 ) { const tempMap = { } this . choosedOptions. forEach ( op => { tempMap[ op. id] = op} ) let tmpOps = [ ] this . choosedOptions. forEach ( op => { if ( ! tempMap[ op. pid] ) { tmpOps. push ( op) } } ) this . choosedOptions = tmpOpsthis . choosedValue = this . choosedOptions. map ( item => item. id) } else { this . choosedValue = [ ] } this . $emit ( 'input' , this . multiple ? this . choosedValue : this . choosedValue[ 0 ] ) } , chooseNode ( data ) { this . choosedOptions = [ data] this . choosedValue = [ data. id] this . $emit ( 'input' , data. id) this . $refs. selectRef. visible = false } }
}
< / script> < style scoped lang= "scss" >
. optionClass { display : none;
} . treeClass { background : transparent; margin : 10px;
}
< / style> 
