picker组件默认选择项无效的解决办法


picker组件在使用时

弹出选择层后,当前默认项为“高尔夫”,如果不进行滑动选择,直接点击确定后。picker 仍然为空,无法获取值。

60c65f62716a97e1cbd67ce03adb2420.png

先看picker代码

<view class="cu-form-group margin-top">
	<view class="title">
	普通选择
	</view>
	<picker mode="selector" @change="PickerChange" :range-key="'name'" :value="picker_index" :range="pickerdata">
		<view class="picker">
		{picker_index>-1?pickerdata[picker_index].name:"请选择活动类型"}}
		</view>
	</picker>
</view>

首先给picker绑定一个change事件PickerChange(这里很重要,需要从这修改),range-key为要显示的字段,value即用来循环下标(这里要先在data中设置picker_index的值,建议设置为负数),pickerdata为数据列表

如何解决?

编辑change事件PickerChange

如下

PickerChange(e) {
	if (e.target.value > -1) {
	//用于记录数据中的id便于存放数据库
	this.picker_id = this.picker[e.target.value].id
	} else {
	//关键在这里,picker_index默认为负数,如果picker没有进行滑动选择,那么value就不变,这里就是在不滑动时对当前选择项进行修改
	this.index = 0
	}
	his.index = this.index
}

这样就可以把picker的这个小bug给解决了

这里还有一个坑

range-key中要显示的字段要加单引号

:range-key="'name'"


点赞(1

上一篇: ThinkPHP表单令牌Ajax请求失效问题解决办法

下一篇: 网易云音乐api接口分享

本文标签: #picker

版权声明: 若无特殊注明,本文皆为原创,转载请注明出处。

发布时间: 2019-12-24 01:41

点击总数: 2278

本文作者:97


请登陆后在进行评论


允染 会员

2020-05-07 13:50 四川省成都市 
如何取道name的值传给后台呢

2020-05-08 23:42 神秘的远方
97 站长 回复: 允染 会员
this.picker[e.target.value].name
Windows Chrome
回复

    点击登陆


    文章
    15
    评论
    14
    用户
    43