Element UI Select

-
Pro Component

The Element UI Select is a form control that displays a collapsable list of multiple values. Element UI Select gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
Keep reading our Element UI Select examples and learn how to use this plugin.

Initialization

We used selects from element-ui but restyled them with a light look. To use selects, simply import them from element-ui

import {Select, Option} from 'element-ui'

Global usage

Vue.use(Select)
Vue.use(Option)

For local usage

export default {
  components: {
    [Select.name]: Select,
    [Option.name]: Option
  }
}

Example

Single Select

<base-input label="Single select">
  <el-select v-model="selects.simple" filterable
             placeholder="Simple select">
    <el-option v-for="option in selectOptions"
               :key="option.label"
               :label="option.label"
               :value="option.value">
    </el-option>
  </el-select>
</base-input>

Multiple Select

<base-input label="Multiple select">
  <el-select v-model="selects.multiple"
             multiple
             filterable
             placeholder="Multiple select">
    <el-option v-for="option in selectOptions"
               :key="option.label"
               :label="option.label"
               :value="option.value">
    </el-option>
  </el-select>
</base-input>