src/components/rk-select.vue

<template>
  <Dropdown @on-clickoutside="handleClose" placement="bottom-start" trigger="custom" :visible="visible" class="mr15">
    <div @click="handleOpen">
        <div class="flex-c">
          <span class="mr5">{{this.data.filter(i => i.key == this.value).length?this.data.filter(i => i.key == this.value)[0].label || this.data.filter(i => i.key == this.value)[0].name : ''}}</span><Icon type="md-arrow-dropdown" />
        </div>
    </div>
    <DropdownMenu slot="list">
      <div class="rk-select-search">
        <input class="rk-select-search-input" v-model="search">
      </div>
      <div class="rk-select-wrapper">
        <li class="ivu-dropdown-item" @click="handleSelect(i)" v-for="(i, index) in filterData" :key="index">{{i.label || i.name}}</li>
      </div>
    </DropdownMenu>
  </Dropdown>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component
export default class RkSelect extends Vue {
  @Prop() data: any;
  @Prop() value: any;
  @Prop({ default: '' }) callValue: string;
  search: string = '';
  visible: boolean = false;
  get filterData() {
    return this.data.filter(i => i.label.indexOf(this.search) !== -1);
  }
  handleOpen() {
    this.visible = true;
  }
  handleClose() {
    this.visible = false;
  }
  handleSelect(i: any) {
    const temp = this.callValue ? i[this.callValue] : i;
    this.$emit('input', temp);
    this.visible = false;
  }
}
</script>

<style lang="scss" scoped>
.rk-select-wrapper{
    overflow: auto;
    max-height: 200px;
  }
.rk-select-search {
  padding: 8px;
  position: relative;
  background-color: #eaeef1;
  top: -5px;
  border-bottom: 1px solid #ddd;
  border-radius: 4px 4px 0 0;
 &:before{
    width: 16px;
    height: 16px;
    display: block;
    content: '';
    position: absolute;
    top: 14px;
    left: 13px;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTQ1MTQxNTU5NDY5IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIwNDMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTkzOC4yIDgzMi42TDcyMy44IDYxOC4xYy0yLjUtMi41LTUuMy00LjQtNy45LTYuNCAzNi4yLTU1LjYgNTcuMy0xMjEuOCA1Ny4zLTE5My4xQzc3My4zIDIyMi44IDYxNC42IDY0IDQxOC43IDY0UzY0IDIyMi44IDY0IDQxOC42YzAgMTk1LjkgMTU4LjggMzU0LjYgMzU0LjYgMzU0LjYgNzEuMyAwIDEzNy41LTIxLjIgMTkzLjItNTcuNCAyIDIuNyAzLjkgNS40IDYuMyA3LjhMODMyLjUgOTM4YzE0LjYgMTQuNiAzMy43IDIxLjkgNTIuOCAyMS45IDE5LjEgMCAzOC4yLTcuMyA1Mi44LTIxLjggMjkuMi0yOS4xIDI5LjItNzYuNCAwLjEtMTA1LjVNNDE4LjcgNjYxLjNDMjg0LjkgNjYxLjMgMTc2IDU1Mi40IDE3NiA0MTguNiAxNzYgMjg0LjkgMjg0LjkgMTc2IDQxOC43IDE3NmMxMzMuOCAwIDI0Mi42IDEwOC45IDI0Mi42IDI0Mi43IDAgMTMzLjctMTA4LjkgMjQyLjYtMjQyLjYgMjQyLjYiIHAtaWQ9IjIwNDQiIGZpbGw9IiNhZmFmYmYiPjwvcGF0aD48L3N2Zz4=);
  }

  .rk-select-search-input {
  border: 1px solid #ddd;
  padding: 3px 10px 3px 25px;
  outline: 0;
  width: 100%;
  border-radius: 4px;

}
}

</style>