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>

效果展示圖：

默認是顯示當前月，既【三月】是高亮的，選擇【四月】的后，四月文本顯示高亮。