当前位置：首页 > VUE

vue实现select

2026-01-13 04:18:17VUE

Vue 实现 Select 组件的方法

使用原生 HTML select 元素

在 Vue 中可以直接使用原生 HTML 的 <select> 元素，并通过 v-model 实现双向绑定。

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

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

使用第三方 UI 库

常见的 Vue UI 库都提供了功能丰富的 Select 组件：

Element UI 的 Select 组件

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

Ant Design Vue 的 Select 组件

<template>
<a-select v-model="value" style="width: 120px">
 <a-select-option v-for="item in options" :key="item.value">
   {{ item.label }}
 </a-select-option>
</a-select>
</template>

自定义 Select 组件

如果需要高度定制化的 Select 组件，可以自行实现：

<template>
  <div class="custom-select">
    <div class="selected" @click="toggleOptions">
      {{ selectedLabel || placeholder }}
    </div>
    <div class="options" v-show="showOptions">
      <div 
        v-for="option in options"
        @click="selectOption(option)"
        :class="{ active: option.value === modelValue }"
      >
        {{ option.label }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    modelValue: { type: [String, Number], default: '' },
    options: { type: Array, required: true },
    placeholder: { type: String, default: '请选择' }
  },
  data() {
    return {
      showOptions: false
    }
  },
  computed: {
    selectedLabel() {
      const option = this.options.find(opt => opt.value === this.modelValue)
      return option ? option.label : ''
    }
  },
  methods: {
    toggleOptions() {
      this.showOptions = !this.showOptions
    },
    selectOption(option) {
      this.$emit('update:modelValue', option.value)
      this.showOptions = false
    }
  }
}
</script>

<style>
.custom-select {
  position: relative;
  width: 200px;
}
.selected {
  padding: 8px 12px;
  border: 1px solid #ddd;
  cursor: pointer;
}
.options {
  position: absolute;
  width: 100%;
  border: 1px solid #ddd;
  background: white;
  z-index: 10;
}
.options div {
  padding: 8px 12px;
  cursor: pointer;
}
.options div:hover {
  background: #f5f5f5;
}
.active {
  background: #e6f7ff;
}
</style>

实现多选 Select

对于多选功能，可以使用 multiple 属性或第三方组件：

<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: [
        { text: '选项1', value: 'option1' },
        { text: '选项2', value: 'option2' },
        { text: '选项3', value: 'option3' }
      ]
    }
  }
}
</script>