uni-app(Vue)中(picker)用联动(关联)选择以至于完成某些功能

7 篇文章 0 订阅

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

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

<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的数据结构,可根据自己需求进行修改

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值