效果圖：

1、template

<template>
	<view class="items select-box">
		<view class="items-text">品牌型號</view>
		<picker @change="bindBrandType" :value="brandIndex" :range="brandList" range-key="dictLabel"
			class="picker-box">
			<input class="select-input" type="text" placeholder="請選擇品牌型號" v-if="brandIndex == -1"
				disabled="disabled"></input>
			<view v-else class="select-input" :value="brandList[brandIndex].dictLabel">
				{{brandList[brandIndex].dictLabel}}
			</view>
		</picker>
		<!-- 下拉角標(biāo)圖片 -->
		<view class="icon-img">
			<image src="../../static/img/select-icon.png"></image>
		</view>
	</view>
</template>

2、data

data() {
	return {
		//為效果展示，暫且brandList 的數(shù)據(jù)在data內(nèi)寫死
		brandList: [
			{
				"dictLabel": "沃爾沃",
				"dictValue": "1"
			}, {
				"dictLabel": "東風(fēng)",
				"dictValue": "2"
			}, {
				"dictLabel": "紅旗",
				"dictValue": "3"
			}, {
				"dictLabel": "解放",
				"dictValue": "4"
			}, {
				"dictLabel": "寶馬",
				"dictValue": "5"
			}, {
				"dictLabel": "奧迪",
				"dictValue": "6"
			}, {
				"dictLabel": "哈弗",
				"dictValue": "7"
			}
		],
		brandIndex: -1,
		brandIds: '',
		brandame: '',
	}
}
onLoad: function(options) {
	this.getBrandList()//通過接口獲取品牌列表數(shù)據(jù)
}

3、methods文章來源地址http://www.zghlxwxcb.cn/news/detail-602182.html

//獲取品牌型號列表
getBrandList: function() {
	uni.showLoading();
	var params = {
		url: "/***/***",
		method: "GET",
		data: {},
		callBack: res => {
			uni.hideLoading()
			this.brandList = res.data
			//為效果展示，暫且brandList 的數(shù)據(jù)在data內(nèi)寫死，項(xiàng)目中按接口返回的數(shù)據(jù)
		}
	};
	http.request(params);
},
//選擇品牌型號
bindBrandType(e) {
	this.brandIndex = e.detail.value
	//往后端傳值傳所選的brandIds 
	this.brandIds = this.brandList[this.brandIndex].dictValue
	this.brandame  = this.brandList[this.brandIndex].dictLabel
},
//接口返回?cái)?shù)據(jù)，數(shù)據(jù)回顯
getInfo: function() {
	uni.showLoading();
		var params = {
			url: "/***/***",
			method: "GET",
			data: {},
			callBack: res=> {
				uni.hideLoading()
				if(res.data){
					//返回的已選品牌id
					this.brandIds = res.data.brand
					//遍歷品牌列表數(shù)據(jù)，對應(yīng)id,從而對應(yīng)選項(xiàng)
					this.brandList.forEach((item,bindex)=>{
						if(item.dictValue == res.data.brand){
							this.brandIndex = bindex;
						}
					})
				}
			}
		};
		http.request(params);
},

到了這里，關(guān)于uniapp 微信小程序 Picker下拉列表數(shù)據(jù)回顯問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！