1. Dynamic loading of data version (only support radio + display)

Each level requests data dynamically, optimizing the problem of large data volumes

A rendering of a single option

To obtain the dynamically loaded version, add WX: 122720267

2. Full version (no dynamic loading)

The basic version of the reconstruction, and the basic version of the code logic is completely different, more efficient, more complete function, recommended use

1.1 Function Description

1. Multiple selection: support multiple selection of any number of items, support associated sub-level, only selected sub-level, full selection, half selection state
2, support custom display content (slot), custom content style
3. In the option state, the selected location path is displayed
4. You only need to upload the checkList field to display the default selection

Figure 1 Multiple selection, select any number of items

Figure 2 Multiple selection, associated sub-level, support for all, and cancel all, half selection state

2, radio

FIG. 1 You can select either one of the items or only the subitems to enter the path that can automatically switch to the selected page

Parameters that

parameter type If required The default value instructions
trees Array is [] Each object must contain a unique ID value
searchIf Boolean no true Whether to enable the search box
parent Boolean no true Prop. checkStrictly takes effect when strictly is true, and parent data is selected when all children are selected
isCheck Boolean no false Indicates whether to enable the select operation. If the value is false, only display, no operation
props Object no {label:’name’,children:’children’} For details about parameter configuration, see the following table
checkList Array is [] The default value is selected and matches by the ID field
# # # #
The method name parameter instructions
— — —
sendValue val Val receives the selected data, which is of type array
##### props Parameter Description
parameter type If required The default value instructions
———— ———— ———— ———— ————
label string no name Specifies the option label as an attribute value of the option object
children string no children Specifies that the child of the option is an attribute value of the option object
multiple Boolean no true Multi-select when the value is true, single-select when the value is false
checkStrictly Boolean no false This value needs to be passed only in multi-select mode. When checkStrictly is false, the parent node can be unassociated and any tier 1 option can be selected. If true is associated with children, all can be selected
nodes Boolean no true In radio mode, when Nodes is false, any level-1 option can be selected. When Nodes is true, only leaf nodes can be selected
Parameter Example
// props: {// props:'name',
		children: 'children',
		multiple:true}, props: {// multiple mode (associated subclass) label:'name',
		children: 'children',
		multiple:true,
		checkStrictly:true}, props: {// Radio mode (any item) label:'name',
		children: 'children',
		multiple:false,
		nodes:false}, props: {// select user label:'name',
		children: 'children',
		multiple:false,
		nodes:true} *Copy the code
Slot Indicates the slot where you can customize the display content and combine multiple fields
	<xiaolu-tree  v-slot:default="{item}" :checkList="checkList" :positionArr="positionArr" v-if="tree.length>0" :props="prop" @sendValue="confirm" :isCheck="false" :trees="tree"> <! -- Content slot --> <view> <view class="content-item">
				<view class="word">{{item.name}}</view> </view> </view> <! --end --> </xiaolu-tree>Copy the code

Continuous maintenance and update

Example address: Click to jump