做这个功能的初衷是因为elementUI的select框带(搜索功能的)操作不是很便捷。比如：在选择值后，按键盘下键从头开始往后选择等。

select.gif

功能实现的大体思路是：
1 键盘上下移动选中项跟着移动
2 当移动项超出设定高度时，分为两种情况：①继续向下滚动，滚动项始终在最底部；②继续向上滚动，滚动项始终在最顶部
3.按enter键确认值，按键盘下键定位到该确认值

html结构：

<div class="select-title">
                <el-input
                    type="textarea"
                    v-model="searchText"
                    @keydown.native.down.stop.prevent="navigateOptions('next')"
                    @keydown.native.up.stop.prevent="navigateOptions('prev')"
                    @keydown.native.enter.prevent="selectOption"
                ></el-input>
</div>
<div class="select-content" ref="selectContent" v-if="showContent">
                <div class="select-option">
                    <div
                        class="option-item"
                        v-for="(item, index) in optionList"
                        :key="index"
                        @click="handleOption(item)"
                    >
                        {{ item.initLabel }}
                    </div>
                </div>
</div>

上下移动js:

    /**
             * direction:移动方向
             * hasFocusOption:是否是聚焦定位选项(区分上下移动定位选项)
*/
            navigateOptions(direction, hasFocusOption) {
                if (this.optionList.length === 0 || this.subVisible) return
                if (!this.showContent && !this.subVisible) {
                    this.$emit('update:showContent', true)
                    return
                }
                if (!hasFocusOption) {
                    if (direction === 'next') {
                        this.hoverIndex++
                        if (this.hoverIndex === this.optionList.length) {
                            this.hoverIndex = 0
                        }
                        // 第一项到当前选中项高度大于滚动高度加下拉框高度
                        if ((this.hoverIndex + 1) * 25 >= document.querySelector('.select-option').scrollTop + 180)
                            document.querySelector('.select-option').scrollTop = (this.hoverIndex + 1) * 25 - 180
                        else if (this.hoverIndex === 0) document.querySelector('.select-option').scrollTop = 0
                    } else if (direction === 'prev') {
                        this.hoverIndex--
                        if (this.hoverIndex < 0) {
                            this.hoverIndex = this.optionList.length - 1
                        }
                        // 第一项到当前选中项前一项高度小于滚动高度
                        if ((this.hoverIndex + 1) * 25 - 25 <= document.querySelector('.select-option').scrollTop)
                            document.querySelector('.select-option').scrollTop = (this.hoverIndex + 1) * 25 - 25
                        else if (this.hoverIndex === this.optionList.length - 1)
                            document.querySelector('.select-option').scrollTop = (this.hoverIndex + 1) * 25 - 180
                    }
                } else {
                    // 第一项到当前选中项高度大于下拉框高度
                    if ((this.hoverIndex + 1) * 25 > 180)
                        document.querySelector('.select-option').scrollTop = (this.hoverIndex + 1) * 25 - 180
                    else document.querySelector('.select-option').scrollTop = 0
                }
                let optionItems = this.$refs.selectContent.querySelectorAll('.option-item')
                optionItems.forEach((item, index) => {
                    item.classList.remove('activeOption')
                    if (index === this.hoverIndex) item.classList.add('activeOption')
                })
            },

enter确认js：

   selectOption() {
            // 这里将选中值传到输入框即可
             ...
},

按键盘下键定位选中项位置:

this.optionList.forEach((item, index) => {
      if (item.initLabel === this.searchText) {
          this.hoverIndex = index
          this.navigateOptions('', true)
          return
      }
})

最终效果展示：

custom_select.gif

处理这个问题还有另一种方式，就是修改elementUI的源码，具体可以参考这篇文章：https://www.jianshu.com/p/21e492fb9eff