el-select可选择可搜索，标签和下拉框内容显示自定义，值改变触发事件，键盘回车触发事件，input鼠标焦点失去触发事件

在Vue.js中，使用Element UI的el-select组件可以实现可搜索的下拉选择器，并自定义标签和下拉选项的内容。值的变化可以通过@change事件监听，而键盘回车可以通过@keyup.enter事件监听。

以下是一个简单的例子：

<template>
  <el-select
    v-model="selectedValue"
    filterable
    allow-create
    default-first-option
    @change="handleChange"
    @keyup.enter.native="handleEnter"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="customLabel(item)"
      :value="item.value"
    >
      <span style="float: left">{{ customLabel(item) }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.description }}</span>
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { value: 'option1', label: 'Option 1', description: 'Description 1' },
        { value: 'option2', label: 'Option 2', description: 'Description 2' },
        // ...更多选项
      ]
    };
  },
  methods: {
    customLabel(item) {
      // 自定义显示的标签内容
      return `${item.label} (${item.description})`;
    },
    handleChange(value) {
      // 值变化时的处理函数
      console.log('Selected value changed:', value);
    },
    handleEnter() {
      // 键盘回车时的处理函数
      console.log('Enter pressed');
    }
  }
};
</script>

在这个例子中，el-select组件的v-model绑定了selectedValue变量，这样可以实时获取和更新选中的值。filterable属性使其可搜索，allow-create属性允许用户创建新的选项，default-first-option属性使得在搜索结果中第一个选项被默认选中。

el-option组件通过v-for创建了一个个选项，customLabel方法用于自定义每个选项的显示内容。

@change事件用于监听值的变化，而@keyup.enter.native事件用于监听键盘回车操作。这些事件分别绑定到了handleChange和handleEnter方法，在这些方法中可以执行相应的逻辑处理。