Three level linkage demo of uniapp uview u-picker components

One 、 Write it at the front

• 【 I have something to say 】 It took hours , cough >_<, Wrote a Demo, Just give you an idea , Please forgive me for any deficiencies ~
• 【 Import the project 】 Choose in turn file Import the project
• 【 Project content 】 This Demo In order to grade class Student Take these three levels as an example .
• 【 Project components 】 It's using uView Components
• 【 Project operation 】 Choose in turn ： function Run to browser (B)Chrome（ Use whatever browser you have , I use this ~）

Two 、 Effect screenshots

0、 Project creation ： I was in uniapp Modified on the default template

• 【 Project creation 】Hbuilder establish , Choose in turn ： file newly build project choice Default template
  

1、 home page

2、 Add a page

3、 Add a page - Click on Please select

4、 Edit page

5、 Edit page - Click on Please select

3、 ... and 、uView Component Introduction

• In the project \uPickerDemo route \uni_modules\uview-ui\ Medium README.md There are detailed explanations in the document
• I am in the project. \uPickerDemo Has also been configured ~

Four 、 A general process

• 1、 branch 2 An entrance ： An addition , An editor （ Editing involves data echo ）
• 2、 When adding , The displayed data is default , Is the details of the first row of data in the previous column （ All grades （ First column ）, The corresponding class of grade one （ Second column ）, The corresponding students in class one （ The third column ））
• 3、 When editing , The first column of data remains unchanged （ Highlight the corresponding line ）; The data in the second column is the details of the highlighted row in the first column （ You also need to highlight the corresponding line ）; The data in the third column is the details of the highlighted row in the second column （ You also need to highlight the corresponding line ）
• 4、 Click on Please select That's ok , Pop up the selection box
• 5、change When the first column ： The data in the second column is the details of the highlighted options in the first column ; And change the data in the third column to the data details in the first row of the second column
• 6、change When the second column ： The data in the third column is the details of the highlighted options in the second column
• 7、 After selecting the data, assign the data to input The box shows And close the box

5、 ... and 、method Methods to introduce

1、backStudent

• Operation of the content displayed in the option box ： Default value when adding , Echo value when editing

2、clickStudent

• Click on Please select That's ok , open Selection box

3、changeHandler

• Triggered when the selection value changes ： When the first column changes , Synchronize the second column , Data in the third column ; When the second column changes , Synchronize the data in the first column

4、confirmStudent

• After selection , Click ok , to input assignment , And shut down Selection box

6、 ... and 、 Project Download

• uniapp uView u-picker Three level linkage of components Demo