当前位置：首页 > VUE

vue select实现

2026-01-12 10:09:26VUE

Vue Select 实现方法

基础 Select 实现

使用 Vue 的 <select> 和 v-model 双向绑定实现基础下拉选择：

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

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

使用第三方库 Vue Select

对于更复杂的需求，可以使用专门的 Vue Select 组件库：

安装 vue-select 包：
```
npm install vue-select
```

基本使用示例：


<template>
<v-select 
 v-model="selected" 
 :options="options"
 label="name"
/>
</template>

import vSelect from 'vue-select'

export default { components: { vSelect }, data() { return { selected: null, options: [ { id: 1, name: 'Option 1' }, { id: 2, name: 'Option 2' } ] } } }

```

自定义样式 Select

通过 CSS 自定义原生 select 样式：

<template>
  <div class="custom-select">
    <select v-model="selected">
      <option disabled value="">Please select</option>
      <option v-for="option in options" :value="option">
        {{ option }}
      </option>
    </select>
  </div>
</template>

<style>
.custom-select {
  position: relative;
  display: inline-block;
}

.custom-select select {
  appearance: none;
  padding: 8px 30px 8px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: url('data:image/svg+xml;utf8,<svg...') no-repeat right 10px center;
}
</style>

搜索功能实现

为 select 添加搜索过滤功能：

<template>
  <div>
    <input 
      v-model="searchQuery" 
      placeholder="Search options..."
    />
    <select v-model="selected">
      <option 
        v-for="option in filteredOptions" 
        :value="option"
      >
        {{ option }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      selected: '',
      options: ['Apple', 'Banana', 'Orange']
    }
  },
  computed: {
    filteredOptions() {
      return this.options.filter(option => 
        option.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

多选 Select 实现

实现支持多选的下拉菜单：

vue select实现

<template>
  <select v-model="selectedOptions" multiple>
    <option 
      v-for="option in options" 
      :value="option.value"
    >
      {{ option.text }}
    </option>
  </select>
</template>

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