el-autocomplete 中select和fetch-suggestion 获取自定义传参和内部参数

2023-10-09 12:18:40

探索 el-autocomplete：实现可提示输入框的利器

1. 引言

在构建现代 web 应用程序时，可提示的输入框是一个常见的需求，它允许用户在输入时从建议列表中选择选项。对于 Vue.js 开发人员来说，el-autocomplete 组件是满足这一需求的强大工具。本文将深入探讨 el-autocomplete 中 select 和 fetch-suggestion 属性的传参方式，帮助你轻松实现可提示输入框功能。

2. select 属性

select 属性允许你定义一个回调函数，当用户从下拉列表中选择一个选项时执行。它的参数包括：

item：所选选项的数据对象。
index：所选选项在下拉列表中的索引。
customParam：一个可选的自定义参数，可以在调用 select 方法时传递。

3. fetch-suggestion 属性

fetch-suggestion 属性允许你定义一个回调函数，从服务器获取建议。它的参数包括：

query：用户输入的查询字符串。
callback：一个函数，用于返回建议列表。
customParam：一个可选的自定义参数，可以在调用 fetch-suggestion 方法时传递。

4. 获取自定义传参和内部参数

在 select 和 fetch-suggestion 方法中，你可以通过以下方式获取自定义传参和内部参数：

select(item, index, { customParam }) { ... }
fetchSuggestions(query, callback, { customParam }) { ... }

5. 实例代码

让我们通过一个示例来展示如何使用 select 和 fetch-suggestion 属性。假设你正在构建一个可提示的输入框，用于选择商品：

<el-autocomplete v-model="value" :select="select" :fetch-suggestions="fetchSuggestions"></el-autocomplete>

export default {
  data() {
    return {
      value: '',
    };
  },
  methods: {
    select(item, index, { customParam }) {
      console.log(`选择了：${item.label}，自定义参数：${customParam}`);
    },
    fetchSuggestions(query, callback, { customParam }) {
      // 通过 HTTP 请求获取建议并返回
      this.$http.get('/api/suggestions', { params: { query, customParam } }).then(response => {
        callback(response.data);
      });
    },
  },
};