Select 选择器

当选项过多时，使用下拉菜单展示并选择内容。

按需引入方式

如果是完整引入可跳过此步骤

import Vue from 'vue'
import { Select, Option } from 'element-ui'
import 'element-ui/lib/theme-chalk/base.css'
import 'element-ui/lib/theme-chalk/select.css'
import 'element-ui/lib/theme-chalk/option.css'

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

基础使用

v-model 的值为当前被选中的 el-option 的 value 属性值

<template>
    <el-select v-model="value" placeholder="请选择">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        >
        </el-option>
    </el-select>
</template>

<script>
export default {
    data() {
        return {
            value: '',
            options: [
                {
                    value: '1',
                    label: '西米露'
                },
                {
                    value: '2',
                    label: '双皮奶'
                },
                {
                    value: '3',
                    label: '龟苓膏'
                },
                {
                    value: '4',
                    label: '烤乳鸽'
                }
            ]
        }
    }
}
</script>

Select Attributes

参数	说明	类型	默认值
v-model	绑定值	string | number
...

Option Attributes

参数	说明	类型	默认值
value	选项的值	string | number | object
label	选项的展示名称	string | number
...