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"
}
]总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
