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

猫头虎

发布于 2024-04-08 10:31:06

2260

发布于 2024-04-08 10:31:06

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

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

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>

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)
			},
	}

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  
        },  
    }  
}

重点分析：

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