基于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> 
  
  //   使用示例