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

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

实现：使用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>

效果展示图：

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