Uniapp tree level selector

uniapp plug-in unit - Tree level selector

brief introduction

Plug in download address
uniapp Tree level selector plug-in , The use of picker Pop up window , Style and scale reference uniapp Of picker and uni-data-picker Components

• Support single choice 、 multi-select 、 Parent selection
• Support Object Object attribute custom mapping
• Support the display of all selected 、 Partial selection 、 Three states are not selected
• Support quick customization of simple styles （ Split line 、 Button 、 Title, etc. ）, Deep styles can be duplicated css

Screenshot display

Usage method

stay script Introduced components in

	import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue"
	export default {
    
		components: {
    
			baTreePicker
		}

stay template Components used in

	<ba-tree-picker ref="treePicker" :multiple='false' @select-change="selectChange" title=" Select the city "
		:localdata="listData" valueKey="value" textKey="label" childrenKey="children" />

stay script Define the opening method , And selective listening

		methods: {
    
			//  Show selector 
			showPicker() {
    
				this.$refs.treePicker._show();
			},
			// Listen and choose （ids Is an array ）
			selectChange(ids, names) {
    
				console.log(ids, names)
			}
		}

stay template Call open

	<view @click="showPicker"> Call selector </view>

attribute

Property name	type	The default value is	explain
localdata	Array	[]	Source data , At present, we support tree structure , In the future, we will consider supporting flat structure
valueKey	String	id	Appoint Object in key As node data id
textKey	String	name	Appoint Object in key The value of is displayed as a node
childrenKey	String	children	Appoint Object in key As a subset of nodes
multiple	Boolean	false	Whether to choose more than one , The default radio option is
selectParent	Boolean	true	Can I choose a parent , Default OK
title	String		title
titleColor	String		Title Color
confirmColor	String	#0055ff	Determine the button color
cancelColor	String	#757575	Cancel button color
switchColor	String	#666	Node switch icon color
border	Boolean	false	Whether there is a dividing line , The default is no

data format

Be careful ： There has to be id、name(id It can be done by valueKey To configure other key values , Such as value) Field , And only

[
    {
    
        id: 1,
        name: ' company 1',
        children: [{
    
            id: 11,
            name: ' R & D department ',
            children: [{
    
                id: 111,
                name: ' Zhang San ',
                
            },{
    
                id: 112,
                name: ' Li Si ',
                
            }]
        },{
    
            id: 12,
            name: ' General affairs department ',
            
        } ]
    },
    {
    
        id: 2,
        name: ' company 2',
        children: [{
    
            id: 21,
            name: ' R & D department ',
            
        },{
    
            id: 22,
            name: ' General affairs department ',
            
        },{
    
            id: 23,
            name: ' Finance Department ',
            
        }, ]
    },
    {
    
        id: 3,
        name: ' company 3'
    },
    {
    
        id: 4,
        name: ' company 4',
        children: [{
    
            id: 41,
            name: ' R & D department ',
            
        }]
    }
]

Method

Method name	Parameters	The default value is	explain
_show()			Show selector
_hide()			Hide selector