<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>

<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>

this.defaultIndex = this.getCheckedIndex(this.value) ?// 根據(jù)this.value循環(huán)數(shù)組找到key值選擇器中的索引值，賦值給defaultIndex,問題得到解決。

[
? ? {
? ? ? ? id: "101"
? ? ? ? text: "選項(xiàng)2"
? ? },{
? ? ? ? id: "102"
? ? ? ? text: "選項(xiàng)2"
? ? }
]