Select

When there are plenty of options, use a drop-down menu to display and select desired ones

Tip

You can choose ElSelectV2 instead of this component

Use

Basic Use

Set data attribute will automatic generate options

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

Disabled State

Set the disabled attribute in prop data

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

Configure binding data key

Set config attribute. value- v-model bind key; label- display key; disabled- Disabled key; children- children key

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

Slots

You can customize HTML templates for options

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

Basic multiple select

Set multiple attribute to enable multiple mode. In this case, the value of v-model will be an array of selected options

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

Hide extra tags

You can collapse tags to a text by using collapse-tags attribute. You can check them when mouse hover collapse text by using collapse-tags-tooltip attribute.

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>

Grouping

Set children in data will automatic generate the children options (If there is a multi-layer hierarchies, TreeSelect is recommended)

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

Props

NameDescriptionTypeOptionsDefault
v-modelbinding valuearray--
databinding dataarray--
configconfig the key of dataobject-{ value: ‘value’, label: ‘label’, disabled: ‘disabled’, children: ‘children’ }
multiplewhether multiple-select is activatedboolean-false
disabledwhether disabledboolean-false
sizecomponent sizestringlarge / default /small-
clearablewhether clearableboolean-false
collapse-tagswhether to collapse tags to a text when multiple selectingboolean-false
collapse-tags-tooltipwhether show all selected tags when mouse hover text of collapse-tags. To use this, collapse-tags must be trueboolean-false
multiple-limitmaximum number of options user can select when multiple is true. No limit when set to 0number-0
namethe name attribute of select inputstring--
effectTooltip themestringdark / lightlight
autocompletethe autocomplete attribute of select inputstringon /offoff
placeholderplaceholderstring-Select
filterablewhether Select is filterableboolean-false
allow-createwhether creating new items is allowed. To use this, filterable must be trueboolean-false
filter-methodcustom filter methodfunction--
remotewhether options are loaded from serverboolean-false
remote-methodcustom remote search methodfunction--
loadingwhether Select is loading data from serverboolean-false
loading-textdisplayed text while loading data from serverstring-Loading
no-match-textdisplayed text when no data matches the filtering query, you can also use slot emptystring-No matching data
no-data-textdisplayed text when there is no options, you can also use slot emptystring-No data
popper-classcustom class name for Select’s dropdownstring--
reserve-keywordwhen multiple and filter is true, whether to reserve current keyword after selecting an optionboolean-false
default-first-optionselect first matching option on enter key. Use with filterable or remoteboolean-false
teleportedwhether select dropdown is teleported to the bodyboolean-true
persistentwhen select dropdown is inactive and persistent is false, select dropdown will be destroyedboolean-true
automatic-dropdownfor non-filterable Select, this prop decides if the option menu pops up when the input is focusedboolean-false
clear-iconCustom clear icon classstring / Component-CircleClose
fit-input-widthwhether the width of the dropdown is the same as the inputbooleanfalse
suffix-iconCustom suffix icon componentstring / ComponentArrowUp
tag-typetag typestringsuccess / info / warning / dangerinfo
validate-eventwhether to trigger form validationboolean-true

Events

NameDescriptionParameters
changetriggers when the selected value changescurrent selected value
visible-changetriggers when the dropdown appears/disappearstrue when it appears, and false otherwise
remove-tagtriggers when a tag is removed in multiple moderemoved tag value
cleartriggers when the clear icon is clicked in a clearable Select
blurtriggers when Input blurs(event: Event)
focustriggers when Input focuses(event: Event)

Slots

NameDescription
-Custom content. The parameter is { item }