Select

封装选择器

提示

你也可以选择 ElSelectV2 替代这个组件

使用

基础用法

传入 data 数据，自动生成选项

请选择
<template>
  <pro-select v-model="select" :data="data" />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const select = ref('')
    const data = ref([
      { value: 'Go', label: 'go' },
      { value: 'JavaScript', label: 'javascript' },
      { value: 'Python', label: 'python' },
      { value: 'Dart', label: 'dart' },
      { value: 'V', label: 'v' },
    ])

    return {
      select,
      data,
    }
  },
})
</script>

控制不可选项目

将传入 data 数据中的某项设置为 disabled: true 即可

请选择
<template>
  <pro-select v-model="select" :data="list" />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const select = ref('')
    const list = ref([
      { value: 'Go', label: 'go', disabled: true },
      { value: 'JavaScript', label: 'javascript' },
      { value: 'Python', label: 'python' },
      { value: 'Dart', label: 'dart' },
      { value: 'V', label: 'v' },
    ])

    return {
      select,
      list,
    }
  },
})
</script>

配置绑定数据键值

通过 config 配置数据键值。value- v-model 绑定的键值、label-显示键值、disabled-控制不可选的键值、children-子分组的键值

请选择
<template>
  <pro-select v-model="select" :data="data" :config="config" />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const select = ref('')
    const config = ref({ value: 'label', label: 'value' })
    const data = ref([
      { value: 'Go', label: 'go' },
      { value: 'JavaScript', label: 'javascript' },
      { value: 'Python', label: 'python' },
      { value: 'Dart', label: 'dart' },
      { value: 'V', label: 'v' },
    ])

    return {
      select,
      config,
      data,
    }
  },
})
</script>

使用插槽

通过默认插槽可以自定义备选项

请选择
<template>
  <pro-select v-model="select" :data="data" :config="config">
    <template #default="{ item }">
      <span>{{ item.label }}</span>
      <span style="float: right">{{ item.value }}</span>
    </template>
  </pro-select>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const select = ref('')
    const config = ref({ value: 'label', label: 'value' })
    const data = ref([
      { value: 'Go', label: 'go' },
      { value: 'JavaScript', label: 'javascript' },
      { value: 'Python', label: 'python' },
      { value: 'Dart', label: 'dart' },
      { value: 'V', label: 'v' },
    ])

    return {
      select,
      config,
      data,
    }
  },
})
</script>

开启多选

当 multiple 为 true 时，启用多选。此时绑定的 model-value 为数组格式

请选择
<template>
  <pro-select v-model="select" :data="data" multiple />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const select = ref([])
    const data = ref([
      { value: 'Go', label: 'go' },
      { value: 'JavaScript', label: 'javascript' },
      { value: 'Python', label: 'python' },
      { value: 'Dart', label: 'dart' },
      { value: 'V', label: 'v' },
    ])

    return {
      select,
      data,
    }
  },
})
</script>

隐藏多余标签

默认情况下选中值会以 Tag 的形式展现，你也可以设置 collapse-tags 属性将它们合并为一段文字。 您可以使用 collapse-tags-tooltip 属性来启用鼠标悬停折叠文字以显示具体所选值的行为

collapse-tags:
请选择
collapse-tags-tooltip:
请选择
<template>
  <div>
    <span>collapse-tags: </span>
    <pro-select v-model="select" :data="data" multiple collapse-tags />
  </div>
  <div>
    <span>collapse-tags-tooltip: </span>
    <pro-select
      v-model="select"
      :data="data"
      multiple
      collapse-tags
      collapse-tags-tooltip
    />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const select = ref([])
    const data = ref([
      { value: 'Go', label: 'go' },
      { value: 'JavaScript', label: 'javascript' },
      { value: 'Python', label: 'python' },
      { value: 'Dart', label: 'dart' },
      { value: 'V', label: 'v' },
    ])

    return {
      select,
      data,
    }
  },
})
</script>

分组

通过 data 中的 children 字段配置可以轻松生成分组展示 (如果有多层分组，推荐使用 TreeSelect)

请选择
<template>
  <pro-select v-model="select" :data="data" />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const select = ref('')
    const data = ref([
      {
        label: 'Popular cities',
        children: [
          {
            value: 'Shanghai',
            label: 'Shanghai',
          },
          {
            value: 'Beijing',
            label: 'Beijing',
          },
        ],
      },
      {
        label: 'City name',
        children: [
          {
            value: 'Chengdu',
            label: 'Chengdu',
          },
          {
            value: 'Shenzhen',
            label: 'Shenzhen',
          },
          {
            value: 'Guangzhou',
            label: 'Guangzhou',
          },
          {
            value: 'Dalian',
            label: 'Dalian',
          },
        ],
      },
    ])

    return {
      select,
      data,
    }
  },
})
</script>

配置

参数说明类型可选值默认值
v-model绑定值array--
data绑定数据array--
config配置绑定数据键值object-{ value: ‘value’, label: ‘label’, disabled: ‘disabled’, children: ‘children’ }
multiple是否多选boolean-false
disabled是否禁用boolean-false
size尺寸stringlarge / default /small-
clearable是否可以清空选项boolean-false
collapse-tags多选时是否将选中值按文字的形式展示boolean-false
collapse-tags-tooltip当鼠标悬停折叠标签的文本时是否显示所有选定的标签。 当 collapse-tags 是 true 生效boolean-false
multiple-limit多选时用户最多可以选择的项目数，为 0 则不限制number-0
nameselect input 的 name 属性string--
effectTooltip 主题stringdark / lightlight
autocompleteselect input 的 autocomplete 属性stringon / offoff
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搜索条件无匹配时显示的文字，也可以使用#empty 设置string-无匹配数据
no-data-text选项为空时显示的文字，也可以使用#empty 设置string-无数据
popper-classSelect 下拉框的类名string--
reserve-keyword多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词boolean-false
default-first-option在输入框按下回车，选择第一个匹配项。配合 filterable 或 remote 使用boolean-false
teleported是否将 Select 的下拉菜单 teleport 至 bodyboolean-true
persistent选择下拉目时不活动同时persistent 是false，选择下拉目将被销毁boolean-true
automatic-dropdown对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单boolean-false
clear-icon自定义清空图标的类名string / Component-CircleClose
fit-input-width下拉框的宽度是否与输入框相同boolean—false
suffix-icon自定义后缀图标组件string / Component—ArrowUp
tag-type标签类型stringsuccess / info / warning / dangerinfo
validate-event输入时是否触发表单的校验boolean-true

事件

名称说明类型
change选中值发生变化时触发(value: any) => void
visible-change下拉框出现/隐藏时触发(visible: boolean) => void
remove-tag多选模式下移除 tag 时触发(tagValue: any) => void
clear可清空的单选模式下用户点击清空按钮时触发() => void
blur当 input 失去焦点时触发(event: FocusEvent) => void
focus当 input 获得焦点时触发(event: FocusEvent) => void

插槽

名称说明类型
-自定插槽内容{ item }