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

点击前：

点击后：

<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组件用方法

【uni-app】picker普通选择器的用法相关推荐

vant 验证手机号_【uni app】vant weapp的引入和部分详细调用（表单输入框、验证码、弹出层搭配选择器、地图）...
本次小程序的开发使用uni app+vant weapp,vant weapp如何引用和部分组件使用方法如下引入在github(https://github.com/youzan/vant-wea ...
vue插槽solt ，uni.app
一.什么是插槽? 插槽就是子组件提供给父组件使用的一个占位符,用<slot></solt>表示父组件可以在这个占位符中填充任何模板代码. 二.插槽的用法 1.创建一个子组件,在 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
html选择器有哪些child,css3选择器child有哪些？css3选择器child用法详解
本篇文章给大家带来的内容是关于css3选择器child有哪些?css3选择器child用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 对于CSS3的结构伪类选择器,为了更好地 ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
html后代元素选择器,怎么使用html5中的后代选择器？后代选择器的用法详解!
最近网上很多小伙伴就在问,怎么使用html5中的后代选择器?看到这我就有点想说的了,对于怎么使用html5中的后代选择器,这个问题其实还是蛮重要的.对于想要从事互联网这块功的话算是基本都要有所了解的. ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...

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

【uni-app】picker普通选择器的用法相关推荐

最新文章

热门文章