【uni-app】picker普通选择器的用法

最新推荐文章于 2024-04-17 11:07:50 发布

cdgogo

最新推荐文章于 2024-04-17 11:07:50 发布

阅读量7.5k

点赞数 3

分类专栏： uni-app

本文链接：https://blog.youkuaiyun.com/cdgogo/article/details/119213134

版权

uni-app 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了在uni-app中使用picker时遇到的对象数组显示为[object Object]的问题，以及如何通过设置`range-key`属性来解决这个问题，确保选择器能够正确显示数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击前：
在这里插入图片描述
点击后：

<view class="item">
	<view class="title">选择学员</view>
	<view class="line flex justify-between" style="width: 100%;">
		<view class="desc">
			{{checkStudents[studentIndex].name}}
		</view>
		<picker mode="selector" :range="checkStudents" range-key="name" @change="checkStudent" :value="studentIndex" class="right">选择</picker>
	</view>
</view>
<view class="item">
	<view class="title">任课老师</view>
	<view class="line flex justify-between" style="width: 100%;">
		<view class="desc">
			{{checkTeachers[teacherIndex]}}
		</view>
		<picker mode="selector" :range="checkTeachers" @change="checkTeacher" :value="teacherIndex" class="right">选择</picker>
	</view>
</view>

说明：因为姓名可能会相同，最好给个id区分，例如选择学员checkStudents数组。为了方便区分，选择任课老师我就没有用id了。

data() {
	return {
		checkStudents:[
			{
				id:0,
				name:'刘新华'
			},
			{
				id:1,
				name:'路招摇'
			},
			{
				id:2,
				name:'白露'
			},
			{
				id:3,
				name:'任菲菲'
			},
			{
				id:4,
				name:'刘德华'
			}
		],
		studentIndex:0,
		checkTeachers:[
			"张飒","路招摇","白露","任菲菲","刘德华","张大某","杨紫","李一飞","白岳峰","朱砂痣"
		],
		teacherIndex:0,
	};
},
methods: {
	// 选择学员
	checkStudent:function(e){
		this.studentIndex = e.detail.value;
	},
	// 选择任课老师
	checkTeacher:function(e){
		this.teacherIndex = e.detail.value;
	},
}

如果你的数据是对象数组
就会有个坑弹出来的的选项直接是[object Object]

解决办法==》

只需要将rang-key中的字符串加上单引号即可
:range-key="‘name’"
如下代码所示

<picker mode="selector" :range="userList" @change="choice1" :value="aIndex" :range-key="'name'">
		<view class="pbox" style="width: 180rpx;height: 60rpx;">
			<view class="picker">{{userList[aIndex].name}}</view>		
		</view>					
</picker>

官网picker组件用方法