uni-app 中的 picker 组件基于后台对象数组数据格式的使用

🌷🍁 博主猫头虎 带您 Go to New World.✨🍁
🦄 博客首页——猫头虎的博客🎐
🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学！欢迎大家来踩踩~🌺
🌊 《IDEA开发秘籍专栏》学会IDEA常用操作，工作效率翻倍~💐
🌊 《100天精通Golang(基础入门篇）》学会Golang语言，畅玩云原生，走遍大小厂~💐

🪁🍁 希望本文能够给您带来一定的帮助🌸文章粗浅，敬请批评指正！🍁🐥

view:

		<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-db">
						<picker mode="selector" v-model="pSId" @change="bindPickerChange" :value="index"
							:range="pSNames" range-key="pSName">
							<view class="flex picker">
								<view class='flex-item margin-lg'>我选择：{{pSNames[index].pSName}}

								</view>

							</view>
						</picker>
					</view>
				</view>
			</view>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

data:

<script>
	
	export default {
		data() {
			return {
				
				pSId: '',
				
				pSNames: [{
					"pSId": "",
					"pSName": ""
				}],
				index: 0,
				pSName: ""
				
			};
		},

	methods: {
bindPickerChange(e) {
				console.log(e)
				this.index = e.detail.value
				this.pSId = this.pSNames[e.detail.value].pSId
				console.log(this.pSId)
			},
	}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

PS:

普通数组：

 <view class="uni-list-cell-db">  
     <picker @change="bindPickerChange" :value="index" :range="array">  
       <view class="uni-input">{{array[index]}}</view>  
    </picker>  
  </view>  
export default {  
    data() {        
        return {            
            array: ['中国', '俄国'],  
            index: 0,  
        }  
    },  
    methods: {  
        bindPickerChange: function(e) {  
            console.log('picker发送选择改变，携带值为', e.target.value)  
            this.index = e.target.value  
        },  
    }  
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

重点分析：

1. range='{{objectArray}}' 指定对象数组
2. range-key="{{'name'}}" 指定 range-key，即指定使用objectArray中的 name属性来作为选择器中显示的内容，这里需要注意取出的属性外加了‘’号，即‘name’,引号不可少
3. value='{{objectArray[rangekey].value}}' ，rangekey是js中定义的对象数组的下标，objectArray[rangekey]取出的是改下标的对象，如 {id: 1,name: '苹果',price: 18.6}，而objectArray[rangekey].value中value值表示的是range-key中指定的属性，这里是name，即苹果。
4. 最终展示选中的内容{{objectArray[rangekey].price}} 元，仍然是通过数组的下标获取，只是这里取出的是对象，.price取出对象中的价格。

总结

到此相信大家都已经明白了picker的range和range-key的用法，简单总结一下picker的range中存放的是objectArray时需要通过range-key去指定选择器中显示的内容，否则通过数组下标取出的是一个object对象。

结语

转全栈第一篇博客，感谢支持~
如果这篇文章对您有所帮助，或者有所启发的话，求一键三连：点赞、评论、收藏➕关注，您的支持是我坚持写作最大的动力。

原创声明

======= ·

• 原创作者： 猫头虎

作者wx： [ libin9iOak ]

• 今日已学习

---

本文为原创文章，版权归作者所有。未经许可，禁止转载、复制或引用。

作者保证信息真实可靠，但不对准确性和完整性承担责任。

未经许可，禁止商业用途。

如有疑问或建议，请联系作者。

感谢您的支持与尊重。

点击下方名片，加入IT技术核心学习团队。一起探索科技的未来，共同成长。