当前位置：首页 > VUE

vue element实现select

2026-02-19 15:08:54VUE

使用 Vue 和 Element UI 实现 Select 组件

Element UI 提供了强大的 el-select 组件，可以轻松实现下拉选择功能。以下是一个完整的实现示例：

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

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

常用属性和功能

el-select 组件支持多种属性和功能：

基本属性

v-model: 绑定选中的值
placeholder: 占位文本
disabled: 禁用状态
clearable: 可清空选项
multiple: 多选模式

<el-select v-model="selectedValue" placeholder="请选择" clearable multiple>

远程搜索 使用 filterable 和 remote 实现远程搜索功能：

<el-select
  v-model="selectedValue"
  filterable
  remote
  :remote-method="remoteMethod"
  :loading="loading">
</el-select>

分组选项 使用 el-option-group 实现分组：

<el-select v-model="selectedValue">
  <el-option-group
    v-for="group in options"
    :key="group.label"
    :label="group.label">
    <el-option
      v-for="item in group.options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-option-group>
</el-select>

自定义模板

可以自定义选项的显示内容：

<el-select v-model="selectedValue">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
    <span style="float: left">{{ item.label }}</span>
    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
  </el-option>
</el-select>

表单验证

结合 el-form 实现表单验证：

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

<script>
export default {
  data() {
    return {
      form: {
        selectedValue: ''
      },
      rules: {
        selectedValue: [
          { required: true, message: '请选择', trigger: 'change' }
        ]
      }
    }
  }
}
</script>