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

---

前言

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

---

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

1. 实现功能

页面打开传递的学生对象有 name,education 两个参数
传过来的数据是 student:{name:‘yuzu’,education:0}
页面中展示 学历为 '专科 ’
当选择学历后,提交表单,提交的数据的格式也是 student:{name:‘yuzu’,education:3}

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="educationSelectShow"
						v-bind:value="getStudentEducationText" placeholder="请选择商品类型" @click="educationSelectShow = true"></u-input>
				</u-form-item>
				<u-action-sheet :list="educationSelectList" v-model="educationSelectShow" @click="educationSelectCallback">
				</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: '',
					education: '',
				},
				educationSelectShow: false,
				educationSelectList: [{
						value: 0,
						text: '专科'
					},
					{
						value: 1,
						text: '本科'
					},
					{
						value: 2,
						text: '研究生'
					},
				]
			}
		},
		onShow() {
			this.init();
		},
		computed:{
			getStudentEducationText(){
				return this.educationSelectList[this.student.education].text;
			}
		},
		methods: {
			init() {
				// 初始化 学生对象
				// console.log(this.student)
				this.student = {
					name: 'yuzu',
					education: '2',
				}
				// console.log(this.student)
			},
			educationSelectCallback(index){
				uni.hideKeyboard();
				console.log(index);
				this.student.education = index;				
			},
			submitForm(){
				this.$toast("学历index:"+this.student.education)
			}
		}
	}
</script>

<style>

</style>

3. 最终效果

二、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选择器

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