elementUI实现日期框选中项文本高亮

{ margin: 0; font: 12px "Helvetica Neue" }
p.p2 { margin: 0; font: 12px "PingFang SC" }
span.s1 { font: 12px "Helvetica Neue" }

需求：由于月份选择框会给默认接收的月份文本加入高亮显示，但需求要求将选中的月份标记高亮展示。

实现：使用elementUI的日期选择器提供的下拉框样式配置，并改写对应的样式实现。

懒得说话，直接上代码：

<template>
    <div>
        <dataPickSelf
            size='mini'
            v-model="scope.row.dateTime"
            type="month"
            :picker-options="pickerOptions"
            :clearable="false"
            :popper-class='dataPick'
            value-format="yyyy-MM"
            ref="dateMonth"
            >
        </dataPickSelf>
    </div>
</template>
<script>
import {DatePicker} from 'element-ui';
export default {
    data() {
        return {
            maxTime: '',
            dataPick: 'monthtime',
            pickerOptions:{
                disabledDate: time => {
                    return this.timeRe(time);
                },
            }
        }
    },
    components: {
       dataPickSelf:DatePicker
    },
    methods: {
        timeRe(time) {
            return time.getTime() >=new Date(this.maxTime).getTime() ;
        }
    }
}
</script>
<style lang="less" scoped>
.monthtime .el-month-table td.current:not(.disabled) .cell{
    font-weight: bold !important;
    color:#182452 !important;
}
.monthtime .el-month-table td.today .cell{
    color: #182452;
}
.monthtime .el-month-table td.current ~ td.today .cell{
    color: #606266;
}
.monthtime .el-month-table td.current ~ td.disabled.today .cell{
    color: #C0C4CC !important;
}
.monthtime .el-month-table tr td.disabled.today .cell{
    color: #C0C4CC !important;
}
.monthtime .el-month-table tr td.disabled.today .cell{
    color: #C0C4CC !important;
}
.monthtime .el-month-table td.today .cell {
    font-weight: normal;
}
.monthtime .el-month-table td.today .cell {
    color: #606266;
}
</style>

效果展示图：

默认是显示当前月，既【三月】是高亮的，选择【四月】的后，四月文本显示高亮。