当前位置:网站首页>Three level linkage demo of uniapp uview u-picker components
Three level linkage demo of uniapp uview u-picker components
2022-07-05 03:59:00 【Summer is already slightly cool】
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\
MediumREADME.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
边栏推荐
- [web Audit - source code disclosure] obtain source code methods and use tools
- [wp]bmzclub writeup of several questions
- CTF stegano practice stegano 9
- Phpmailer reported an error: SMTP error: failed to connect to server: (0)
- Differences among 10 addressing modes
- [web source code code code audit method] audit skills and tools
- ABP vNext microservice architecture detailed tutorial - distributed permission framework (Part 1)
- DFS and BFS concepts of trees and graphs
- Rome链分析
- Containerd series - what is containerd?
猜你喜欢
【web審計-源碼泄露】獲取源碼方法,利用工具
Differences among 10 addressing modes
官宣!第三届云原生编程挑战赛正式启动!
ABP vNext microservice architecture detailed tutorial - distributed permission framework (Part 2)
陇原战“疫“2021网络安全大赛 Web EasyJaba
MindFusion.Virtual Keyboard for WPF
Multimedia query
Resolved (sqlalchemy+pandas.read_sql) attributeerror: 'engine' object has no attribute 'execution_ options‘
Thread Basics
[vérification sur le Web - divulgation du code source] obtenir la méthode du code source et utiliser des outils
随机推荐
[C language] address book - dynamic and static implementation
测试开发是什么?为什么现在那么多公司都要招聘测试开发?
How is the entered query SQL statement executed?
JWT vulnerability recurrence
About authentication services (front and back, login, registration and exit, permission management)
[web Audit - source code disclosure] obtain source code methods and use tools
NEW:Devart dotConnect ADO.NET
[positioning in JS]
error Couldn‘t find a package.json file in “你的路径“
Nmap使用手册学习记录
lds链接的 顺序问题
输入的查询SQL语句,是如何执行的?
[untitled]
Deflocculant aminoiodotide eye drops
一文带你了解BI的前世今身与企业数字化转型的关系
DMX parameter exploration of grandma2 onpc 3.1.2.5
[wp][入门]刷弱类型题目
UI自动化测试从此告别手动下载浏览器驱动
汇编-入门
ABP vNext microservice architecture detailed tutorial - distributed permission framework (Part 2)