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)
基础使用
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>
Select Attributes
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
v-model | 绑定值 | string | number | |
... |
Option Attributes
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
value | 选项的值 | string | number | object | |
label | 选项的展示名称 | string | number | |
... |