elementui下拉
ElementUI 下拉组件使用指南
ElementUI 提供了 el-select 组件用于实现下拉选择功能，支持单选、多选、远程搜索、分组等特性。
基本用法
<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>禁用状态
通过 disabled 属性禁用整个下拉框：
<el-select v-model="value" disabled>
<!-- options -->
</el-select>可清空选项
添加 clearable 属性允许清空已选项：
<el-select v-model="value" clearable>
<!-- options -->
</el-select>多选功能
设置 multiple 属性启用多选：
<el-select v-model="value" multiple>
<!-- options -->
</el-select>分组选项
使用 el-option-group 实现分组：
<el-select v-model="value">
<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="value"
filterable
remote
:remote-method="remoteMethod"
: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="value">
<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-select>常用属性
v-model：绑定值multiple：是否多选disabled：是否禁用clearable：是否可清空filterable：是否可搜索placeholder：占位文本size：尺寸（medium/small/mini）
常用事件
change：选中值变化时触发visible-change：下拉框出现/隐藏时触发remove-tag：多选模式下移除tag时触发
注意事项
- 确保
v-model绑定的值与选项的value类型一致 - 多选模式下绑定的值应为数组
- 远程搜索时需要自行处理数据加载逻辑
- 大量数据时建议使用虚拟滚动优化性能
