uni-app(Vue)中(picker)用联动(关联)选择以至于完成某些功能
如下图所示,在项目中需求是通过首先选择学生的专业,选好之后在每个专业下面选择对应的学期,每个学期有对应的学费,因此就需要联动选择来实现这一功能。


以下仅展示此功能主要代码:
<div class="item">
				<div class="item-left">
					<span class="star">*</span>
					<span>目标专业 :</span>
				</div>
				<picker mode="selector" :range="majorList.map(v =>v.title)" :value="majorIndex" @change="selectMajor">
					<div :style="majorIndex == 0? 'color:gray':''">{{majorList[majorIndex].title}}</div>
				</picker>
			</div>
			<div class="item">
				<div class="item-left">
					<span class="star">*</span>
					<span>学期 :</span>
				</div>
				<picker mode="selector" :range="termList.map(v => v.title)" :value="termIndex" @change="selectTerm"
					:disabled="majorIndex == 0">
					<div :style="termIndex == 0 ? 'color:gray':''" @click="choseTerm">{{termList[termIndex].title}}
					</div>
				</picker>
			</div>
			<div class="item">
				<div class="item-left">
					<span class="star">*</span>
					<span>杂费及专业特色培训费 :</span>
				</div>
				<div class="item-right">{{yingjiao_money}}
				</div>
			</div>
export default {
		data() {
			return {
				majorList: [{
					id: 0,
					title: '请选择专业'
				}],
				majorIndex: 0,
				classList: [{
					id: 0,
					class_name: '请选择班级'
				}],
				classIndex: 0,
				termList: [{
					term_id: 0,
					title: '请选择学期'
				}],
				termIndex: 0,
				yingjiao_money: 0,
			}
		},
		methods: {
			//选择专业
			selectMajor(e) {
				if(this.majorIndex == e.detail.value) {
					return
				} else {
					this.termList = [{ term_id: 0, title: '请选择学期' }]
					this.majorIndex = e.detail.value
					this.termList = [...this.termList,...this.majorList[e.detail.value].majorFee]
					this.termIndex = 0
					this.yingjiao_money = 0
				}
			},
                        //为选择专业时点击学期提示
			choseTerm () {
				if (this.majorIndex == 0) {
					uni.showToast({
						title: '请先选择专业',
						icon: 'none'
					})
					return
				}
			},
                        //选择学期
			selectTerm(e) {
				this.termIndex = e.detail.value
				this.yingjiao_money = this.termList[e.detail.value].price
			}
}
以下图片展示的为上majorList的数据结构,可根据自己需求进行修改

uni-app(Vue)中(picker)用联动(关联)选择以至于完成某些功能的更多相关文章
- router-view组件在app.vue中渲染不出来怎么办
		
1.在app.vue使用router-view组件直接渲染 页面什么都没显示,可能问题出在路由配置上了,检查路由是否配置完好,路由挂载那里必须使用routes属性 2.在app.vue中router- ...
 - vue项目根目录下index.html中的id="app",与src目录下的App.vue中的id="app"为什么不会冲突
		
感谢:https://blog.csdn.net/qq_35624642/article/details/78243413 index.html <body> <div id=&qu ...
 - vue中的三级联动
		
1.template里面的内容 2.js里面的内容 3.函数怎么写? 这是一个省市区的三级联动,首先你要传递中国的id,这样才能获取到所有的省份,所以在vue的项目中,我需要发一次进页面就请求(来得到 ...
 - vue项目中主要文件的加载顺序(index.html、App.vue、main.js)
		
先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...
 - 关于Vue中main.js,App.vue,index.html之间关系进行总结
		
在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到: index.html---主页,项目入口 App. ...
 - 记:使用vue全家桶 + vux组件库 打包成 dcloud 5+ app 开发过程中遇到的问题
		
vue-cli 版本:2.9.6 webpack 版本:3.6.0 1. vue-cli 安装好之后,不是自动打开默认浏览器 在 config文件夹 ---> dev选项中,有个 autoO ...
 - uni app 零基础小白到项目实战-1
		
uni-app是一个使用vue.js开发跨平台应用的前端框架. 开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多个平台,保证其正确并达到优秀体验. Uni ...
 - vue中使用keepAlive组件缓存遇到的坑
		
项目开发中在用户由分类页category进入detail需保存用户状态,查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件. 上一篇讲了keep-alive的基本用法,现在说说遇到 ...
 - Vue中,父组件向子组件传值
		
1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...
 
随机推荐
- 关于python中一切皆对象和深浅拷贝
 - Django边学边记——中间件
			
特点 Django中的中间件是一个轻量级.底层的插件系统,可以介入Django的请求和响应处理过程,用于全局修改Django的输入或输出. 每个中间件组件负责做一些特定的功能.中间件全部注册在sett ...
 - 如何通过云效Flow完成自动化部署—主机部署
			
如何通过云效Flow完成自动化部署-主机部署,云效流水线Flow是持续交付的载体,通过构建自动化.集成自动化.验证自动化.部署自动化,完成从开发到上线过程的持续交付.通过持续向团队提供及时反馈,让交付 ...
 - CF1511G-Chips on a Board【倍增】
			
正题 题目链接:https://www.luogu.com.cn/problem/CF1511G 题目大意 给出\(n*m\)的棋盘上每一行有一个棋子,双方轮流操作可以把一个棋子向左移动若干步(不能不 ...
 - Douban Top 250爬虫
			
# Ref: https://fishc.com.cn/forum.php?mod=viewthread&tid=101887&extra=page%3D1%26filter%3Dty ...
 - 11204备库升级PSU
			
某系统PSU为11.2.0.4.190115,备库打补丁20年10月份(31537677)由readme可知:1.要求OPatch要求为11.2.0.3.23或之后的版本.2.非rac环境打补丁需要关 ...
 - 腾讯混合云存储 TStor 系列再添新成员,并行存储一体机正式发布
			
最近国内某大型互联网公司依靠其数据优势成功上市,可见数据的重要性,而数据和存储密不可分,您真的知道自己需要更高性能存储吗? 在当今数据爆发式增长的时代,数据已经成为很多行业最重要的资源,没有之一. 数 ...
 - 题解 HDU 5279 YJC plays Minecraft
			
题目传送门 题目大意 给出\(n\)以及\(a_{1,2,...,n}\),表示有\(n\)个完全图,第\(i\)个完全图大小为\(a_i\),这些完全图之间第\(i\)个完全图的点\(a_i\)与\ ...
 - Bert文本分类实践(三):处理样本不均衡和提升模型鲁棒性trick
			
目录 写在前面 缓解样本不均衡 模型层面解决样本不均衡 Focal Loss pytorch代码实现 数据层面解决样本不均衡 提升模型鲁棒性 对抗训练 对抗训练pytorch代码实现 知识蒸馏 防止模 ...
 - OutOfMemoryException异常解析
			
一.概述 在国庆休假快结束的最后一天晚上接到了部门老大的电话,某省的服务会出现崩溃问题.需要赶紧修复,没错这次的主角依旧是上次的"远古项目"没有办法同事都在休假没有人能帮忙开电脑远 ...