Vue+ElementUI el-select 搜索算法自定义实现，简单上手

自定义 el-select 搜索逻辑：根据特定字段搜索并显示标签

在构建 Vue + ElementUI 项目时，el-select 组件是实现下拉选择功能的常用工具。它默认根据输入的内容匹配标签的显示值，即 label 字段。然而，有时我们需要根据标签的某个特定字段进行搜索，例如 id。

自定义搜索逻辑

要实现根据 id 搜索并显示标签名称，我们可以利用 el-select 的 filter-method 属性。该属性接收一个函数作为参数，用于自定义搜索逻辑。在这个函数中，我们可以根据输入的内容匹配标签的特定字段，并返回匹配成功的标签列表。

代码示例：

<template>
  <el-select v-model="value" filterable filter-method="filterMethod">
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    />
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      value: null,
      options: [
        { id: 1, name: 'Option 1' },
        { id: 2, name: 'Option 2' },
        { id: 3, name: 'Option 3' },
      ],
    };
  },
  methods: {
    filterMethod(query, option) {
      return option.id === parseInt(query);
    },
  },
};
</script>

加载数据

为了在组件挂载时加载数据，我们可以使用 mounted 生命周期钩子。在 mounted 钩子中，我们可以使用 axios 或其他数据请求库来加载数据。

代码示例：

<script>
export default {
  mounted() {
    axios.get('api/options').then(response => {
      this.options = response.data;
    });
  },
  methods: {
    // ...
  },
};
</script>

总结

通过结合 el-select 组件的 filter-method 属性和 mounted 生命周期钩子，我们可以轻松实现根据特定字段（例如 id）搜索并显示标签名称。这种方法提供了更大的灵活性，可以根据项目的特定需求定制搜索逻辑。

常见问题解答

问：filter-method 函数可以接收哪些参数？
答：filter-method 函数接收两个参数：query（输入的搜索内容）和 option（匹配的标签）。

问：如何根据多个字段进行搜索？
答：filter-method 函数只能匹配单个字段。如果需要根据多个字段进行搜索，可以考虑使用其他库或自己实现搜索算法。

问：mounted 生命周期钩子中可以执行哪些操作？
答：mounted 生命周期钩子可以在组件挂载后执行任何操作，包括加载数据、设置状态或调用其他函数。

问：如何避免在搜索时出现空白？
答：确保 options 数据在 mounted 钩子中加载完成，这样在搜索时就不会出现空白。

问：filter-method 函数中的 parseInt() 函数有什么作用？
答：parseInt() 函数将输入的搜索内容转换为整数，与标签的 id 字段进行比较。