elementui多选
ElementUI 多选组件使用指南
ElementUI 提供了 el-select 组件支持多选功能，通过设置 multiple 属性即可启用。以下是具体实现方法和常见场景示例：
基础多选实现
设置 multiple 属性，绑定值为数组类型：
<el-select v-model="selectedValues" multiple placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>data() {
return {
selectedValues: [],
options: [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' }
]
}
}自定义多选标签显示
通过 collapse-tags 属性可折叠显示选中标签：
<el-select
v-model="selectedValues"
multiple
collapse-tags
placeholder="请选择">
</el-select>多选限制选择数量
结合 disabled 状态实现选择数量限制：
<el-select
v-model="selectedValues"
multiple
:disabled="selectedValues.length >= 3">
</el-select>远程搜索多选
配合 filterable 和 remote 实现远程搜索：
<el-select
v-model="selectedValues"
multiple
filterable
remote
:remote-method="loadOptions"
:loading="loading">
</el-select>多选表单验证
结合 el-form 进行必填验证：
<el-form :rules="rules">
<el-form-item prop="selectedValues">
<el-select
v-model="selectedValues"
multiple>
</el-select>
</el-form-item>
</el-form>rules: {
selectedValues: [
{ type: 'array', required: true, message: '请至少选择一项', trigger: 'change' }
]
}注意事项
- 多选模式下
v-model必须绑定数组类型 - 大数据量时建议设置
filterable提高用户体验 - 可通过
@change事件监听选择变化 - 样式覆盖需注意层级，避免影响多选标签样式
