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:

解决方案

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

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

选中器colums数据结构如下：

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

总结