Select

<SfSelect v-model="type" :options="types" />

Props

modelValue

• required: true

Текущие выбранные опции
Содержимое зависит от пропа isPropValue

options

• type: ISelectOption[]
• required: true

Массив опций для выпадающего списка

@example example

interface ISelectOption extends Record<string, any> {}

icon

• type: string
• default: ''

Слот для передачи иконки для компонента.

isPropValue

• type: boolean
• default: false

modelValue содержит идентификатор опции.

@example example

<SfSelect v-model="type" :options="types" isPropValue />

export default {
  data() {
    return {
      type: 1,
      options: [
        { id: 1, label: 'First Type' },
        { id: 2, label: 'Second Type' },
      ],
    };
  },
};

trackBy

• type: TrackByType
• default: 'id'

Ключ идентификатора опции.

@example example

type TrackByType = string | ((option: ISelectOption) => string);

<SfSelect v-model="type" :options="types" :trackBy="trackBy" isPropValue />

Можно явно передать свойство trackBy в виде строки, чтобы указать какой ключ опции является идентифиактором:

export default {
  data() {
    return {
      type: 1,
      options: [
        { uuid: 1, label: 'First Type' },
        { uuid: 2, label: 'Second Type' },
      ],

      trackBy: 'uuid',
    };
  },
};

Либо в виде функции:

export default {
  data() {
    return {
      type: 1,
      options: [
        { uuid: 1, idKey: 'uuid', label: 'First Type' },
        { uuid: 2, idKey: 'uuid', label: 'Second Type' },
      ],

      trackBy: (option) => option.idKey,
    };
  },
};

label

• type: string
• default: 'label'

Ключ названия опции.

@example example

<SfSelect v-model="type" :options="types" :label="labelKey" isPropValue />

export default {
  data() {
    return {
      type: 1,
      options: [
        { id: 1, title: 'First Type' },
        { id: 2, title: 'Second Type' },
      ],
      labelKey: 'title',
    };
  },
};

searchKeys

• type: string
• default: function(props) {<br/> return props.label;<br/>}

Ключи, по которым будет производиться поиск опций, по умолчанию равен свойству label, описанному выше.

@default function() { return this.label }

selectedLabel

• type: string
• default: function(props) {<br/> return props.label;<br/>}

Ключ названия выбранной опции, по умолчанию равен свойству label, описанному выше.

@default function() { return this.label }

optionIcon

• type: string
• default: ''

Ключ items[number] в котором находится иконка.

validator

• type: Validation
• default: () => (({}) as Validation)

Объект валидатора v$ из библиотеки vuelidate.

placeholder

• type: string
• default: ''

Значение атрибута placeholder.

subListLabel

• type: string
• default: ''

Ключ названия вложенных опций. Позволяет указать ключ, по которому в объекте опции option находится вложенный список, по аналогии с label.

canBeEmpty

• type: boolean
• default: false

Может ли value иметь значение falsy.

disabled

• type: boolean
• default: false

Добавляет атрибут disabled.

readonly

• type: boolean
• default: false

Добавляет атрибут readonly.

searchable

• type: boolean
• default: false

Включает поиск опций.

inputSize

• type: number
• default: null

Размер инпута.

multilevel

• type: boolean
• default: false

Включает вложенные списки опций. Для работы обязательно указание свойства sub-list-label.

@example example

У селекта нужно задать sub-list-label="sublist" для таких опций:

[
  {
    id: 1,
    label: 'First type',
    sublist: [{ id: 1, label: 'Sub option 1' }],
  },
  {
    id: 2,
    label: 'Second type',
    sublist: [{ id: 1, label: 'Sub option 1' }],
  },
];

multiple

• type: boolean
• default: false

Возможность выбора нескольких значений одновременно

@example modelValue

  [
    { id: 1, label: 'First type', ... },
    { id: 2, label: 'Second type', ... }
  ]

Или при указании isPropValue:

// value
[1, 2];

hideValidationIcon

• type: boolean
• default: true

Отображение иконки валидации.

showCheck

• type: boolean
• default: true

Events

Slots