我要评论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"
}
]总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论