element-plus，el-calendar日历组件使用#date-cell插槽无效、不生效

### 如何在 Element Plus 的 `el-calendar` 组件中为每个日期添加点击事件 在 Element Plus 中，`el-calendar` 提供了一个内置的事件监听器 `@day-click`，用于捕获日历中的日期被点击时触发的事件。当用户点击某个日期时，该事件会返回一个参数，表示所选日期的具体信息。 以下是实现方法以及代码示例： #### 实现方式 通过绑定 `@day-click` 事件到 `<el-calendar>` 组件上，可以定义处理逻辑来响应用户的点击操作。此事件接收一个参数，通常是一个 JavaScript Date 对象或者字符串形式的时间戳，具体取决于框架版本和配置[^1]。 #### 示例代码 下面展示如何设置并处理 `@day-click` 事件： ```vue <template> <div> <!-- 使用 @day-click 来监听日期点击 --> <el-calendar v-model="currentDate" @day-click="handleDayClick"></el-calendar> </div> </template> <script> export default { data() { return { currentDate: new Date(), // 当前选定的日期，默认为今天 }; }, methods: { handleDayClick(date) { console.log('Selected date:', date); // 打印选中的日期 alert(`You clicked on ${date.toDateString()}`); // 弹窗提示 } } }; </script> ``` 在此示例中，每当用户点击某一天时，都会调用 `handleDayClick` 方法，并传递当天的日期作为参数。开发者可以根据需求进一步扩展功能，比如跳转页面、弹出对话框等。 #### 关键点说明 - **v-model**: 它绑定了当前活动月份的状态变量，在本例子中默认初始化为今天的日期。 - **@day-click**: 这是专门针对单个日期单元格点击行为设计的一个自定义事件处理器[^2]。 #### 注意事项 如果希望更精确控制样式或者其他交互效果，则可能还需要结合 CSS 类名选择器或者额外插槽机制完成复杂场景下的定制化开发工作。