el-time-select多选

### 使用 Element Plus 实现 `el-time-select` 组件的多选功能 Element Plus 的 `el-time-select` 组件默认不支持多选功能。为了实现这一特性，可以考虑自定义封装该组件来满足需求。 #### 自定义封装思路 通过监听用户的选项变化并手动管理已选择的时间列表，在模板中展示这些时间项，并允许用户取消选择已经选定的时间。下面是一个简单的实现方案： 1. **创建数据模型** 定义一个数组用于存储当前被选中的时间段。 2. **修改模板结构** 修改原有单一的选择框为多个可点击的时间标签形式，每个标签代表一个可以选择的时间段。 3. **处理事件逻辑** 当用户点击某个时间时，判断其是否已经被选中；如果未选，则将其加入到选中队列里；反之则移除该项。 4. **样式调整** 对新增加的内容做适当美化以适应整体UI风格。 以下是具体的代码示例: ```html <template> <div class="time-selector"> <!-- 显示已选中的时间 --> <span v-for="(item, index) in selectedTimes" :key="index" @click="toggleSelection(item)" style="margin-right:8px;"> {{ item }} × </span> <!-- 时间选择器 --> <el-time-select placeholder="选择时间" v-model="currentValue" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" @change="handleTimeChange"/> </div> </template> <script setup lang="ts"> import { ref, watch } from "vue"; // 已经选中的时间集合 const selectedTimes = ref<string[]>([]); let currentValue = ref(null); function toggleSelection(time:string){ let idx = selectedTimes.value.indexOf(time); if(idx === -1){ // 如果不存在于selectedTimes中就添加进去 selectedTimes.value.push(currentValue.value as string); }else{ // 否则从selectedTimes里面删除它 selectedTimes.value.splice(idx, 1); } } watch(() => selectedTimes.value,(newVal)=>{ console.log(`更新后的选中时间为:${JSON.stringify(newVal)}`); }); function handleTimeChange(value:any){ // 更新currentValue变量值 currentValue.value=value; } </script> ``` 在这个例子中，当用户选择了新的时间点之后会触发 `handleChange` 方法，这个方法负责检查所选时间是否已经在 `selectedTimes` 列表内存在。如果是第一次选择某段时间，则把它添加进来；如果不是首次而是再次点击同一个时间，则意味着要撤销对该时段的选择操作，因此应该把对应的条目从中剔除出去[^1]。