# MultiSelect 多选框

# Example

Use v-model to bind selected values, and options as select options.

<template>
  <div class="uiv">
    <multi-select v-model="selected" :options="options" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: [],
      options: [
        { value: 1, label: 'Option1' },
        { value: 2, label: 'Option2' },
        { value: 3, label: 'Option3' },
        { value: 4, label: 'Option4' },
        { value: 5, label: 'Option5' },
      ],
    }
  },
}
</script>

# Multiple Limit

Use limit to restrict the maximum number of options user can select, no limit when set to 0.

<template>
  <div class="uiv">
    <multi-select v-model="selected" :options="options" :limit="3" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: [],
      options: [
        { value: 1, label: 'Option1' },
        { value: 2, label: 'Option2' },
        { value: 3, label: 'Option3' },
        { value: 4, label: 'Option4' },
        { value: 5, label: 'Option5' },
      ],
    }
  },
}
</script>

# Optional Sizes

Optional sizes sm and lg are supported. You can also add block prop to quickly apply width: 100% style to the component.

<template>
  <section class="uiv">
    <div>
      <multi-select v-model="selected" :options="options" size="sm" />
    </div>
    <br />
    <div>
      <multi-select v-model="selected" :options="options" />
    </div>
    <br />
    <div>
      <multi-select v-model="selected" :options="options" size="lg" />
    </div>
    <br />
    <div>
      <multi-select v-model="selected" :options="options" size="lg" block />
    </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      selected: [],
      options: [
        { value: 1, label: 'Option1' },
        { value: 2, label: 'Option2' },
        { value: 3, label: 'Option3' },
        { value: 4, label: 'Option4' },
        { value: 5, label: 'Option5' },
      ],
    }
  },
}
</script>

# Disabled options

Add disabled: true to an option to make it unselectable.

<template>
  <div class="uiv">
    <multi-select v-model="selected" :options="options" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: [],
      options: [
        { value: 1, label: 'Option1' },
        { value: 2, label: 'Option2' },
        { value: 3, label: 'Option3', disabled: true },
        { value: 4, label: 'Option4' },
        { value: 5, label: 'Option5', disabled: true },
      ],
    }
  },
}
</script>

# Disabled select

Add disabled to <multi-select> to disable the dropdown and click events.

<template>
  <div class="uiv">
    <multi-select v-model="selected" :options="options" disabled />
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: [],
      options: [
        { value: 1, label: 'Option1' },
        { value: 2, label: 'Option2' },
        { value: 3, label: 'Option3' },
        { value: 4, label: 'Option4' },
        { value: 5, label: 'Option5' },
      ],
    }
  },
}
</script>

# Collapse selected

Collapse multiple selected items into a text by using collapse-selected prop.

<template>
  <div class="uiv">
    <multi-select v-model="selected" :options="options" collapse-selected />
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: [],
      options: [
        { value: 1, label: 'Option1' },
        { value: 2, label: 'Option2' },
        { value: 3, label: 'Option3' },
        { value: 4, label: 'Option4' },
        { value: 5, label: 'Option5' },
      ],
    }
  },
}
</script>

# Option groups

If you need grouped options, simply add group (String) as the name to them.

<template>
  <div class="uiv">
    <multi-select v-model="selected" :options="options" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: [],
      options: [
        { value: 1, label: 'Apple', group: 'Fruit' },
        { value: 2, label: 'Banana', group: 'Fruit' },
        { value: 3, label: 'Orange', group: 'Fruit' },
        { value: 4, label: 'Red', group: 'Color' },
        { value: 5, label: 'Green', group: 'Color' },
      ],
    }
  },
}
</script>

# Filterable

Add filterable to append filter input before options.

By default, options are filtered by item value and label (case ignored), use a custom filter-function to override it if needed.

<template>
  <div class="uiv">
    <multi-select v-model="selected" :options="options" filterable />
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: [],
      options: [
        { value: 1, label: 'Option1' },
        { value: 2, label: 'Option2' },
        { value: 3, label: 'Option3' },
        { value: 4, label: 'Option4' },
        { value: 5, label: 'Option5' },
      ],
    }
  },
}
</script>

# API Reference

# MultiSelect (opens new window)

# Props

Name	Type	Default	Required	Description
`v-model`	Array		✔	The selected values.
`options`	Array		✔	The select options.
`label-key`	String	label		Identity key name for label.
`value-key`	String	value		Identity key name for value.
`limit`	Boolean	0		Maximum number of options user can select, no limit when set to `0`.
`size`	String			Optional sizes, supported: `sm` / `lg`.
`block`	Boolean	false		Apply block level style.
`placeholder`	String	Select...		The default text displayed when no options are selected.
`split`	String	,		The options display spliter.
`filterable`	Boolean	false		Append filter input before options (default is filter by item value and label, case ignored).
`filter-placeholder`	String	Search...		The default text displayed in filter input.
`filter-auto-focus`	Boolean	true		Auto focus on filter input.
`filter-function`	Function			Custom filter function, with one param as input string, and returns the filtered array.
`disabled`	Boolean	false		Disable the select component.
`collapse-selected`	Boolean	false		Collapse multiple selected items into a text.
`append-to-body`	Boolean	false		Append the dropdown to `body`.
`selected-icon`	String	glyphicon glyphicon-ok		Icon displayed in option while selected.
`item-selected-class`	String			The class applied to the selected list item.

# Events

Name	Params	Description
`change`	value	Triggers when the selected value changes.
`visible-change`	the visible status (true / false)	Triggers when the dropdown toggles.
`limit-exceed`		Triggers when the selected value length exceeded limit.
`focus`	event	Triggers when input focuses.
`blur`	event	Triggers when input blurs.

# Slots

Name	Description
`option`	The option scoped slot, with `item` prop.

← Popover 弹出框 Typeahead 自动填充 →