当前位置：首页 > VUE

vue下拉框实现

2026-01-22 09:43:45VUE

实现基础下拉框

使用 <select> 和 <option> 元素结合 v-model 实现数据绑定：

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

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

使用第三方组件库

Element UI 的下拉选择器实现：

vue下拉框实现

<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: '选项1'
      }],
      value: ''
    }
  }
}
</script>

自定义样式下拉框

通过 CSS 自定义原生下拉框样式：

select {
  padding: 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
}

select:focus {
  outline: none;
  border-color: #409eff;
}

实现多选下拉

添加 multiple 属性实现多选：

vue下拉框实现

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

动态加载选项

通过方法动态加载下拉选项：

methods: {
  loadOptions() {
    axios.get('/api/options').then(response => {
      this.options = response.data
    })
  }
},
mounted() {
  this.loadOptions()
}

表单验证集成

配合 VeeValidate 进行表单验证：

<validation-provider rules="required" v-slot="{ errors }">
  <select v-model="selectedOption">
    <option value="">请选择</option>
    <option value="1">选项1</option>
  </select>
  <span>{{ errors[0] }}</span>
</validation-provider>