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

Copy

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

Global usage

Copy

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

For local usage

Copy

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

Example

Single Select

Copy

<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

Copy

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