3步解锁Element Plus日期选择器自定义魔法：从默认插槽到节日高亮-优快云博客

3步解锁Element Plus日期选择器自定义魔法：从默认插槽到节日高亮

【免费下载链接】element-plus element-plus/element-plus: Element Plus 是一个基于 Vue 3 的组件库，提供了丰富且易于使用的 UI 组件，用于快速搭建企业级桌面和移动端的前端应用。项目地址: https://gitcode.com/GitHub_Trending/el/element-plus

你是否曾为日期选择器无法展示节假日标记而烦恼？是否希望日历单元格能显示自定义提示或样式？Element Plus日期选择器（DatePicker）的默认插槽功能正是解决这类需求的利器。本文将通过实战案例，详解如何利用默认插槽实现从基础样式定制到复杂业务逻辑的全流程，让你的日期选择器既美观又实用。

默认插槽基础：自定义单元格内容

默认插槽（#default）是Element Plus日期选择器最强大的定制化工具，它允许开发者完全控制日历单元格的渲染内容。通过该插槽，可获取包含日期信息的cell对象，实现个性化展示。

核心使用方式

在<el-date-picker>标签内使用<template #default="cell">即可捕获单元格数据，基础结构如下：

<el-date-picker v-model="value" type="date">
  <template #default="cell">
    <!-- 自定义内容 -->
    <div class="custom-cell">{{ cell.text }}</div>
  </template>
</el-date-picker>

上述代码来自官方示例docs/examples/date-picker/custom-content.vue，该文件完整展示了日期、月份、年份三种选择器的插槽用法。

cell对象关键属性

根据官方文档docs/en-US/component/date-picker.md定义，cell对象包含以下核心属性：

属性名	类型	描述
text	number	单元格显示文本（日期数字）
dayjs	Dayjs	Dayjs日期对象，用于日期计算
isCurrent	boolean	是否为今天
disabled	boolean	是否禁用状态
type	string	单元格类型（normal/today/prev-month/next-month）

实战案例：节假日高亮显示

以下实现将国庆假期等特殊日期标记为红色点，直观区分工作日与节假日。

完整代码实现

<template>
  <el-date-picker v-model="value" type="date" placeholder="选择日期">
    <template #default="cell">
      <div class="cell">
        <span class="text">{{ cell.text }}</span>
        <!-- 节假日标记 -->
        <span v-if="isHoliday(cell)" class="holiday-dot" />
      </div>
    </template>
  </el-date-picker>
</template>

<script setup>
import { ref } from 'vue'
const value = ref('')
// 定义节假日数组
const holidays = ['2023-10-01', '2023-10-02', '2023-10-03', '2023-10-04', '2023-10-05', '2023-10-06', '2023-10-07']

// 判断是否为节假日
const isHoliday = ({ dayjs }) => {
  return holidays.includes(dayjs.format('YYYY-MM-DD'))
}
</script>

<style scoped>
.cell {
  position: relative;
  height: 30px;
}
.text {
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
}
/* 节假日红点样式 */
.holiday-dot {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: #ff4d4f;
  border-radius: 50%;
}
</style>

实现效果解析

数据层面：通过dayjs.format('YYYY-MM-DD')将日期转换为标准格式，与holidays数组比对
样式层面：使用绝对定位在日期下方添加红色圆点，避免影响原有布局
交互层面：保留默认选中态样式，通过.cell.current .text类名实现当前日期高亮

高级应用：多类型选择器适配

默认插槽不仅支持日期选择器，还可适配月份、年份等多种类型，实现统一的定制风格。

月份选择器定制

<el-date-picker v-model="month" type="month">
  <template #default="cell">
    <div class="month-cell">{{ cell.text + 1 }}月</div>
  </template>
</el-date-picker>

年份选择器定制

<el-date-picker v-model="year" type="year">
  <template #default="cell">
    <div class="year-cell">{{ cell.text }}年</div>
  </template>
</el-date-picker>

上述两段代码均来自docs/examples/date-picker/custom-content.vue，通过简单的文本拼接实现了月份和年份的单位显示。

注意事项与最佳实践

样式兼容性

自定义内容需保持与默认结构一致的盒模型，避免破坏布局。推荐使用与官方相同的CSS类名：

/* 保持默认单元格尺寸 */
.custom-cell {
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
}

性能优化

当处理大量日期数据时，建议：

避免在插槽内使用复杂计算
对disabledDate等筛选函数进行节流处理
复杂逻辑通过computed属性缓存结果

无障碍访问

添加适当的ARIA属性提升可访问性：

<span :aria-label="`选择${cell.text}日`" class="text">{{ cell.text }}</span>

3步解锁Element Plus日期选择器自定义魔法：从默认插槽到节日高亮