Vant picker选择器设置默认值导致选择器失效的解决
作者：未知原色
这篇文章主要介绍了Vant picker选择器设置默认值导致选择器失效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Vant picker选择器设置默认值导致选择器失效
vant 版本 >=2.12.27
说下场景
自定义选择器数据结构是数组对象，picker默认显示第一个或上传选择的项，切换选择器失效。
html 代码：
<template> <div class="van-cell van-cell-padding0"> <van-field readonly clickable :value="newValue" :label="data.label" :placeholder="data.placeholder" :required="data.required" is-link :disabled="disabled" @click="clickAction" :error-message="errorMessage" > </van-field> <van-popup v-model="showPicker" position="bottom"> <van-picker :title="data.title" show-toolbar :columns="data.data" :defaultIndex="defaultIndex" @confirm="onConfirm" @cancel="showPicker = false" @change="onChange" /> </van-popup> </div> </template>
js代码：
<script>
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 = "";
}
},
},
};
</script>问题
选择器的在做选中，点击确认时，选中的值没有发生变化，还是未切换选择之前的值。
问题定为
js代码中行位置： this.defaultIndex = this.value; // bug在这里。
问题分析：这里服务器使用的key值，导致服务器计算picker选择的索引index出错，用户选中picker值的某一项，然后点击右上角的“确认”按钮，picker选中的值没有发生变化。
再看官方API defaultIndex属性的描述：defaultIndex 初始选中项的索引（类型为number），默认为 0。
Column 数据结构
当传入多列数据时，columns 为一个对象数组，数组中的每一个对象配置每一列，每一列有以下 key:
| 键名 | 说明 | 类型 |
|---|---|---|
| values | 列中对应的备选值 | Array<string | number> |
| 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"
}
]总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。