解决element ui 日期选择器 给指定的多个日期修改样式(自定义样式设置)

需求

背景：通过echart图表加以日期选择器，对用户数据进行动态切换展示，并在日期选择器中标识当月的天数是否有数据以及用户是否查看的标识。

技术选型

采用element ui 2.14.1版本，主要通过picker Options 新增 cellClassName 进行实现。

代码

HTML

<el-date-picker prefix-icon="el-icon-date" :picker-options="pickerOptions" v-model="timer" :clearable="false" "> 
</el-date-picker>

element ui 日期选择器

CSS

        .circle::after {
            position: absolute;
            content: '';
            right: 2px;
            top: 4px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: red;
        }
        
        .background span {
            background-color: #C6CDEB;
            border-radius: 50%;
            color: #000;
        }

标识当前那些是有数据和用户是否查看数据的样式

JS

pickerOptions: {
                    cellClassName: (time) => {
                        for (let i = 0; i < this.arr.length; i++) {
                            if (this.arr[i].time.includes(this.getLocalTime(time.getTime()))) {
                                return `red ${this.flag == this.arr[i].fy ? 'green':""}`
                            }

                        }
                    }

                },

arr 为后台源数据 ，通过time时间参数判断是否包含，来显示当天是否有数据，通过 flag 字段和后台数据进行匹配，判断用户是否查看当天数据。

后台数据结构

arr: [{
                    fy: true,
                    time: "2021-01-02"
                }, {
                    fy: false,
                    time: "2021-01-03"
                }, {
                    fy: true,
                    time: "2021-01-07"
                }]

fy： 判断用户是否点击查看数据 time: 数据返回的具体日期

demo 截图

紫色背景代表有数据的日期，带红色圆点代表有数据但是用户还未查看。

学习记录！！！加油！！！