基于el-select封装：下拉远程搜索

<template>
  <el-select
    :value="value"
    filterable
    :title="value"
    :multiple="multipleflg"
    remote
    reserve-keyword
    :placeholder="placeholder"
    :remote-method="remotemethod"
    :loading="loadflg"
    :style="styles"
    :class="{ 'select-container': icon }"
    :popper-class="popperclass"
    collapse-tags
    @change="handleChange"
  >
    <template v-if="icon" slot="prefix">
      <span class="search-icon">
        <svg-icon icon-class="search" />
      </span>
    </template>
    <el-option
      v-for="item in options"
      :key="item.value || item.id"
      :label="item.label"
      :value="item.value || item.id"
    />
  </el-select>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Object, Array],
      default: '',
      required: true
    },
    popperclass: {
      type: String,
      default: ''
    },
    icon: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请输入关键词'
    },
    options: {
      type: Array,
      default() {
        return []
      }
    },
    loadflg: {
      type: Boolean,
      default: false
    },
    styles: {
      type: String,
      default: ''
    },
    remotemethod: {
      type: Function,
      default() {}
    },
    multipleflg: {
      type: Boolean,
      default: false
    }
  },
  emit: ['on-change'],
  data() {
    return {}
  },
  mounted() {},
  methods: {
    handleChange(value) {
      this.$emit('input', value)
      this.$emit('on-change', value)
    }
  }
}
</script>
<style lang="scss">
// 父组件传入popperclass参数使用这个类
.width156{
  width: 156Px;
}
</style>
<style lang="scss" scoped>
.select-container {
  ::v-deep .el-input--suffix .el-input__inner {
    padding-left: 15Px;
  }
  .search-icon {
    line-height: 36Px;
    font-size: 16Px;
    position: relative;
    left: 127Px;
  }
}
::v-deep .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
  color: #FF4400 !important;
}
</style>