uniapp 微信小程序 Picker下拉列表数据回显问题_uniapp picker 回显

效果图：

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>
		<!-- 下拉角标图片 -->
		<view class="icon-img">
			<image src="../../static/img/select-icon.png"></image>
		</view>
	</view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2、data

data() {
	return {
		//为效果展示，暂且brandList 的数据在data内写死
		brandList: [
			{
				"dictLabel": "沃尔沃",
				"dictValue": "1"
			}, {
				"dictLabel": "东风",
				"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()//通过接口获取品牌列表数据
}
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
30
31
32
33
34
35

3、methods

//获取品牌型号列表
getBrandList: function() {
	uni.showLoading();
	var params = {
		url: "/***/***",
		method: "GET",
		data: {},
		callBack: res => {
			uni.hideLoading()
			this.brandList = res.data
			//为效果展示，暂且brandList 的数据在data内写死，项目中按接口返回的数据
		}
	};
	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
},
//接口返回数据，数据回显
getInfo: function() {
	uni.showLoading();
		var params = {
			url: "/***/***",
			method: "GET",
			data: {},
			callBack: res=> {
				uni.hideLoading()
				if(res.data){
					//返回的已选品牌id
					this.brandIds = res.data.brand
					//遍历品牌列表数据，对应id,从而对应选项
					this.brandList.forEach((item,bindex)=>{
						if(item.dictValue == res.data.brand){
							this.brandIndex = bindex;
						}
					})
				}
			}
		};
		http.request(params);
},
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45