element-plus里的日期选择器多选

### 使用 Element Plus 的日期选择器实现多选功能 为了实现在 `Element Plus` 中使用日期选择器的多选功能，可以考虑自定义组件来扩展原生的功能。由于官方并没有直接提供多选模式的支持，因此需要通过一些技巧来模拟这一行为。 #### 自定义多选逻辑 创建一个新的 Vue 组件用于处理多个日期的选择： ```javascript // src/components/MultiDatePicker.vue <template> <div class="multi-date-picker"> <el-button @click="showDialog = true">选择日期</el-button> <!-- 已选中的日期列表 --> <ul v-if="selectedDates.length > 0" style="margin-top:8px;"> <li v-for="(date, index) in selectedDates" :key="index">{{ formatDate(date) }} <span @click="removeDate(index)">×</span> </li> </ul> <!-- 日期选择对话框 --> <el-dialog title="请选择日期" :visible.sync="showDialog" width="30%"> <el-calendar v-model="currentDate"></el-calendar> <br /> <el-button type="primary" @click="addSelectedDate()">确认选择</el-button> </el-dialog> </div> </template> <script> export default { data() { return { showDialog: false, currentDate: null, selectedDates: [] }; }, methods: { addSelectedDate() { if (!this.selectedDates.includes(this.currentDate)) { this.selectedDates.push(this.currentDate); } this.showDialog = false; }, removeDate(index) { this.selectedDates.splice(index, 1); }, formatDate(date) { let d = new Date(date), month = '' + (d.getMonth() + 1), day = '' + d.getDate(), year = d.getFullYear(); if (month.length < 2) month = '0' + month; if (day.length < 2) day = '0' + day; return [year, month, day].join('-'); } } }; </script> ``` 此代码片段展示了如何构建一个多选日期选择器[^1]。该组件允许用户点击按钮打开一个弹窗，在其中可以选择任意数量的不同日期，并将其保存到数组中显示出来。当再次点击同一个已选项时，则会移除该项。 对于样式部分可以根据实际需求调整 CSS 或者引入额外的设计框架来进行美化操作。