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

1. 实现功能

页面打开传递的学生对象有 name,education 两个参数
传过来的数据是 student:{name:‘yuzu’,education:3}
页面中展示 学历为 '专科 ’ 这里 education 的 value 值和列表中的 index 无关
当选择学历后,提交表单,提交的数据的格式也是 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-model="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: 5,
						text: '专科'
					},
					{
						value: 9,
						text: '本科'
					},
					{
						value: 7,
						text: '研究生'
					},
				]
			}
		},
		onShow() {
			this.init();
		},
		computed: {
			getStudentEducationText:{
				set() {
					
				},
				get() {
					let eduStr=''
					console.log(this.student.education)
					this.educationSelectList.forEach((a,b)=>{
						if(a.value==this.student.education){
							console.log(a.text)
							eduStr = a.text;
						}
					})
					return eduStr;
				}
			}
		},
		methods: {
			init() {
				this.student = {
					name: 'yuzu',
					education: 7,
				}
			},
			educationSelectCallback(index) {
				uni.hideKeyboard();
				console.log(index);
				this.student.education = this.educationSelectList[index].value;
				console.log(this.student.education)
			},
			submitForm() {
				console.log(this.student) 
			}
		}
	}
</script>

<style>

</style>

3. 最终效果

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

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