el-select的搜索

### el-select 的搜索功能实现

对于 `el-select` 组件中的搜索功能，可以通过多种方式进行优化和自定义设置。为了满足特定需求，比如去除输入时的空格以及限制输入内容等操作，可以采用如下方法：

#### 去除空格并限制输入内容

当处理用户通过 `el-select` 输入的内容时，在监听器中捕获用户的输入事件，并对其进行清理工作，例如移除不必要的空白字符。

methods: {
  handleInput(event) {
    let value = event.target.value;
    // 移除首尾空格
    this.query = value.trim();
    
    // 进一步逻辑可以根据业务需求添加
  }
}

此外，还可以利用正则表达式来严格限定允许输入的字符范围[^1]。

#### 获取单选或多选框的选择项

针对不同类型的选项卡（即单选或复选），存在不同的属性用于访问已选定标签的信息。具体来说，

- 对于 **单选** 类型，应使用 `$refs.name.$data.selectedLabel` 来读取当前被选中的文本；
- 而如果是 **多选** 场景，则需调用 `$refs.name._data.selectedLabel` 方法获取所有已被勾选项目的集合。

#### 实现搜索按钮触发查询动作

最后，关于如何让点击“搜索”按钮后执行相应的过滤行为，可以在模板内绑定一个点击事件处理器给该按钮元素，并在此函数内部编写具体的查找算法或者发起 API 请求以加载匹配的数据列表[^2]。

<span class="deploy-search-btn deploy-right" @click="search">搜索</span>

上述代码片段展示了如何将点击事件关联到名为 `search` 的 JavaScript 函数上，从而实现在按下此按键之后启动检索过程的功能。