程序员scholar
  • Element-UI
  • 表单组件
scholar
2024-08-12
目录

选择器（Select）

# 选择器（Select）

Element-UI 的选择器组件用于在一组选项中选择一个或多个选项。当选项过多时，可以使用下拉菜单展示并选择内容。支持单选和多选模式，并提供多种配置选项以满足复杂的使用场景。

提示

选择器（Select）组件官方文档：https://element.eleme.cn/#/zh-CN/component/select (opens new window)

# 1. 基本用法

基本语法：在 Vue 组件中使用 <el-select> 和 <el-option> 标签创建一个选择器。可以通过 v-model 绑定选择器的值，并通过子组件 <el-option> 定义选项列表。

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

<script>
export default {
  data() {
    return {
      selectedValue: '', // 选择器的绑定值
      options: [         // 选项列表
        { value: 'option1', label: '选项 1' },
        { value: 'option2', label: '选项 2' },
        { value: 'option3', label: '选项 3' }
      ]
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
  • v-model 绑定：通过 v-model 绑定变量 selectedValue 控制选择器的值。当用户选择不同的选项时，selectedValue 会自动更新。
  • v-for 遍历：v-for 指令用于遍历 options 数组。item 是当前迭代的选项对象。
    • item.value 是选项的实际值，与 v-model 绑定的变量 selectedValue 对应。当用户选择某个选项时，selectedValue 将更新为该选项的 value。
    • item.label 是选项的显示文本，用户在界面上看到的文本。
  • 选项绑定关系：页面上显示的选项由 label 决定，而选项的 value 决定了选择器绑定变量的实际值。
  • image-20240807231228341

# Select 属性

参数 说明 类型 可选值 默认值
value / v-model 绑定值 boolean / string / number — —
multiple 是否多选 boolean — false
disabled 是否禁用 boolean — false
value-key 作为 value 唯一标识的键名，绑定值为对象类型时必填 string — value
size 输入框尺寸 string medium/small/mini —
clearable 是否可以清空选项 boolean — false
collapse-tags 多选时是否将选中值按文字的形式展示 boolean — false
multiple-limit 多选时用户最多可以选择的项目数，为 0 则不限制 number — 0
name select input 的 name 属性 string — —
autocomplete select input 的 autocomplete 属性 string — off
auto-complete 下个主版本弃用 string — off
placeholder 占位符 string — 请选择
filterable 是否可搜索 boolean — false
allow-create 是否允许用户创建新条目，需配合 filterable 使用 boolean — false
filter-method 自定义搜索方法 function — —
remote 是否为远程搜索 boolean — false
remote-method 远程搜索方法 function — —
loading 是否正在从远程获取数据 boolean — false
loading-text 远程加载时显示的文字 string — 加载中
no-match-text 搜索条件无匹配时显示的文字，也可以使用 slot="empty" 设置 string — 无匹配数据
no-data-text 选项为空时显示的文字，也可以使用 slot="empty" 设置 string — 无数据
popper-class Select 下拉框的类名 string — —
reserve-keyword 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 boolean — false
default-first-option 在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用 boolean — false
popper-append-to-body 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false boolean — true
automatic-dropdown 对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单 boolean — false

# Select 事件

事件名称 说明 回调参数
change 选中值发生变化时触发 目前的选中值
visible-change 下拉框出现/隐藏时触发 出现则为 true，隐藏则为 false
remove-tag 多选模式下移除 tag 时触发 移除的 tag 值
clear 可清空的单选模式下用户点击清空按钮时触发 —
blur 当 input 失去焦点时触发 (event: Event)
focus 当 input 获得焦点时触发 (event: Event)

# Select 插槽

名称 说明
— Option 组件列表
prefix Select 组件头部内容
empty 无选项时的列表

# Option Group 属性

参数 说明 类型 可选值 默认值
label 分组的组名 string — —
disabled 是否将该分组下所有选项置为禁用 boolean — false

# Option 属性

参数 说明 类型 可选值 默认值
value 选项的值 string/number/object — —
label 选项的标签，若不设置则默认与 value 相同 string/number — —
disabled 是否禁用该选项 boolean — false

# Select 方法

方法名 说明 参数
focus 使 input 获取焦点 —
blur 使 input 失去焦点，并隐藏下拉框 —

# 2. 常见选择器示例

# 基础选择器

通过 v-model 绑定值来实时更新选择器内容。

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

<script>
export default {
  data() {
    return {
      selectedValue: '', // 选择器的绑定值
      options: [         // 选项列表
        { value: 'option1', label: '选项 1' },
        { value: 'option2', label: '选项 2' },
        { value: 'option3', label: '选项 3' }
      ]
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

  • 基本选择：用户可以通过点击下拉箭头或输入框选择选项，选择后 selectedValue 会自动更新。

  • v-for 遍历：options 数组包含选项对象，每个对象具有 value 和 label 属性。v-for 遍历 options 数组生成 <el-option> 元素，其中：

    • item.value 是每个选项的值，与 v-model 绑定的变量 selectedValue 对应。当用户选择某个选项时，selectedValue 将更新为该选项的 value。
    • item.label 是用户在界面上看到的选项名称。

  • image-20240807231245312

# 多选选择器

通过 multiple 属性启用多选模式。

<template>
  <el-select v-model="selectedValues" multiple 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 {
      selectedValues: [], // 多选绑定值
      options: [          // 选项列表
        { value: 'option1', label: '选项 1' },
        { value: 'option2', label:'选项 2' },
        { value: 'option3', label: '选项 3' }
      ]
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
  • 多选模式：通过 multiple 属性开启多选模式，选择多个选项时会将其值保存到 selectedValues 数组中。
  • v-for 遍历：遍历 options 数组生成 <el-option> 元素，其中 item.value 和 item.label 用于分别指定选项的实际值和显示文本。
  • image-20240807231438897

# 可搜索选择器

通过 filterable 属性启用搜索功能。

<template>
  <el-select v-model="selectedValue" filterable 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 {
      selectedValue: '', // 搜索绑定值
      options: [         // 选项列表
        { value: 'option1', label: '选项 1' },
        { value: 'option2', label: '选项 2' },
        { value: 'option3', label: '选项 3' }
      ]
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
  • 搜索功能：通过 filterable 属性启用，用户可以在输入框中输入内容来过滤选项。
  • v-for 遍历：同样使用 v-for 遍历选项列表生成 <el-option> 元素。
  • image-20240807232011259

# 可清空单选

通过 clearable 属性允许用户清空当前选择，仅适用于单选。

<template>
  <el-select v-model="selectedValue" clearable placeholder="可清空">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>
</template>
1
2
3
4
5
6
7
8
9
10
  • 可清空功能：在单选模式下，用户可以点击输入框尾部的清空按钮清除当前选择。
  • v-for 遍历：遍历选项列表生成 <el-option>。
  • image-20240807232122420

# 分组选择器

使用 el-option-group 对备选项进行分组，label 属性为分组名。



 




 




 
 





























<template>
  <el-select v-model="selectedValue" placeholder="请选择">
    <el-option-group
      v-for="group in optionGroups"
      :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>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '', // 选择器的绑定值
      optionGroups: [    // 选项分组
        {
          label: '分组 1',
          options: [
            { value: 'group1-option1', label: '选项 1-1' },
            { value: 'group1-option2', label: '选项 1-2' }
          ]
        },
        {
          label: '分组 2',
          options: [
            { value: 'group2-option1', label: '选项 2-1' },
            { value: 'group2-option2', label: '选项 2-2' }
          ]
        }
      ]
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
  • 分组选项：通过 el-option-group 可以将选项进行逻辑分组，分组名通过 label 属性指定。
  • v-for 遍历：
    • 外层 v-for 遍历 optionGroups 数组生成分组，group.label 用于设置分组名称。
    • 内层 v-for 遍历每个分组的 options 数组生成选项。
  • image-20240808035318518

# 禁用状态选择器

通过 disabled 属性禁用整个选择器或某个选项。

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

<script>
export default {
  data() {
    return {
      selectedValue: '', // 选择器的绑定值
      options: [         // 选项列表
        { value: 'option1', label: '选项 1', disabled: false },
        { value: 'option2', label: '选项 2', disabled: true },
        { value: 'option3', label: '选项 3', disabled: false }
      ]
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
  • 禁用选项：通过 disabled 属性禁用整个选择器或特定选项。
  • v-for 遍历：遍历 options 数组生成选项，同时根据 item.disabled 动态设置选项的禁用状态。
  • image-20240808035400810

# 可创建新条目的选择器

通过 allow-create 和 filterable 属性允许用户创建新的条目。

<template>
  <el-select v-model="selectedValue" filterable allow-create 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 {
      selectedValue: '', // 创建条目绑定值
      options: [         // 选项列表
        { value: 'option1', label: '选项 1' },
        { value: 'option2', label: '选项 2' },
        { value: 'option3', label: '选项 3' }
      ]
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
  • 创建条目功能：通过 allow-create 属性启用，用户可以输入并选择未在选项列表中的条目。
  • v-for 遍历：遍历选项列表生成 <el-option> 元素。
  • image-20240808035649787

# 远程搜索选择器

通过 remote 和 remote-method 属性实现远程搜索功能。

<template>
  <el-select
    v-model="selectedValue"
    filterable
    remote
    :remote-method="remoteSearch"
    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 {
      selectedValue: '', // 远程搜索绑定值
      options: []        // 远程选项列表
    };
  },
  methods: {
    remoteSearch(query) {
      if (query !== '') {
        // 模拟远程搜索
        this.options = [
          { value: 'remote1', label: '远程 1' },
          { value: 'remote2', label: '远程 2' },
          { value: 'remote3', label: '远程 3' }
        ].filter(item => item.label.toLowerCase().includes(query.toLowerCase()));
      } else {
        this.options = [];
      }
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
  • 远程搜索功能：通过 remote 和 remote-method 属性启用，在输入框中输入内容时，会调用 remoteSearch 方法从远程获取匹配的选项。
  • v-for 遍历：遍历 options 数组动态生成选项，根据用户输入实时更新。选项 item.value 和 item.label 用于定义选择器的值和显示文本。
  • image-20240808035837797

总结

  • 灵活的属性配置：通过 multiple、filterable、remote 等属性可以控制选择器的行为。
  • 丰富的事件处理：支持 change、blur、focus 等事件，允许开发者处理用户交互。
  • 多样的插槽与方法：提供多种插槽和方法，以增强选择器的功能性和可定制性。
  • 分组与禁用：支持通过 el-option-group 进行分组管理，并支持禁用状态。
编辑此页 (opens new window)
上次更新: 2024/12/28, 18:32:08
计数器（InputNumber）
级联选择器（Cascader）

← 级联选择器（Cascader）→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar