Element-ui Select 选择器

原文链接：https://note.noxussj.top/?source=sifo

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

按需引入方式

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

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

Option Attributes

原文链接：https://note.noxussj.top/?source=sifo