vue 实现下拉选项

Vue 实现下拉选项的方法

使用原生 HTML <select> 和 <option>

在 Vue 模板中可以直接使用 HTML 的原生下拉菜单组件，通过 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: '1' },
        { text: '选项2', value: '2' },
        { text: '选项3', value: '3' }
      ]
    }
  }
}
</script>

使用第三方 UI 库（如 Element UI）

Element UI 提供了更丰富的下拉选择组件 el-select，支持搜索、多选等功能。

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

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

动态加载选项数据

可以通过异步请求从后端获取选项数据，动态渲染下拉菜单。

<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: []
    }
  },
  mounted() {
    this.fetchOptions()
  },
  methods: {
    fetchOptions() {
      // 模拟异步请求
      setTimeout(() => {
        this.options = [
          { text: '动态选项1', value: '1' },
          { text: '动态选项2', value: '2' },
          { text: '动态选项3', value: '3' }
        ]
      }, 1000)
    }
  }
}
</script>

自定义下拉组件

可以创建自定义的下拉组件，实现更复杂的功能和样式。

<template>
  <div class="custom-select">
    <div class="selected" @click="toggleDropdown">
      {{ selectedOption.text || '请选择' }}
      <span class="arrow">▼</span>
    </div>
    <div class="options" v-show="isOpen">
      <div
        v-for="option in options"
        :key="option.value"
        @click="selectOption(option)"
        class="option">
        {{ option.text }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      isOpen: false,
      selectedOption: {}
    }
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen
    },
    selectOption(option) {
      this.selectedOption = option
      this.$emit('input', option.value)
      this.isOpen = false
    }
  }
}
</script>

<style>
.custom-select {
  position: relative;
  width: 200px;
}
.selected {
  padding: 8px;
  border: 1px solid #ccc;
  cursor: pointer;
}
.options {
  position: absolute;
  width: 100%;
  border: 1px solid #ccc;
  background: white;
}
.option {
  padding: 8px;
  cursor: pointer;
}
.option:hover {
  background: #f0f0f0;
}
.arrow {
  float: right;
}
</style>

这些方法涵盖了从基础到高级的下拉菜单实现方式，可以根据项目需求选择合适的方案。原生 HTML 方案简单直接，第三方库提供了更多功能，而自定义组件则可以实现完全定制化的效果。