el-select 多选 全选

### 如何在Element Plus `el-select` 组件中实现多选和全选功能 为了使 `el-select` 支持多选并增加全选的功能，可以采用一种方法是在选项列表前加入一个特殊的“全选”项。当用户点击这个特殊项时，会触发逻辑来选择所有的其他选项。 #### 实现思路 通过监听 `change` 事件判断当前是否选择了代表全部的选项，并据此更新绑定的数据源以反映所有条目的选中状态或取消选中的操作[^1]。 #### 示例代码 下面是一个具体的例子展示如何做到这一点： ```html <template> <div> <!-- 使用 v-model 双向绑定 selectedOptions --> <el-select v-model="selectedOptions" multiple placeholder="请选择"> <!-- 添加一个虚拟的 '全选' 选项 --> <el-option :value="'ALL'" label="全选"></el-option> <!-- 动态渲染实际可选项 --> <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" ></el-option> </el-select> <!-- 显示已选项目 --> <p>您已经选择了:</p> <ul> <li v-for="(option, idx) in displayedSelectedItems" :key="idx">{{ option }}</li> </ul> </div> </template> <script setup lang="ts"> import { ref } from "vue"; // 定义数据模型 const allOptionValue = "ALL"; let isAllChecked = false; const options = [ { value: "op1", label: "选项一" }, { value: "op2", label: "选项二" }, { value: "op3", label: "选项三" } ]; const selectedOptions = ref([]); function handleSelectChange(valueArray) { const lastPickedItem = valueArray[valueArray.length - 1]; if (lastPickedItem === allOptionValue && !isAllChecked) { // 如果上次未勾选过‘全选’而这次又勾上了，则自动填充剩余选项 selectedOptions.value = ["ALL"].concat( options.map((opt) => opt.value) ); isAllChecked = true; } else if ( lastPickedItem !== undefined && lastPickedItem !== allOptionValue && isAllChecked ) { // 若之前处于全选状态但是现在单独去掉了某一项则解除全选标记 isAllChecked = false; selectedOptions.value.splice(selectedOptions.value.indexOf(allOptionValue), 1); } } // 计算属性用于显示最终的选择结果 const displayedSelectedItems = computed(() => isAllChecked ? options.map((o) => o.label).join(", ") : selectedOptions.value.filter(v => v != allOptionValue).map(val => options.find(o => o.value === val)?.label || '' ) ); watch(selectedOptions, handleSelectChange); </script> ``` 在这个实例里，每当有新的选择发生时都会调用 `handleSelectChange()` 函数来进行处理；如果检测到用户选择了 “全选”，那么就将所有可能的值都添加进去；反之亦然。同时为了避免重复计算，这里还引入了一个标志变量 `isAllChecked` 来跟踪当前是否处在全选模式下。