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

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

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

* 目标专业 :
{{majorList[majorIndex].title}}
* 学期 :
{{termList[termIndex].title}}
* 杂费及专业特色培训费 :
{{yingjiao_money}}
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)用联动(关联)选择以至于完成某些功能_第3张图片

你可能感兴趣的:(uni-app(Vue)中(picker)用联动(关联)选择以至于完成某些功能)