element-ui下拉框组件查询时enter可选择第一个

Question

需求如下：
1、搜索的时候默认给第一个结果添加'hover'样式
2、可按enter选择第一个结果

哪位大神帮忙解决下，在线等~

Answer 1

官方文档里有这样一个属性 default-first-option

该属性是用来控制按下回车默认选择第一个匹配项的
需要配合filterable或者remote使用
而filterable属性可以用来搜索选项

<el-select
    v-model="value"
    multiple
    filterable
    allow-create
    default-first-option
    placeholder="请选择文章标签">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

具体的使用方法你还可以查阅这个链接
https://element.eleme.cn/#/zh-CN/component/select

Answer 2

1.reserve-keyword：多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词
2.default-first-option：在输入框按下回车，选择第一个匹配项。需配合filterable或remote使用

<el-select
    v-model="value"
    multiple
    filterable
    reserve-keyword
    default-first-option
    placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

Answer 3

关于default-first-option的方法上面已经有人说了。
我提供另外一种方法，无需配合filterable或remote：

<el-select v-model="value"
    ref="select" @visible-change="visibleChange" placeholder="请选择">
    <el-option v-for="item in options"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
    </el-option>
</el-select>

methods: {
    visibleChange(visible) {
        if (visible && this.$refs.select.hoverIndex < 0) {
            this.$refs.select.hoverIndex = 0
        }
    }
}