站长资源
中国站长网站

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

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

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » uni-app组件之picker的取值及填坑

相关推荐

  • 暂无文章

评论 抢沙发

评论前必须登录!