uni-app组件之picker的取值及填坑

该思路同样适用于微信小程序的picker

比如我们传入的是个数组对象，如下

xiaqu : [
{"code":"34000001","codedesc":"七里沟派出所"},{"code":"34000001","codedesc":"八里沟派出所"}
]

按照官方的说法这里要用到range-key这个属性，指定key的键名来获取，以上代码显然就是codedesc 但是这里有个坑传入的类型是string，所以html部分要这么写:range-key=”‘codedesc‘“ 注意里面的单引号

<picker :value="xiaquIndex"  @change="changeXiaqu" :range="xiaqu" :range-key="'codedesc'" name="xiaqu" style="text-align:left;">
	<text class="grace-text">{{xiaqu[xiaquIndex].codedesc}}</text>
</picker>

这里的xiaquIndex和xiaqu分别是我在data里面声明的字段

data() {
	return {
		xiaquIndex : 0,
		xiaqu : [{"code":"34000001","codedesc":"七里沟派出所"},{"code":"34000002","codedesc":"八里沟派出所"}],
		selectCode:'34000001',
	} 
}

上面的selectCode是没有触发时候的默认值，接下来才是我们要解决的问题，官方的取值一直都是下标，这并非是我们想要的，我们要的是对应的那个code值

怎么取，有同学说通过data-xxx自定义属性赋值，实操来看并不行，因为它总是慢一拍，既然上面声明了一个selectCode默认code字段，我们就拿它做文章，在picker改变的时候触发changeXiaqu后对应的修改selectCode的值，提交的表单的时候把该值赋给xiaqu

changeXiaqu : function(e){
	//选择的下标
	var index = e.detail.value;
	this.xiaquIndex = index;
	//对应的code值
	this.selectCode = this.xiaqu[index].code;
	console.log(this.selectCode)
}

这样我们就获取了选择后的code值，然后提交给后台

dosubmit : function(e){
	//e.detail.value 内存放着表单数据
	var formData = e.detail.value;
		formData.xiaqu=this.selectCode;
		console.log(e.detail.value);
}

有不明白的朋友可以留言讨论哦