基本用法
<template>
<el-select v-model="value">
<el-option
v-for="item in options"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
}
}
}
</script>
有禁用选项
<template>
<el-select v-model="value2">
<el-option
v-for="item in options2"
:label="item.label"
:value="item.value"
:disabled="item.disabled">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options2: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶',
disabled: true
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value2: ''
}
}
}
</script>
可清空单选
<template>
<el-select v-model="value3" clearable>
<el-option
v-for="item in options"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value3: ''
}
}
}
</script>
可搜索
<template>
<el-select v-model="value4" filterable>
<el-option
v-for="item in options"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value4: ''
}
}
}
</script>
分组
{{ item.label }}
{{ item.value }}
<template>
<el-select v-model="value5">
<el-option-group v-for="group in options3" :label="group.label">
<el-option
v-for="item in group.options"
:label="item.label"
:value="item.value">
</el-option>
</el-option-group>
</el-select>
</template>
<script>
export default {
data() {
return {
options3: [{
label: '热门城市',
options: [{
value: 'Shanghai',
label: '上海'
}, {
value: 'Beijing',
label: '北京'
}]
}, {
label: '城市名',
options: [{
value: 'Chengdu',
label: '成都'
}, {
value: 'Shenzhen',
label: '深圳'
}, {
value: 'Guangzhou',
label: '广州'
}, {
value: 'Dalian',
label: '大连'
}]
}],
value9: ''
}
}
}
</script>
自定义模板
{{ item.label }}
{{ item.value }}
<template>
<el-select v-model="value6">
<el-option
v-for="item in cities"
: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-select>
</template>
<script>
export default {
data() {
return {
cities: [{
value: 'Beijing',
label: '北京'
}, {
value: 'Shanghai',
label: '上海'
}, {
value: 'Nanjing',
label: '南京'
}, {
value: 'Chengdu',
label: '成都'
}, {
value: 'Shenzhen',
label: '深圳'
}, {
value: 'Guangzhou',
label: '广州'
}],
value6: ''
}
}
}
</script>
基础多选
<template>
<el-select v-model="value7" multiple>
<el-option
v-for="item in options"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value7: []
}
}
}
</script>
服务端搜索
<template>
<el-select
v-model="value8"
multiple
filterable
remote
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading">
<el-option
v-for="item in options4"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options4: [],
value8: [],
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.options4 = this.list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
}, 200);
} else {
this.options4 = [];
}
}
}
}
</script>
API
el-select
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| value |
select 目前选中的值 |
string/number/array |
|
|
| multiple |
是否多选 |
boolean |
|
false |
| disabled |
是否禁用 |
boolean |
|
false |
| clearable |
单选时是否可以清空选项 |
boolean |
|
false |
| width |
select 的宽度 |
number |
|
180（单选）/220（多选） |
| dropdown-width |
下拉菜单的宽度，不设置则与输入框同宽 |
number |
|
|
| name |
select input 的 name 属性 |
string |
|
|
| placeholder |
占位符 |
string |
|
'请选择' |
| filterable |
是否可搜索 |
boolean |
|
false |
| filter-method |
自定义过滤方法 |
function |
|
|
| remote |
是否为远程搜索 |
boolean |
|
false |
| remote-method |
远程搜索方法，当搜索关键字变化时会调用该方法，参数为目前的搜索关键字 |
function |
|
|
| loading |
是否正在从远程获取数据 |
boolean |
|
false |
el-select 事件
| 事件名称 |
说明 |
回调参数 |
| change |
value 发生变化 |
value |
el-option-group
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| label |
分组的标签 |
string |
|
|
| disabled |
是否将该分组下所有选项置为禁用 |
boolean |
|
false |
el-option
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| value |
选项的值 |
string/number |
|
|
| label |
选项的标签，若不设置则默认与 value 相同 |
string/number |
|
|
| disabled |
是否禁用该选项 |
boolean |
|
false |
| selected |
选项是否被初始选中 |
boolean |
|
false |
