格式
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 { options: [ { value: "Option1", label: "Option1", }, { value: "Option2", label: "Option2", }, { value: "Option3", label: "Option3", }, { value: "Option4", label: "Option4", }, { value: "Option5", label: "Option5", }, ], value: "", }; }, }; </script>
禁用
禁用状态：
直接在<el-select>中加disabled
禁用选项
在<el-option>中加
<template> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disable="item.disabled"> </el-option> </el-select> </template> <script> export default{ data(){ return{ options:[{ value:'option', label:'option', disabled:true }] } } } </script>
清空按钮（仅适用于单选）
在<el-select>中添加clearable
多选
在<el-select>中添加multiple
在<el-select>中另外再添加collapse-tags可以使多选的内容合并到一起
自定义option模板
将自定义的HEML模板插入到el-option的slot中
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> <span style="float: left">{ { item.label }}</span> <span style="float: right; color: #8492a6; font-size: 13px">{ { item.value }}</span> </el-option>
选项进行分组
运用<el-option-group>对选项进行分组，
<template> <el-select v-model="value" placeholder="请选择"> <el-option-group v-for="group in optionsGroup" :key="group.label" :label="group.label"> <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-option-group> </el-select> </template> <script> export default { data() { return { optionsGroup: [{ label: '热门城市', options: [{ value: 'Shanghai', label: '上海' }, { value: 'Beijing', label: '北京' }] }, { label: '城市名', options: [{ value: 'Chengdu', label: '成都' }, { value: 'Shenzhen', label: '深圳' }, { value: 'Guangzhou', label: '广州' }, { value: 'Dalian', label: '大连' }] }], value7: '' } } } </script>
输入筛选（filterable）
通过给<el-select>添加 filterable（select组件可筛选，默认false）实现输入并筛选所有包含输入值的label
也可以通过传入一个filter-methid方法，该方法在输入值发生变化时调用，参数为当前输入值
远程搜索
通过输入关键字在服务器上搜索数据
1.给<el-select>添加 filterable（select组件可筛选，默认false）和 remote（选项可以从服务器远程加载，默认false）
2.传入一个remote-method方法，在输入值发生变化时调用，参数为当前输入值
<template> <el-select v-model="value" multiple //多选 filterable //可搜索 remote //远程搜索 reserve-keyword //多选且可搜索时，选中选项后保留当前的搜索关键词 placeholder="请输入关键词" :remote-method="remoteMethod" //传入方法 :loading="loading"> //是否正在从远程获取数据 <el-option v-for="item in options" :key="item.value" //el-option是通过v-for渲染出来的时候需要添加key属性，且其值具有唯一性 :label="item.label" :value="item.value"> </el-option> </el-select> </template> <script> export default { data() { return { options: [], value: [], list: [], //默认现在并未从远程获取数据，不显示数据 loading: false, //远程数据数组 states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"] } }, mounted() { this.list = this.states.map(item => { return { value: item, label: item }; }); }, methods: { remoteMethod(query) { if (query !== '') { this.loading = true; setTimeout(() => { this.loading = false; this.options = this.list.filter(item => { return item.label.toLowerCase() .indexOf(query.toLowerCase()) > -1; }); }, 200); } else { this.options = []; } } } } </script>
创建新的选项 （allow-create）
创建并选中不存在的条目
给<el-select>添加allow-create（可通过在输入框中输入文字来创建新的条目）此时filterable必须为真
添加default-first-optin可以实现按下回车选择输入框的第一个匹配项
attributes
| multiple | 是否多选 |
false |
|
| value-key |
作为 value 唯一标识的键名，绑定值为对象类型时必填 |
:key="item.value" |
|
| size |
输入框尺寸 |
size="medium|small|mini" |
|
| clearable |
单选时是否可以清空选项 |
默认false |
|
| collapse-tags |
多选时是否将选中值按文字的形式展示 |
— |
默认false |
| multiple-limit |
多选时用户最多可以选择的项目数，为 0 则不限制 |
:multiple-limit="number" |
默认为0 |
| name |
select input 的 name 属性 |
||
| auto-complete |
select input 的 autocomplete 属性 |
默认off |
|
| placeholder |
占位符 |
请选择 |
|
| filterable |
是否可搜索 |
默认false |
|
| allow-create |
是否允许用户创建新条目，需配合 filterable 使用 |
默认false |
|
| filter-method |
自定义搜索方法 |
||
| remote |
是否为远程搜索 |
false |
|
| remote-method |
远程搜索方法 |
||
| loading |
是否正在从远程获取数据 |
false |
|
| loading-text |
远程加载时显示的文字 |
默认“加载中” |
|
| no-match-text |
搜索条件无匹配时显示的文字 |
默认“无匹配数据” |
|
| no-data-text |
选项为空时显示的文字 |
默认“无数据” |
|
| popper-class |
Select 下拉框的类名 |
||
| reserve-keyword |
多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 |
false |
|
| default-first-option |
在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用 |
false |
|
| popper-append-to-body |
是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false |
true |
|
| automatic-dropdown |
对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单 |
false |
event
| change |
选中值发生变化时触发 |
目前的选中值 |
| visible-change |
下拉框出现/隐藏时触发 |
出现则为 true，隐藏则为 false |
| remove-tag |
多选模式下移除tag时触发 |
移除的tag值 |
| clear |
可清空的单选模式下用户点击清空按钮时触发 |
— |
| blur |
当 input 失去焦点时触发 |
(event: Event) |
| focus |
当 input 获得焦点时触发 |
(event: Event) |