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

  目录