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属 ...
随机推荐
- Django学习day05随堂笔记
每日测验 """ 今日考题 1.反向解析的本质是什么,无名和有名反向解析如何操作? 2..路由分发能够实现的前提是什么,需要注意什么,名称空间什么时候使用 3..什么是虚 ...
- HCNP Routing&Switching之路由过滤工具Filter-Policy
前文我们了解了路由控制技术中路由策略和路由匹配工具IP-Prefix相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15314262.html:今天我们 ...
- Jmeter系列(23)- 常用逻辑控制器(2) | 事务控制器Transaction Controller
事务控制器(Transaction Controller) 作用 选择一些请求,作为事务,放在该控制器下 比如:我有三个请求,注册.登录.下单.这三个请求其实就是一个下单完成过程,可以作为一个下单事务 ...
- Redis Windows 服务启动异常 错误码1067
https://blog.csdn.net/after_you/article/details/62215163 Redis Windows 服务启动异常 错误码1067 下载了Redis 2.8.2 ...
- turtle setup和screensize
关于setup有明确的定义,它包括4个参数width,height,startx,starty, setup定义窗体的大小和相对位置,并隐含定义了画布的位置,缺省是居中占整个屏幕的一半[setup() ...
- hdu5909-Tree Cutting【FWT】
正题 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5909 题目大意 给出\(n\)和\(m\)(\(m=2^k\)).再给出一个大小为\(n\)的树 ...
- Remote Sensing Images Semantic Segmentation with General Remote Sensing Vision Model via a Self-Supervised Contrastive Learning Method
论文阅读: Remote Sensing Images Semantic Segmentation with General Remote Sensing Vision Model via a Sel ...
- mysql从零开始之MySQL LIKE 子句
MySQL LIKE 子句 我们知道在 MySQL 中使用 SQL SELECT 命令来读取数据, 同时我们可以在 SELECT 语句中使用 WHERE 子句来获取指定的记录. WHERE 子句中可以 ...
- 无服务计算应用场景探讨及 FaaS 应用实战
作者 | 宋文龙(闻可) 阿里云全球技术服务部高级交付专家 什么是无服务计算 无服务器计算(Serverless Computing)在构建和运行应用时无需管理服务器等基础设施.它描述了一个细粒度的 ...
- SpringBoot整个Druid
Druid简介 Java程序很大一部分要操作数据库,为了提高性能操作数据库的时候,又不得不使用数据库连接池. Druid 是阿里巴巴开源平台上一个数据库连接池实现,结合了 C3P0.DBCP 等 ...