当前位置：首页 > VUE

vue实现select筛选功能

2026-01-21 18:13:31VUE

基础实现

使用Vue的v-model绑定select选中的值，结合v-for渲染选项列表。示例代码：

<template>
  <select v-model="selectedOption">
    <option 
      v-for="option in options" 
      :key="option.value" 
      :value="option.value"
    >
      {{ option.label }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: '1', label: '选项1' },
        { value: '2', label: '选项2' }
      ]
    }
  }
}
</script>

动态筛选功能

结合计算属性实现动态筛选。当选项数据来源于API或需要过滤时：

vue实现select筛选功能

<template>
  <select v-model="selectedCategory">
    <option value="">全部</option>
    <option 
      v-for="cat in filteredCategories" 
      :key="cat.id" 
      :value="cat.id"
    >
      {{ cat.name }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedCategory: '',
      allCategories: [
        { id: 1, name: '电子产品' },
        { id: 2, name: '家居用品' }
      ]
    }
  },
  computed: {
    filteredCategories() {
      return this.allCategories.filter(
        cat => cat.name.includes(this.searchText)
      )
    }
  }
}
</script>

多级联动筛选

实现省市区三级联动等复杂筛选：

vue实现select筛选功能

<template>
  <select v-model="province" @change="loadCities">
    <option v-for="p in provinces" :value="p.id">{{ p.name }}</option>
  </select>

  <select v-model="city" :disabled="!province">
    <option v-for="c in cities" :value="c.id">{{ c.name }}</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      province: null,
      city: null,
      provinces: [],
      cities: []
    }
  },
  methods: {
    async loadCities() {
      this.cities = await fetchCities(this.province)
    }
  }
}
</script>

使用第三方组件

对于更复杂的需求，可以使用如Element UI的el-select组件：

<template>
  <el-select 
    v-model="selectedTags" 
    multiple
    filterable
    placeholder="请选择标签"
  >
    <el-option
      v-for="tag in tags"
      :key="tag.value"
      :label="tag.label"
      :value="tag.value"
    />
  </el-select>
</template>

样式定制

通过CSS自定义select样式：

select {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
}

select:focus {
  border-color: #409eff;
  outline: none;
}