当前位置：首页 > VUE

vue实现多选搜索

2026-02-19 10:12:03VUE

实现多选搜索的基本思路

在Vue中实现多选搜索功能，通常需要结合输入框和下拉选择框，允许用户输入关键词并选择多个选项。可以通过以下方式实现：

使用第三方组件库如Element UI、Ant Design Vue等提供的多选搜索组件。
自定义实现，结合Vue的响应式特性和事件处理。

使用Element UI实现多选搜索

Element UI提供了el-select组件，结合filterable和multiple属性可以轻松实现多选搜索功能。

vue实现多选搜索

<template>
  <el-select
    v-model="selectedItems"
    multiple
    filterable
    placeholder="请选择或搜索"
    @change="handleChange"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: [],
      options: [
        { value: '1', label: '选项1' },
        { value: '2', label: '选项2' },
        { value: '3', label: '选项3' }
      ]
    }
  },
  methods: {
    handleChange(value) {
      console.log('选中的值:', value)
    }
  }
}
</script>

自定义实现多选搜索

如果需要完全自定义实现，可以结合输入框和复选框来实现多选搜索功能。

vue实现多选搜索

<template>
  <div>
    <input
      v-model="searchQuery"
      placeholder="搜索..."
      @input="filterOptions"
    />
    <div v-for="option in filteredOptions" :key="option.value">
      <input
        type="checkbox"
        :id="option.value"
        :value="option.value"
        v-model="selectedItems"
      />
      <label :for="option.value">{{ option.label }}</label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      selectedItems: [],
      options: [
        { value: '1', label: '选项1' },
        { value: '2', label: '选项2' },
        { value: '3', label: '选项3' }
      ],
      filteredOptions: []
    }
  },
  created() {
    this.filteredOptions = [...this.options]
  },
  methods: {
    filterOptions() {
      this.filteredOptions = this.options.filter(option =>
        option.label.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

实现远程搜索

如果需要从远程服务器获取搜索选项，可以使用异步方法。

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

<script>
export default {
  data() {
    return {
      selectedItems: [],
      options: [],
      loading: false
    }
  },
  methods: {
    remoteMethod(query) {
      if (query) {
        this.loading = true
        // 模拟API调用
        setTimeout(() => {
          this.options = [
            { value: '1', label: query + '结果1' },
            { value: '2', label: query + '结果2' }
          ]
          this.loading = false
        }, 500)
      } else {
        this.options = []
      }
    }
  }
}
</script>

多选搜索的性能优化

当选项数量较大时，可以考虑以下优化措施：

使用虚拟滚动技术，只渲染可视区域内的选项。
对搜索功能进行防抖处理，减少不必要的过滤操作。
在远程搜索时，设置合理的延迟和取消机制。

// 防抖示例
methods: {
  filterOptions: _.debounce(function() {
    this.filteredOptions = this.options.filter(option =>
      option.label.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }, 300)
}

以上方法提供了在Vue中实现多选搜索功能的不同方案，可以根据具体需求选择适合的实现方式。