zoukankan      html  css  js  c++  java
  • 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>

    效果展示图:

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

  • 相关阅读:
    List of the best open source software applications
    Owin对Asp.net Web的扩展
    NSwag给api加上说明
    'workspace' in VS Code
    unable to find valid certification path to requested target
    JMeter的下载以及安装使用
    exception disappear when forgot to await an async method
    Filter execute order in asp.net web api
    记录web api的request以及response(即写log)
    asp.net web api的源码
  • 原文地址:https://www.cnblogs.com/min77/p/14511750.html
Copyright © 2011-2022 走看看