【vue】【element-plus】 el-date-picker使用cell-class-name进行标记，type=year不生效解决方法

news2025/7/30 22:12:50

type=dete，自定义cell-class-name打标记效果如下：
在这里插入图片描述

相关代码：

        <el-date-picker
            v-model="date"
            :clearable="false"
            :editable="false"
            :cell-class-name="cellClassName"
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
        >
        </el-date-picker>


	//customDateArr : ['2025-04-01', '2025-04-23','2025-04-11']

      cellClassName:(date)=>{
        let that = this
        let nDate = parseTime(date, '{y}-{m}-{d}')//日期格式化方法
        // console.log(nDate)
        if (that.customDateArr.includes(nDate)) {
          return 'custom_date_class'; // 应用自定义样式类
        }
        return ''; // 其他日期不应用样式
      },

<style lang="scss">
.custom_date_class {
  span::after{
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--el-color-danger);
    border-radius: 50%;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>

type=year相关内容：

在这里插入图片描述

同样方法，当type=year时候，改成对应年份匹配后发现方法没有被调用，使用官方文档中的插槽方式（已升级到最新版）也无法实现。
最后通过焦点事件和面板更换事件直接操作dom元素进行强制赋值解决！！

<div class="select-center-left date-select">
        <el-date-picker
            popper-class="custom-year-picker"
            v-model="year"
            :clearable="false"
            :editable="false"
            type="year"
            value-format="YYYY"
            @focus="handleYearPickerOpen"
            @panel-change="handleYearPickerOpen"
            :disabled-date="disabledDate"
        />

const handleYearPickerOpen = () => {
  nextTick(() => {
    const pickerPanel = document.querySelector(' .custom-year-picker');
    // console.log(pickerPanel)
    if (pickerPanel) {
      const cells = pickerPanel.querySelectorAll('td');
      cells.forEach(cell => {
        // 示例：为 2023 年的单元格添加样式
        if (cell.textContent.includes('2023')||cell.textContent.includes('2019')) {
          cell.classList.add('custom_date_class');
        }else {
       		//不匹配需手动移除，否则切换面板后上次样式依旧存在
          	cell.classList.remove('custom_date_class')
        }
      });
    }
  });
};