uniapp + uview Select选择器 u-action-sheet 数据绑定 index,展示 text ------之------ 单个Select选择器
uniapp + uviewSelect选择器 u-action-sheet 数据绑定 index,展示 text
·
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选择器
更多推荐
已为社区贡献17条内容
所有评论(0)