菜园前端

Appearance

Select 选择器 ​

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

按需引入方式 ​

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

javascript
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)
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 属性值

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