uniapp + uview Select选择器(u-action-sheet)数据绑定 value,展示 text ------之------ 两个联动的Select选择器

---

前言

在使用 uniapp uview 的 Select 选择器的组件时,业务逻辑需要实现绑定的是某个数据的 value 如(0,1,2),但是在页面中展示的需要是选项的文字,通过 uview 封装好的 u-action-sheet 组件,来实现

---

一、uniapp + uview Select选择器(u-action-sheet)数据绑定列表的 index,展示 text ------之------ 单个Select选择器

uniapp + uview Select选择器(u-action-sheet)数据绑定列表的 index,展示 text ------之------ 单个Select选择器

二、uniapp + uview Select选择器(u-action-sheet)数据绑定 value,展示 text ------之------ 单个Select选择器

uniapp + uview Select选择器(u-action-sheet)数据绑定 value,展示 text ------之------ 单个Select选择器

三、uniapp + uview Select选择器(u-action-sheet)数据绑定 value,展示 text ------之------ 两个联动的Select选择器

1. 实现功能

学生对象的属性分别为 : name,school,class
学校和班级都有对应的 value,text ,其中 value 和 index 没有关联
页面初始化拿到的学生对象的数据,其中 school,class 拿到的都是 value 值

需求

页面中根据拿到的 school,class 的value, 展示列表中显示对应的 text
班级是和学校有联动关系的
当选择学校后,班级列表展示的是该学校对应的班级
如果没有选择学校,直接选择班级,提醒 请先选择学校
提交表单的时候,学生对象中的 school,class 存储的也是 value 值

2. 代码

html 代码

<template>
	<view>
		<view>
			<u-form :model="student" ref="uForm">
				<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" left-icon="account" label-width="120"
					label="姓名" prop="name">
					<u-input placeholder="请输入姓名" v-model="student.name" type="text"></u-input>
				</u-form-item>

				<u-form-item label="学校" label-width="150">
					<u-input type="select" :select-open="schoolSelectShow" v-model="getStudentSchoolText"
						placeholder="请选择学校" @click="schoolSelectShow = true"></u-input>
				</u-form-item>
				<u-form-item label="班级" label-width="150">
					<u-input type="select" :select-open="classSelectShow" v-model="getStudentClassText"
						placeholder="请选择班级" @click="openClassSelect()"></u-input>
				</u-form-item>
				<u-action-sheet :list="schoolSelectList" v-model="schoolSelectShow"
					@click="schoolSelectCallback">
				</u-action-sheet>
				<u-action-sheet :list="classSelectList" v-model="classSelectShow" @click="classSelectCallback">
				</u-action-sheet>
			</u-form>
			<u-button size="default" type='primary' @click="submitForm">提交</u-button>
		</view>
	</view>
</template>

js 代码

<script>
	export default {
		data() {
			return {
				student: {
					name: '',
					school: '',
					class: ''
				},
				schoolSelectShow: false,
				classSelectShow: false,
				schoolSelectList: [{
						value: 3,
						text: '第三中学'
					},
					{
						value: 6,
						text: '第六中学'
					},
					{
						value: 9,
						text: '第九中学'
					}
				],
				classSelectList: [], // 实际展示的数据
				classSelectAllList: [{ // // 拿到的全部的数据
					schoolId: 3, // 第三中学
					classListOfSchool:[{
						value: 3,
						text: '第三中学3班'
					},
					{
						value: 2,
						text: '第三中学2班'
					},
					{
						value: 6,
						text: '第三中学6班'
					}]
				},{
					schoolId: 6, // 第六中学
					classListOfSchool:[{
						value: 4,
						text: '第六中学4班'
					},
					{
						value: 9,
						text: '第六中学9班'
					},
					{
						value: 1,
						text: '第六中学1班'
					}]
				},{
					schoolId: 9, // 第九中学
					classListOfSchool:[{
						value: 4,
						text: '第九中学4班'
					},
					{
						value: 2,
						text: '第九中学2班'
					},
					{
						value: 8,
						text: '第九中学8班'
					}]
				}], 
			}

		},
		onShow() {
			this.init();
		},
		computed: {
			getStudentSchoolText: {
				set() {
				},
				// 根据 school 的 value ,遍历学校列表,找到对应的 text
				get() {				
					let SchStr = ''
					this.schoolSelectList.forEach((a, b) => {
						if (a.value == this.student.school) {
							SchStr = a.text;
						}
					})
					return SchStr;
				}
			},
			getStudentClassText: {
				set() {
				},
				// 根据 class 的 value ,遍历班级列表,找到对应的 text
				get() {
					let classStr = ''
					this.classSelectList.forEach((a, b) => {
						if (a.value == this.student.class) {
							classStr = a.text;
						}
					})
					return classStr;
				}
			}
		},
		methods: {
			init() {
				this.student = {
					name: 'pool',
					school: null,
					class: null,
				}
			},
			// 当学校列表被选中后执行的回调函数
			schoolSelectCallback(index) { // 拿到选中的索引值
				uni.hideKeyboard();
				// 将列表中索引值对应的 value 赋值给学校
				this.student.school = this.schoolSelectList[index].value;
				// 在这需要先将班级信息归零
				this.student.class = null;
				// 获取 学校 id = value 的班级列表赋值给班级列表
				this.classSelectAllList.forEach((a,b)=>{
					if(a.schoolId == this.student.school){
						this.classSelectList = a.classListOfSchool;
					}
				})
				// 这里拿到学校的 value,根据 value 向班级中追加对应的列表
			},
			classSelectCallback(index) {
				uni.hideKeyboard();
				// 将拿到的索引值对应的班级的 value 值赋值给班级
				this.student.class = this.classSelectList[index].value;
			},
			openClassSelect() {
				if (this.classSelectList.length == 0) { // 班级下拉列表中没有数据
					this.$toast('请先选择学校')
				} else {
					// 执行到这里说明班级下拉列表中是有数据的
					this.classSelectShow = true
				}
			},
			submitForm() {
				console.log(this.student)
				this.$toast("学校value:"+this.student.school+"班级value:"+this.student.class,)
			}			
		}
	}
</script>

<style>

</style>

3. 最终效果