如下图所示,在项目中需求是通过首先选择学生的专业,选好之后在每个专业下面选择对应的学期,每个学期有对应的学费,因此就需要联动选择来实现这一功能。
以下仅展示此功能主要代码:
<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的数据结构,可根据自己需求进行修改