当前位置:网站首页>Uniapp unlimited tree structure components, multi-choice components, support search, unlimited bread crumb type navigation

Uniapp unlimited tree structure components, multi-choice components, support search, unlimited bread crumb type navigation

2020-11-19 03:20:47 LLLLLLLL

Go straight to the renderings

 Insert picture description here

Function is introduced

1、 Support single choice and multi choice ( The returned format is array ), Multilevel organization

Update log

2.0.0(2020-11-18)

1、 Fix the problem that multiple choice doesn't work 2、 Fix the problem that breadcrumbs don't automatically set to the right ,3 Fix initial data failure

1.2.2(2020-10-24)

1. Add the leaf node attribute in radio mode ,nodes, by true Only leaf nodes can be selected , by false when , You can choose any one of them

Instructions :

1、 Import components
import tree from '@/components/xiaolu-tree/tree.vue';

  1. Certified components
  2. Reference components on the page

Parameter description

Parameters type If required The default value is explain
trees Array yes [ ] Incoming data , See the following example
children string no children Specifies that the sub option of the option is a property value of the option object
searchIf Boolean no true Whether to open the search box
isCheck Boolean no true Whether to turn on the clock selection operation , multi-select
props Object no {label:'name',children:'children'} Parameter configuration , See the table below for details

props Parameter description

Parameters type If required The default value is explain
label string no name Specifies that the option label is a property value of the option object
children string no children Specifies that the sub option of the option is a property value of the option object
multiple Boolean no true The value is true For multiple choice , by false It's a single choice
checkStrictly Boolean no false In radio mode , You can only select leaf nodes ; And in multi-choice mode , When this feature is enabled (checkStrictly by false when ), The parent-child node can be disassociated , Choose any level of options .

Be careful : Single selection and multiple selection are all values transferred by array

Method

Method name Parameters explain
sendValue val val Receive selected data

Be careful :

trees The data needs to have checked Field
By default, you need to pass checkList
And call checks Method

Gets the selected value ( important )

        <tree :checkList="checkList" v-if="tree.length>0"  :props="prop" @sendValue="confirm" :isCheck="true" :trees="tree" />
            // Get the selected 
            confirm(val) {
                this.checkList=val
            },

Click OK to return to the first page with the selected value ( Contains applets and h5 The value transfer method of )

· The returned data is an array , Contains all fields of a selected object , If you only need a field , Just go through it

        backConfirm(){
            var pages = getCurrentPages();
            var currPage = pages[pages.length - 1]; // Current page 
            var prevPage = pages[pages.length - 2]; // Previous page 
            //h5 How to write it 
            prevPage.query =this.checkList
            // How to write small programs 
            //prevPage.$vm.query =this.checkList
            uni.navigateBack();
        }

Get component address

Plug in market : Click the jump
GitHub: Click the jump

Conclusion : New plug-in for the first time , The writing method is compared low, I hope you can forgive me . If there are some shortcomings, please point out that .

code

If you have any questions, you can add me qq:122720267

版权声明
本文为[LLLLLLLL]所创,转载请带上原文链接,感谢

随机推荐