elementPlus下拉框允许搜索时禁止前后输入空格

在Element Plus的下拉框组件中，如果想要实现搜索功能并阻止用户在输入框前后输入空格，你可以通过监听`input`事件并在事件处理函数中做判断来实现。以下是一个简单的步骤说明：

1. 首先，在你的Vue组件模板里使用`<el-select>`元素，并配置搜索属性，例如：

<template>
  <el-select v-model="selectedValue" placeholder="请选择" filterable @input="handleInput">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>
</template>

2. 然后，在data中定义下拉框的数据源`options`以及当前选中的值`selectedValue`。

3. 创建一个`handleInput`方法来处理用户的输入：

<script setup>
import { ref } from 'vue';

const options = ... // 你的选项数据
const selectedValue = ref('');
const inputVal = ref('');

function handleInput(e) {
  const inputValue = e.target.value.trim();
  
  if (inputValue === '') {
    inputVal.value = '';
  } else {
    inputVal.value = inputValue;
  }

  // 在这里可以根据需要对搜索进行过滤...
}
</script>

在这个例子中，我们使用了`trim()`函数来移除前后多余的空格，并将清理后的输入保存在`inputVal`里。当输入为空时，我们会清空这个字段。