当前位置：首页 > VUE

vue实现动态下拉

2026-02-17 06:52:58VUE

Vue 实现动态下拉菜单

动态下拉菜单通常指根据用户输入或数据变化实时更新的下拉选项。以下是几种常见实现方式：

使用 v-for 动态渲染选项

通过 v-for 指令绑定数据数组动态生成下拉选项：

vue实现动态下拉

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

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { id: 1, value: 'opt1', text: 'Option 1' },
        { id: 2, value: 'opt2', text: 'Option 2' }
      ]
    }
  }
}
</script>

异步加载远程数据

结合 axios 等库实现异步数据加载：

<template>
  <select v-model="selectedCity" @focus="loadCities">
    <option v-for="city in cities" :key="city.id" :value="city.id">
      {{ city.name }}
    </option>
  </select>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      selectedCity: null,
      cities: []
    }
  },
  methods: {
    async loadCities() {
      const response = await axios.get('/api/cities');
      this.cities = response.data;
    }
  }
}
</script>

级联选择实现

实现省市联动等级联选择效果：

vue实现动态下拉

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

  <select v-model="selectedCity">
    <option v-for="c in cities" :key="c.id" :value="c.id">
      {{ c.name }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedProvince: null,
      selectedCity: null,
      provinces: [],
      cities: []
    }
  },
  methods: {
    loadCities() {
      this.cities = this.getCitiesByProvince(this.selectedProvince);
    }
  }
}
</script>

使用第三方组件库

Element UI 的 el-select 组件示例：

<template>
  <el-select v-model="value" filterable placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

带搜索过滤功能

实现本地搜索过滤的下拉菜单：

<template>
  <input v-model="searchText" placeholder="搜索...">
  <select>
    <option 
      v-for="item in filteredOptions" 
      :key="item.id" 
      :value="item.value">
      {{ item.text }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      options: [/*...*/]
    }
  },
  computed: {
    filteredOptions() {
      return this.options.filter(option => 
        option.text.toLowerCase().includes(this.searchText.toLowerCase())
      );
    }
  }
}
</script>