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

您所在的位置：网站首页 › vant-picker自定义toolbar › Vant picker选择器设置默认值导致选择器失效的解决

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

#Vant picker选择器设置默认值导致选择器失效的解决| 来源: 网络整理| 查看: 265

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

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

vant 版本 >=2.12.27

说下场景

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

html 代码：

js代码：

export default { name: "VantPicker", model: { prop: "value", event: "changed", }, props: { value: { type: [Number, String], default: function () { return ""; }, }, data: { type: Object, default: function () { return { label: "下拉框", rules: "required", title: "下拉框", data: [], }; }, }, "error-message": { type: String, default: function () { return ""; }, }, }, data() { return { defaultIndex: "", newValue: "", showPicker: false, disabled: false, }; }, mounted() { if (this.value) { this.defaultIndex = this.value; // bug在这里 this.setSelectedValue(this.value); } this.disabled = this.data.disabled; }, methods: { clickAction() { if (!this.data.disabled && !this.disabled) { this.showPicker = true; } }, onConfirm(values) { this.newValue = values.text; this.$emit("changed", values.id); this.showPicker = false; }, onChange(picker, value) { console.info(picker, value); }, getCheckedItemByid(id) { let lists = this.data.data ? this.data.data : []; let item = null; for (let i = 0; i < lists.length; i++) { if (id == lists[i].id) { item = lists[i]; break; } } return item; }, getCheckedIndex(id) { let lists = this.data.data ? this.data.data : []; let index = null; for (let i = 0; i < lists.length; i++) { if (id == lists[i].id) { index = i; break; } } return index; }, setSelectedValue(newVal) { let checkedItem = this.getCheckedItemByid(newVal); if (checkedItem) { this.newValue = checkedItem.text; } else { this.$emit("changed", ""); this.newValue = ""; this.defaultIndex = ""; } }, setDisabled(disabled) { this.disabled = disabled; }, }, watch: { value(newVal) { if (!this.$utils.isEmpty(newVal)) { this.defaultIndex = this.getCheckedIndex(this.value); this.setSelectedValue(newVal); } else { this.newValue = ""; this.defaultIndex = ""; } }, }, };

问题

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

问题定为

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

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

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

Column 数据结构

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

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

解决方案

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

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

选中器colums数据结构如下：

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

总结

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

【本文地址】

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

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

今日新闻

推荐新闻