vue实现下拉列表

Vue 实现下拉列表的方法

使用原生 HTML select 元素

在 Vue 中可以直接使用 HTML 的 <select> 和 <option> 元素创建下拉列表。通过 v-model 实现双向数据绑定。

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

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

使用第三方 UI 库

许多流行的 Vue UI 组件库都提供了更强大的下拉选择组件，如 Element UI、Vuetify 等。

Element UI 示例：

<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>

<script>
export default {
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }],
      value: ''
    }
  }
}
</script>

自定义下拉组件

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

<template>
  <div class="custom-dropdown">
    <div class="dropdown-header" @click="toggleDropdown">
      {{ selectedOption || '请选择' }}
      <span class="arrow">▼</span>
    </div>
    <ul class="dropdown-list" v-show="isOpen">
      <li 
        v-for="option in options" 
        @click="selectOption(option)"
        :class="{ active: option === selectedOption }"
      >
        {{ option }}
      </li>
    </ul>
  </div>
</template>

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

<style>
.custom-dropdown {
  position: relative;
  width: 200px;
}

.dropdown-header {
  padding: 8px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.dropdown-list {
  position: absolute;
  width: 100%;
  border: 1px solid #ccc;
  list-style: none;
  padding: 0;
  margin: 0;
  background: white;
  z-index: 1000;
}

.dropdown-list li {
  padding: 8px;
  cursor: pointer;
}

.dropdown-list li:hover {
  background-color: #f5f5f5;
}

.dropdown-list li.active {
  background-color: #e0e0e0;
}

.arrow {
  float: right;
}
</style>

使用 Vue 3 Composition API

在 Vue 3 中可以使用 Composition API 实现下拉列表功能。

<template>
  <select v-model="selectedValue">
    <option v-for="item in items" :value="item.value">
      {{ item.label }}
    </option>
  </select>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const selectedValue = ref('')
    const items = [
      { value: '1', label: '选项一' },
      { value: '2', label: '选项二' },
      { value: '3', label: '选项三' }
    ]

    return {
      selectedValue,
      items
    }
  }
}
</script>

以上方法提供了从简单到复杂的 Vue 下拉列表实现方案，可以根据项目需求选择适合的方式。