element中el-autocomplete的常见用法示例

当使用 Vue.js 和 Element UI 搭建网站时，使用 el-autocomplete 组件可以实现一个自动完成的输入框。以下是 el-autocomplete 的常见用法示例：

基本用法

使用 v-model 在父组件中绑定输入框的值，使用 fetchSuggestions 方法获取自动完成的选项列表：

<template>
  <el-autocomplete
    v-model="inputValue"
    :fetch-suggestions="fetchSuggestions"
    placeholder="请输入内容">
  </el-autocomplete>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },

  methods: {
    fetchSuggestions(queryString, cb) {
      var options = [
        {value: '选项1', id: '1'},
        {value: '选项2', id: '2'},
        {value: '选项3', id: '3'}
      ];
      var results = queryString ? options.filter(this.createFilter(queryString)) : options;
      cb(results);
    },

    createFilter(queryString) {
      return option => {
        return option.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1;
      };
    }
  }
}
</script>

在上面示例代码中，定义了一个 fetchSuggestions 方法用来获取自动完成选项列表。这个方法接收两个参数：queryString 表示用户输入的值，cb 表示自动完成选项列表。

在 fetchSuggestions 方法中创建了一个选项数组 options，并通过 createFilter 方法过滤出符合用户输入的选项。最后将过滤出的选项作为 cb 的参数传递给 el-autocomplete 组件。

自定义输入提示

使用 slot 可以自定义输入提示：

<template>
  <el-autocomplete
    v-model="inputValue"
    :fetch-suggestions="fetchSuggestions"
    placeholder="请输入内容">
    <template slot="suggestion" slot-scope="{ item }">
      <div class="custom-item">
        {{ item.value }} (id: {{ item.id }})
      </div>
    </template>
  </el-autocomplete>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },

  methods: {
    fetchSuggestions(queryString, cb) {
      var options = [
        {value: '选项1', id: '1'},
        {value: '选项2', id: '2'},
        {value: '选项3', id: '3'}
      ];
      var results = queryString ? options.filter(this.createFilter(queryString)) : options;
      cb(results);
    },

    createFilter(queryString) {
      return option => {
        return option.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1;
      };
    }
  }
}
</script>

在上面示例代码中，使用 slot 自定义了 el-autocomplete 组件中选项的显示内容，显示了选项的 value 和 id 值。

以上就是 el-autocomplete 组件的常见用法示例。