element下拉多选

### Element UI 下拉多选组件使用方法 #### 多选下拉框基础配置 `el-select` 是一个非常灵活的组件，可以用来创建单选或多选的下拉菜单。当设置 `multiple=true` 属性时，则表示启用多选模式[^3]。 ```html <template> <div> <!-- 启用多选 --> <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> </div> </template> <script> export default { data() { return { selectedValues: [], // 存储已选择项的值 options: [ { value: '选项1', label: '黄金糕' }, { value: '选项2', label: '双皮奶' }, { value: '选项3', label: '蚵仔煎' } ] }; } }; </script> ``` 此代码片段展示了如何定义一个多选的 `el-select` 组件，并通过 `v-for` 循环来渲染多个 `el-option` 元素作为可选项。每个 `el-option` 都绑定了唯一的键 (`:key`)、显示标签 (`:label`) 和实际存储的值 (`:value`)。 #### 实现全选功能的方法之一：添加【全选】选项 为了让用户体验更佳，在某些场景下可能希望加入“全选”的功能。一种常见的做法是在选项列表顶部增加一个特殊的“全选”条目： ```html <template> <div> <el-select v-model="selectedValues" multiple collapse-tags style="width: 300px;" @change="handleSelectChange"> <el-option key="selectAll" label="全选/取消全选" value="selectAll"></el-option> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> </template> <script> export default { methods: { handleSelectChange(value) { const allSelected = this.selectedValues.includes('selectAll'); if (allSelected && this.selectedValues.length === this.options.length + 1) { this.selectedValues = this.options.map(option => option.value); } else if (!this.selectedValues.some(v => !['selectAll'].includes(v))) { this.selectedValues = []; } if (allSelected) { this.$nextTick(() => { this.selectedValues.push('selectAll'); // 如果选择了全部则再次勾上全选按钮 }); } } } } </script> ``` 这段脚本实现了点击“全选/取消全选”会自动处理其他所有项目的选取状态变化逻辑。注意这里利用了 `@change` 事件监听器配合自定义函数 `handleSelectChange()` 来控制全选行为。