elementui select
ElementUI Select 组件使用指南
ElementUI 的 Select 组件是一个功能丰富的下拉选择器，适用于表单中的选项选择场景。以下是详细的使用方法和常见配置。
基础用法
通过 v-model 绑定选中的值，el-option 定义选项列表：
<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>数据示例：
data() {
return {
options: [{
value: 'option1',
label: '黄金糕'
}, {
value: 'option2',
label: '双皮奶'
}],
value: ''
}
}禁用状态
禁用整个 Select 或单个选项：
<el-select v-model="value" disabled>
<el-option
:value="option.value"
:label="option.label"
:disabled="option.disabled">
</el-option>
</el-select>可清空选项
添加 clearable 属性允许清空已选值：
<el-select v-model="value" clearable></el-select>多选模式
设置 multiple 属性启用多选：
<el-select v-model="valueArray" multiple></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="loadOptions"
:loading="loading">
</el-select>方法示例：
methods: {
loadOptions(query) {
if (query) {
this.loading = true;
// 调用API获取选项数据
fetchOptions(query).then(res => {
this.options = res.data;
this.loading = false;
});
}
}
}自定义模板
通过 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">{{ item.value }}</span>
</el-option>
</el-select>常用属性
v-model：绑定值multiple：是否多选disabled：禁用状态clearable：可清空filterable：可搜索placeholder：占位文本no-data-text：无数据时显示文本
事件处理
常用事件包括：
change：选中值变化时触发visible-change：下拉框显示/隐藏时触发remove-tag：多选模式下移除tag时触发
示例：
<el-select @change="handleChange"></el-select>以上内容涵盖了 ElementUI Select 组件的核心功能，根据实际需求选择适合的配置方式。
