vue下拉框实现

Vue 下拉框实现方法

使用 Vue 实现下拉框可以通过原生 HTML <select> 元素或第三方 UI 库（如 Element UI、Ant Design Vue）完成。以下是几种常见实现方式：

原生 HTML 实现

通过 Vue 的 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: [
        { text: '选项1', value: '1' },
        { text: '选项2', value: '2' }
      ]
    }
  }
}
</script>

使用 Element UI 的 <el-select>

安装 Element UI 后直接使用组件：

<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' }
      ]
    }
  }
}
</script>

动态加载选项

通过 API 异步获取下拉选项数据：

<template>
  <select v-model="selectedOption">
    <option v-for="option in dynamicOptions" :value="option.id">
      {{ option.name }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      dynamicOptions: []
    }
  },
  async created() {
    const response = await fetch('/api/options')
    this.dynamicOptions = await response.json()
  }
}
</script>

带搜索功能的下拉框

使用 Element UI 的过滤功能：

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

多选下拉框

添加 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: '1' },
        { text: '选项2', value: '2' }
      ]
    }
  }
}
</script>