背景

在使用了<el-date-picker></el-date-picker>时，我想给某些特定的日期加一下高亮样式，如

查阅了官方文档需要给picker-options属性，然后加上cellClassName方法然后发现在type的值为month或者year的时候，方法是有触发到的,但是类名加不上去,丫的服了,搜了很久都没有找到解决方法,后面只能暴力解决了

解决思路

监听<el-date-picker></el-date-picker>的ficus方法(也就是在日期选择器点击的时候会触发),然后这个方法我们可以拿到日期选择器的实例对象,通过这个实例,直接去找到相应dom节点强行加上我们想要加上的类名,暴力思路

实现代码

Html

<el-date-picker 
    type="month" 
    @focus="pickerMonthFocusHandle">
</el-date-picker>

pickerMonthFocusHandle($picker) {
  const exceededMonth = ['四月','六月']
  this.$nextTick(() => {
    const pickerChild = $picker.picker.$children[2]
    if(pickerChild){
      for(const row of pickerChild.$el.rows){
        for(const cell of row.cells){
          if(exceededMonth.includes(cell.textContent)){
            cell.classList.add('exceeded_month')
          }
        }
      }
    }
  })
},

效果

总结

当时确实没有想到比较好的解决方法,所以只想到了这样做了,有遇到相同问题的大佬,可以谈谈你们怎么解决的?

element-ui的日期选择器cellClassName无效问题

背景

解决思路

实现代码

效果

总结