Vue2 自定义vant-select封装

 select组件封装代码

<template>
  <div>
    <van-field
      :class="fieldClass"
      v-model="text"
      v-bind="$attrs"
      readonly
      is-link
      :name="$attrs.name"
      @click="show = !show"
    >
    </van-field>
    <van-popup v-model="show" round position="bottom" get-container="body">
      <van-picker
        :columns="columns"
        show-toolbar
        :value-key="labelKey"
        :title="$attrs.label"
        :default-index="index"
        :loading="$attrs.loading"
        @cancel="show = !show"
        @confirm="onConfirm"
      ></van-picker>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "van-select",
  props: {
    columns: {
      type: Array,
    },
    modelValue: {
      type: [String, Number],
      default: "",
    },
    // field块自定义类名
    fieldClass: {
      type: String,
      default: "",
    },
    // 选项对象中，选项文字对应的键名
    labelKey: {
      type: String,
      default: "label",
    },
    // 选项对象中，选项值对应的键名
    valueKey: {
      type: String,
      default: "value",
    },
  },
  data() {
    return {
      show: false,
      value: "",
      text: "",
      index: 0,
    };
  },
  created() {
    this.echo() // 初始值默认存在
  },
  watch: {
    value(newVal) {
      this.$emit("update:modelValue", newVal);
    },
    /**
     * @description: 初始值异步更新，触发value更新
     */
    modelValue() {
      this.echo();
    },
    /**
     * @description: columns异步更新，触发value更新
     */
    columns() {
      this.echo();
    },
  },

  methods: {
    onConfirm(value) {
      this.text = value[this.labelKey];
      this.value = value[this.valueKey];
      this.show = !this.show;
    },
    echo() {
      this.columns.some((item, index) => {
        if (item[this.valueKey] === this.modelValue) {
          this.text = this.columns[index][this.labelKey];
          this.index = index;
          return true;
        } else {
          return false;
        }
      });
    },
  },
};
</script>

使用van-select组件 

<van-select
  :modelValue.sync="formData.value6"
  :columns="columns1"
  fieldClass="field"
  input-align="right"
  clearable
  label="供电电压"
  placeholder="请选择"
  :rules="[{ required: true }]"
></van-select>

对应的数据

export const columns1 = [
  {
    label: '苹果',
    value: '01',
  },
  {
    label: '香蕉',
    value: '02',
  },
]

组件props解释

1. columns：传入的对象数组，支持异步更新，内部van-field的显示值和van-picker的选项也会自动更新

2. modelValue: 传入的默认值，支持异步更新，内部van-field的显示值也会自动更新

3. fieldClass：可以给select内部的van-field传递自定义类名，需要使用样式穿透

4. labelKey：对象数组用于显示的字段的键名，默认label

5. valueKey：对象数组用于value的字段的键名，默认value

修改转载自：vue3 vant picker封装select 并支持回显清空_vant-ui中picker 选择器清空选择值_阿狸！！！！的博客-CSDN博客