当前位置：首页 > VUE

vue实现筛选录入

2026-02-24 13:09:52VUE

Vue实现筛选录入功能

筛选录入功能通常结合输入框和下拉选择组件，实现用户输入时动态筛选匹配项。以下是实现方法：

基础实现方案

使用Vue的v-model和@input事件监听输入变化，结合计算属性或方法过滤数据：

<template>
  <div>
    <input 
      v-model="inputValue"
      @input="filterOptions"
      placeholder="输入筛选条件"
    />
    <ul v-if="filteredOptions.length">
      <li 
        v-for="option in filteredOptions" 
        :key="option.value"
        @click="selectOption(option)"
      >
        {{ option.label }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      options: [
        { label: '苹果', value: 'apple' },
        { label: '香蕉', value: 'banana' },
        { label: '橙子', value: 'orange' }
      ],
      filteredOptions: []
    }
  },
  methods: {
    filterOptions() {
      this.filteredOptions = this.options.filter(option => 
        option.label.includes(this.inputValue)
      )
    },
    selectOption(option) {
      this.inputValue = option.label
      this.filteredOptions = []
    }
  }
}
</script>

使用第三方组件库

Element UI的el-autocomplete组件可直接实现该功能：

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

<script>
export default {
  data() {
    return {
      inputValue: '',
      options: [
        { value: 'vue', label: 'Vue' },
        { value: 'react', label: 'React' }
      ]
    }
  },
  methods: {
    querySearch(queryString, cb) {
      const results = queryString
        ? this.options.filter(option => 
            option.label.includes(queryString)
          )
        : this.options
      cb(results)
    },
    handleSelect(item) {
      console.log(item)
    }
  }
}
</script>

高级功能实现

添加防抖处理优化性能：

methods: {
  filterOptions: _.debounce(function() {
    this.filteredOptions = this.options.filter(option =>
      option.label.toLowerCase().includes(this.inputValue.toLowerCase())
    )
  }, 300)
}

样式优化

为下拉列表添加基础样式：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ddd;
  max-height: 200px;
  overflow-y: auto;
}
li {
  padding: 8px 12px;
  cursor: pointer;
}
li:hover {
  background-color: #f5f5f5;
}

注意事项