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>

    效果展示图:

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

  • 相关阅读:
    WCF HelpPage 和自动根据头返回JSON XML
    Jquery及插件 应用
    Autofac Mvc Webapi注入笔记
    TransactionScope 出错 与基础事务管理器的通信失败
    工厂方法模式(Factory Method)与抽象工厂模式(Abstract Factory)
    Asp.net的异步处理模型Asp.net的异步如何提高服务器的吞吐量
    WCF 契约定义命名空间 的疑问
    常用的18个人情世故
    StatusCode
    web标准常见问题集合
  • 原文地址:https://www.cnblogs.com/min77/p/14511750.html
Copyright © 2011-2022 走看看