FUNGKAKIT
FUNGKAKIT
  • 发布:2018-09-19 08:42
  • 更新:2019-08-28 09:26
  • 阅读:3189

关于picker的问题

分类:uni-app

在使用uni-app的时候,参考官方文档,当 range 是一个 Object Array 时,应该加一个range-key的值来指定选择器的显示内容,请问一下这个rang-key的值是什么?
查阅了小程序的相关文档,这个rang-key的值应该是Object Array的key值,但是如下代码却显示错误,请教一下是为何?

<view class="input-row">  
	<view class="input-label">  
		<image src="../../../static/img/list1_icon/list1_icon-01.png" mode=""></image>  
		<text>所属公司:</text>  
	</view>  
	<picker @change="changeServer" :value="index" :range="companyList2" :range-key="text">  
		<view class="uni-input">{{companyList2[index].text}}</view>  
	</picker>  
</view>  
  
export default {  
		data() {  
			return {			  
				companyList2:[{  
					value:'3',  
					text:'三公司'  
				}],  
                 index:0  
                       }  
                  }
2018-09-19 08:42 负责人:无 分享
已邀请:
Trust

Trust - 少说废话

这个 index 从哪里来的?数组数据直接赋值给 range 这个属性即可,而不是取其中的某一项赋值。

<picker :range="pickerList" :value="pickerValue" range-key="text">  
            <view class="uni-input">{{pickerValue}}</view>  
        </picker>
export default {  
    data() {  
        return {  
           pickerList: [{  
           	text: 'item1',  
           	value: '1'  
           },{  
           	text: 'item2',  
           	value: '2'  
           },{  
           	text: 'item3',  
           	value: '3'  
           }],  
           pickerValue: '1',  
        }  
    }  
}
  • FUNGKAKIT (作者)

    index是一个初始定义的变量,值为0,忘了写上去了。那请问range-key这个属性有什么用呢


    2018-09-19 10:49

  • 诗小柒

    回复 FUNGKAKIT: picker 要以json中的那个key作为显示


    2018-09-19 17:22

1***@qq.com

1***@qq.com

range-key前面的冒号去掉。。

FUNGKAKIT

FUNGKAKIT (作者)

关于picker出现了一个新的问题,在使用uni.request获取数据并且动态设置picker的时候,出现了报错,但是显示正确的问题。根据API接口调试以及network调试,API获取的数据都没有问题,代码也按照官方文档给出的教程来写的。当CompanyList这个数组是静态数据的时候则不会报错,请问这是什么原因?

<view class="input-label">  
				<image src="../../../static/img/list1_icon/list1_icon-01.png" mode=""></image>  
				<text>所属公司:</text>  
			</view>  
			<picker @change="changeCompany" :value="companyVal" :range="companyList" range-key="text" mode="selector">  
				<view class="uni-input">{{companyList[companyVal].text}}</view>  
			</picker>  
  
export default {  
		onLoad(option) { //页面加载完毕  
			this.getCompany();  
		},  
		data() {  
			return {  
				companyList: [],			  
				companyVal: 0,  
	  
			}  
		},  
}  
  
methods: {  
			getCompany() { //获取公司数据				  
				let url = server.net.setUrl('api/DropDownListApi/GetCompany');  
				uni.request({  
					url: url,  
					dataType: 'json',  
					type: 'GET',  
					header: {  
						//token: server.net.GetSessionToken()  
						token: "yr2hud8rOAQZbTg4v%2bOQ0TIRpuehsVbr1Esrcyk%2bWUSDfWLr7yCpxsAEPlzsbmeE"  
					},  
					success: (result) => {  
						var jsondata = result.data;  
						let dataArr=jsondata.data;  
						  
						if (jsondata.status = 1) {							  
							for (let i in dataArr) {  
								this.companyList.push({  
									text:dataArr[i].text, //根据截图以及network调试,API接口返回的数据没有问题  
									value:dataArr[i].value  
								})  
							}  
							this.getProject();  
						} else {  
							console.log(jsondata.status);  
							uni.showToast({  
								title: jsondata.status,  
								mask: false,  
								duration: 1500  
							});  
						}  
					},  
					fail: (data, code) => {  
						console.log("公司获取失败" + data + code);  
					}  
				});  
			}  
}
1***@qq.com

1***@qq.com

我也碰到这个问题,请问你解决了吗?

宅宅

宅宅

<picker @change="changeCompany" :value="companyVal" :range="companyList" range-key="text" mode="selector">
<view class="uni-input" v-if="companyList[companyVal]">{{companyList[companyVal].text}}</view>
</picker>

这样应该就可以了

codeJun

codeJun

解决掉了, 之前一直看官方文档看不明白,又百度了下微信的picke这个组件的ranger-key, 写成"{{'name'}}",然后虽然正常显示选项,但是HB会提示报错, 选择下拉也无法更换内容,于是尝试将{{}}去掉 写成 range-key="name",就好了...

该问题目前已经被锁定, 无法添加新回复