基于Element-Ui的select二次封装的下拉搜索组件

少了罗嗦，直接看代码

• 注意代码不能直接使用，只是提供一种封装思路，其中 dSearchList 及样式需要自己重新写, dCountryList 来自 dropListMixin
• 还有很多方法并未加进来，可根据实际自行添加

// select/index.vue
<template>
  <div>
    <el-select
      :value="value"
      :placeholder="placeholder"
      :filterable="true"
      :style="customStyle"
      :class="customClass"
      :remote="true"
      :size="size"
      :remote-method="dSearchList('countryList')"
      :loading="dLoading"
      :clearable="true"
      @input="onChange($event)"
      @change="(val) => onSelectChange(val)"
    >
      <el-option
        v-for="item in dCountryList"
        :key="item[optionKey]"
        :label="item[optionLabel]"
        :value="item[optionValue]"
      >
        <div class="d-f f-jc-sb">
          <span>{{ item.code || "" }}</span>
          <span>{{ item.name || "" }}</span>
          <span>{{ item.numCode || "" }}</span>
        </div>
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { dropListMixin } from "@/mixins/drop_list_mixin";

export default {
  mixins: [dropListMixin],
  props: {
    value: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "请输入",
    },
    customStyle: {
      type: String,
      default: "width: 100%;",
    },
    customClass: {
      type: String,
      default: "",
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    size: {
      type: String,
      default: "small",
    },
    optionKey: {
      type: String,
      default: "code",
    },
    optionLabel: {
      type: String,
      default: "name",
    },
    optionValue: {
      type: String,
      default: "code",
    },
  },
  data() {
    return {}
  },
  created() {
    this.dInit(["countryList"]);
  },
  methods: {
    onChange(val) {
      this.$emit("input", val);
    },
    onSelectChange(val) {
      this.$emit("selectChange", val);
    },
  },
};
</script>


//   使用示例 

  <country-select :size="medium" v-model="formData.countryCode" @selectChange="val => onCountrySelect(val,'countryCode')" ></country-select> 

//   使用示例