当前位置：首页 > 前端教程

elementui autoselect

2026-01-15 18:45:48前端教程

ElementUI AutoSelect 功能实现

ElementUI 本身没有直接提供 AutoSelect 组件，但可以通过 el-autocomplete 或结合 el-select 与远程搜索实现类似功能。以下是两种常见的实现方式：

使用 el-autocomplete 实现自动补全选择

通过 el-autocomplete 组件实现输入时自动匹配选项并选择的功能：

<template>
  <el-autocomplete
    v-model="selectedValue"
    :fetch-suggestions="querySearch"
    placeholder="请输入内容"
    @select="handleSelect"
  ></el-autocomplete>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { value: '选项1', label: '黄金糕' },
        { value: '选项2', label: '双皮奶' }
      ]
    }
  },
  methods: {
    querySearch(queryString, cb) {
      const results = queryString
        ? this.options.filter(item => 
            item.label.toLowerCase().includes(queryString.toLowerCase())
          )
        : this.options
      cb(results)
    },
    handleSelect(item) {
      console.log('选中:', item)
    }
  }
}
</script>

结合 el-select 与远程搜索

若需要下拉选择样式，可使用 el-select 的远程搜索功能：

<template>
  <el-select
    v-model="selectedValue"
    filterable
    remote
    :remote-method="remoteMethod"
    :loading="loading"
    placeholder="请输入关键词"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [],
      loading: false
    }
  },
  methods: {
    remoteMethod(query) {
      if (query) {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.options = [
            { value: '选项1', label: query + ' - 结果1' },
            { value: '选项2', label: query + ' - 结果2' }
          ]
        }, 200)
      } else {
        this.options = []
      }
    }
  }
}
</script>

自定义 AutoSelect 组件

如需更复杂的功能，可封装自定义组件：

<template>
  <div class="auto-select">
    <el-input
      v-model="searchText"
      @input="onInput"
      @focus="onFocus"
      placeholder="搜索并选择"
    />
    <el-select
      v-model="innerValue"
      v-show="showDropdown"
      @change="onChange"
    >
      <el-option
        v-for="item in filteredOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>
</template>

<script>
export default {
  props: ['value', 'options'],
  data() {
    return {
      searchText: '',
      innerValue: this.value,
      showDropdown: false
    }
  },
  computed: {
    filteredOptions() {
      return this.options.filter(option => 
        option.label.includes(this.searchText)
      )
    }
  },
  methods: {
    onInput() {
      this.showDropdown = true
    },
    onFocus() {
      this.showDropdown = true
    },
    onChange(value) {
      this.$emit('input', value)
      this.showDropdown = false
    }
  }
}
</script>