当选项过多时，使用下拉菜单展示并选择内容。
见Select 选择器 (opens new window)
# 普通模板
| 参数 | 说明 |
|---|---|
| label | 下拉选中展示的内容 |
| value | 选中下拉选的值 |
<el-select v-model="postForm.method" class="filter-item" style="width: 550px">
<el-option v-for="item in methodOptions" :key="item.key" :label="item.display_name" :value="item.key" />
</el-select>
1
2
3
2
3
const methodOptions = [
{ key: 1, display_name: 'GET' },
{ key: 2, display_name: 'POST' }
]
1
2
3
4
2
3
4
# 自定义模板
可以自定义备选项，将自定义的 HTML 模板插入el-option的 slot 中即可。
<el-select v-model="postForm.interfaceId" class="filter-item" filterable style="width: 550px">
<el-option
v-for="item in interfaceList"
:key="item.id"
:label="item.number"
:value="item.id"
>
<span style="float: left">{{ item.number }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.address }}</span>
</el-option>
</el-select>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 可搜索
为el-select添加filterable属性即可启用搜索功能。默认情况下，Select 会找出所有label属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个filter-method来实现。filter-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。
# 普通搜索
添加filterable即可
<el-select v-model="postForm.virtualStepCode" class="filter-item" style="width: 550px" filterable clearable>
<el-option v-for="item in virtualStepCodeOptions" :key="item.id" :label="item.number + '>' + item.version" :value="item.number + '>' + item.version" />
</el-select>
1
2
3
2
3
# 自定义搜索
设置属性，并指定过滤方法
<el-select
v-model="listQuery.interfaceId"
placeholder="接口名称"
clearable
class="filter-item"
style="width: 100%"
filterable
:filter-method="dataFilter"
@clear="clearFilter"
@visible-change="clearFilter"
>
<el-option
v-for="item in interfaceOptions"
:key="item.id"
:label="item.name"
:value="item.id"
>
<span style="float: left; color: #8492a6; font-size: 13px">{{ item.name }}</span>
<span style="float: right;color: #8492a6; font-size: 13px">{{ item.number }}</span>
</el-option>
</el-select>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
filter-method:
dataFilter(val) {
if (val) { // val存在
this.interfaceOptions = this.interfaceOptionsCopy.filter((item) => {
if (!!~item.number.indexOf(val) || !!~item.number.toUpperCase().indexOf(val.toUpperCase()) ||
!!~item.name.indexOf(val) || !!~item.name.toUpperCase().indexOf(val.toUpperCase())) {
return true
}
})
} else { // val为空时，还原数组
this.interfaceOptions = this.interfaceOptionsCopy
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 可清空
为el-select设置clearable属性，则可将选择器清空。需要注意的是，clearable属性仅适用于单选。
说明
代码见上面