Vant picker选择器设置默认值导致选择器失效的解决

目录

• Vant picker选择器设置默认值导致选择器失效
• 说下场景
• Column 数据结构
• 解决方案
• 总结

Vant picker选择器设置默认值导致选择器失效

vant 版本 >=2.12.27

说下场景

自定义选择器数据结构是数组对象，picker默认显示第一个或上传选择的项，切换选择器失效。

html 代码：

js代码：

问题

选择器的在做选中，点击确认时，选中的值没有发生变化，还是未切换选择之前的值。

问题定为

js代码中行位置： this.defaultIndex = this.value;  // bug在这里。

问题分析：这里服务器使用的key值，导致服务器计算picker选择的索引index出错，用户选中picker值的某一项，然后点击右上角的“确认”按钮，picker选中的值没有发生变化。

再看官方API defaultIndex属性的描述：defaultIndex 初始选中项的索引（类型为number），默认为 0。

Column 数据结构

当传入多列数据时，columns 为一个对象数组，数组中的每一个对象配置每一列，每一列有以下 key:

键名	说明	类型
values	列中对应的备选值	Array
defaultIndex	初始选中项的索引，默认为 0	number
className	为对应列添加额外的类名	string | Array | object
children	级联选项	Column

解决方案

this.defaultIndex = this.value修改如下：

this.defaultIndex = this.getCheckedIndex(this.value)  // 根据this.value循环数组找到key值选择器中的索引值，赋值给defaultIndex,问题得到解决。

选中器colums数据结构如下：

[
    {
        id: "101"
        text: "选项2"
    },{
        id: "102"
        text: "选项2"
    }
]

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。