elementui select
ElementUI Select 组件使用指南
ElementUI 是基于 Vue.js 的组件库，其中 Select 组件用于提供下拉选择功能。以下是常见用法和配置方法。
基础用法
通过 v-model 绑定选中值，options 数据通过 el-option 子组件传递：
<template>
<el-select v-model="selectedValue" 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 {
selectedValue: '',
options: [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' }
]
}
}
}
</script>禁用状态
设置 disabled 属性可禁用选择框：
<el-select v-model="selectedValue" disabled>
<!-- options -->
</el-select>可清空选项
添加 clearable 属性允许清空已选项：
<el-select v-model="selectedValue" clearable>
<!-- options -->
</el-select>多选模式
设置 multiple 属性启用多选：
<el-select v-model="selectedValues" multiple>
<!-- options -->
</el-select>分组显示
使用 el-option-group 实现选项分组：
<el-select v-model="selectedValue">
<el-option-group
v-for="group in options"
: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>远程搜索
结合 filterable 和 remote 实现远程搜索：
<el-select
v-model="selectedValue"
filterable
remote
:remote-method="fetchOptions"
:loading="loading">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>自定义模板
通过 slot 自定义选项显示内容：
<el-select v-model="selectedValue">
<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">{{ item.value }}</span>
</el-option>
</el-select>常用属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 绑定值 | string/number/boolean/object | - |
| multiple | 是否多选 | boolean | false |
| disabled | 是否禁用 | boolean | false |
| clearable | 是否可清空 | boolean | false |
| filterable | 是否可搜索 | boolean | false |
| placeholder | 占位文本 | string | - |
| size | 输入框尺寸 | string | - |
事件处理
常用事件包括：
change：选中值变化时触发visible-change：下拉框出现/隐藏时触发remove-tag：多选模式下移除tag时触发
<el-select
v-model="selectedValue"
@change="handleChange">
<!-- options -->
</el-select>以上是 ElementUI Select 组件的主要功能和用法，可根据实际需求选择合适的配置方式。
