el-select 可输入 如何实现 及其属性的用法

el-select可以设置为可输入，允许用户手动输入选项而不仅仅是选择下拉列表中的选项。要启用这个功能，需要设置`filterable`属性为`true`。此外，还可以设置`clearable`属性来允许用户清除输入内容。

以下是一个示例：

<el-select v-model="selectedItem" filterable clearable>
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

在这个示例中，我们将`filterable`和`clearable`属性都设置为`true`，以允许用户输入和清除输入内容。当用户在el-select中输入时，可以通过`filter-method`属性设置一个函数来筛选选项。这个函数应该接收两个参数：用户输入的值和选项对象，返回一个布尔值来指示选项是否应该被包含在筛选结果中。默认情况下，el-select会使用一个简单的字符串匹配算法来进行筛选。

还有一些其他属性可以用于自定义可输入的行为：

- `debounce` - 设置一个延迟时间（毫秒），以便在用户输入内容时等待一段时间再执行筛选操作。这有助于减少查询的数量。
- `remote` - 设置为`true`以启用远程搜索。这将在用户输入时调用`remote-method`属性指定的方法，该方法应该返回一个Promise对象，以便在成功时返回一个包含选项的数组。
- `remote-method` - 要调用的远程搜索方法。该方法应该接收一个参数，表示用户输入的值，并返回一个Promise对象，以便在成功时返回一个包含选项的数组。
- `loading` - 设置为`true`以指示正在加载选项。在使用远程搜索时特别有用。

完整示例：

<el-select v-model="selectedItem" filterable clearable :filter-method="filterItems" :debounce="500" :remote="true" :loading="loading" :remote-method="searchItems">
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

data() {
  return {
    selectedItem: '',
    options: [],
    loading: false
  }
},
methods: {
  filterItems(query, option) {
    // 自定义筛选方法
    return option.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
  },
  searchItems(query) {
    // 远程搜索方法，返回一个Promise对象
    this.loading = true;
    return axios.get(`/api/items?q=${query}`).then(response => {
      this.loading = false;
      return response.data.map(item => {
        return {
          label: item.name,
          value: item.id
        }
      })
    })
  }
}

在这个示例中，我们设置了一个自定义的`filter-method`来实现选项的自定义筛选。我们还设置了一个`debounce`属性，以便在用户输入时等待一段时间再执行筛选操作。我们还使用`remote`和`remote-method`属性来启用远程搜索，并设置一个`loading`属性来指示加载状态。