如下图所示,在项目中需求是通过首先选择学生的专业,选好之后在每个专业下面选择对应的学期,每个学期有对应的学费,因此就需要联动选择来实现这一功能。

以下仅展示此功能主要代码:

<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)用联动(关联)选择以至于完成某些功能的更多相关文章

  1. router-view组件在app.vue中渲染不出来怎么办

    1.在app.vue使用router-view组件直接渲染 页面什么都没显示,可能问题出在路由配置上了,检查路由是否配置完好,路由挂载那里必须使用routes属性 2.在app.vue中router- ...

  2. 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 ...

  3. vue中的三级联动

    1.template里面的内容 2.js里面的内容 3.函数怎么写? 这是一个省市区的三级联动,首先你要传递中国的id,这样才能获取到所有的省份,所以在vue的项目中,我需要发一次进页面就请求(来得到 ...

  4. vue项目中主要文件的加载顺序(index.html、App.vue、main.js)

    先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...

  5. 关于Vue中main.js,App.vue,index.html之间关系进行总结

    在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到: index.html---主页,项目入口 App. ...

  6. 记:使用vue全家桶 + vux组件库 打包成 dcloud 5+ app 开发过程中遇到的问题

    vue-cli 版本:2.9.6   webpack 版本:3.6.0 1. vue-cli 安装好之后,不是自动打开默认浏览器 在 config文件夹 ---> dev选项中,有个 autoO ...

  7. uni app 零基础小白到项目实战-1

    uni-app是一个使用vue.js开发跨平台应用的前端框架. 开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多个平台,保证其正确并达到优秀体验. Uni ...

  8. vue中使用keepAlive组件缓存遇到的坑

    项目开发中在用户由分类页category进入detail需保存用户状态,查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件. 上一篇讲了keep-alive的基本用法,现在说说遇到 ...

  9. Vue中,父组件向子组件传值

    1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...

随机推荐

  1. 无序数组求第K大的数

    问题描述 无序数组求第K大的数,其中K从1开始算. 例如:[0,3,1,8,5,2]这个数组,第2大的数是5 OJ可参考:LeetCode_0215_KthLargestElementInAnArra ...

  2. 『Python』列表生成式、生成器与迭代器

    1. 迭代 在 Python中, 迭代是通过 for ... in 来完成的, 而很多语言比如 C 语言, 迭代 list 是通过下标完成的. Python 的 for 循环抽象程度要高于 C 的 f ...

  3. 自学 Java开发(Java后台开发|Java后端开发)的书籍推荐

    java编程思想java并发编程实战深入理解java虚拟机函数式编程思维tcp/ip详解鸟哥的linux私房菜spring mvc +mybatis开发从入门到精通spring技术内幕elastics ...

  4. Linux如何配置网络ip?

    Linux如何配置网络ip? 1.首先切换至root用户 su root 输入root用户密码 2.借助dhclient工具自动生成一个网络内可用的ip地址 我们可以手动配置对应的网段的ip地址,但是 ...

  5. 做毕设的tricks

    CNKI上无法下载博硕士学位论文的PDF版本,只有CAJ版本,挺恶心的.直接下载安装Chrome extension就可以解决了. 链接:https://share.weiyun.com/5HGFF2 ...

  6. Spring中IOC的理解

    Spring中IOC的理解 1.什么是IOC? (1)控制反转.把对象创建和对象间的调用过程交给Spring进行管理. (2)使用IOC的目的:为了耦合度降低. 2.IOC底层原理? (1)xml解析 ...

  7. 高德 Serverless 平台建设及实践

    作者 | 邓学祥(祥翼) 来源 | Serverless 公众号 高德从 FY21 财年开始启动 Serverless 建设,至今一年了,高德 Serverless 业务的峰值超过十万 qps 量级, ...

  8. 重磅 | 阿里开源首个 Serverless 开发者平台 Serverless Devs

    Serverless 从概念提出到应用,已经走过了 8 个年头,开发者对 Serverless 的使用热情不断高涨.为帮助开发者实现一键体验多云产品,极速部署 Serverless 项目,10 月 2 ...

  9. SpringBoot-邮件任务

    邮件发送,在我们的日常开发中,也非常的多,Springboot也帮我们做了支持 邮件发送需要引入spring-boot-start-mail SpringBoot 自动配置MailSenderAuto ...

  10. 【UE4 C++ 基础知识】<8> Delegate 委托

    概念 定义 UE4中的delegate(委托)常用于解耦不同对象之间的关联:委托的触发者不与监听者有直接关联,两者通过委托对象间接地建立联系. 监听者通过将响应函数绑定到委托上,使得委托触发时立即收到 ...