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

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

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

懒得说话,直接上代码:

  1. <template>
  2. <div>
  3. <dataPickSelf
  4. size='mini'
  5. v-model="scope.row.dateTime"
  6. type="month"
  7. :picker-options="pickerOptions"
  8. :clearable="false"
  9. :popper-class='dataPick'
  10. value-format="yyyy-MM"
  11. ref="dateMonth"
  12. >
  13. </dataPickSelf>
  14. </div>
  15. </template>
  16. <script>
  17. import {DatePicker} from 'element-ui';
  18. export default {
  19. data() {
  20. return {
  21. maxTime: '',
  22. dataPick: 'monthtime',
  23. pickerOptions:{
  24. disabledDate: time => {
  25. return this.timeRe(time);
  26. },
  27. }
  28. }
  29. },
  30. components: {
  31. dataPickSelf:DatePicker
  32. },
  33. methods: {
  34. timeRe(time) {
  35. return time.getTime() >=new Date(this.maxTime).getTime() ;
  36. }
  37. }
  38. }
  39. </script>
  40. <style lang="less" scoped>
  41. .monthtime .el-month-table td.current:not(.disabled) .cell{
  42. font-weight: bold !important;
  43. color:#182452 !important;
  44. }
  45. .monthtime .el-month-table td.today .cell{
  46. color: #182452;
  47. }
  48. .monthtime .el-month-table td.current ~ td.today .cell{
  49. color: #606266;
  50. }
  51. .monthtime .el-month-table td.current ~ td.disabled.today .cell{
  52. color: #C0C4CC !important;
  53. }
  54. .monthtime .el-month-table tr td.disabled.today .cell{
  55. color: #C0C4CC !important;
  56. }
  57. .monthtime .el-month-table tr td.disabled.today .cell{
  58. color: #C0C4CC !important;
  59. }
  60. .monthtime .el-month-table td.today .cell {
  61. font-weight: normal;
  62. }
  63. .monthtime .el-month-table td.today .cell {
  64. color: #606266;
  65. }
  66. </style>

效果展示图:

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

elementUI实现日期框选中项文本高亮的更多相关文章

  1. MVC中导航菜单,选中项的高亮问题。

      这个菜单是放在母板页的.比如当前选中的是异常业务监控.如果页面刷新了.就会变成第一张图..选择其他的选项也会,因为页面会刷新嘛.. 怎么处理这个问题了? 答案是记录当前页面的url. 有两种解决思 ...

  2. MVC中导航菜单,选中项的高亮问题。。

    先上图:             这个菜单是放在母板页的.比如当前选中的是异常业务监控.如果页面刷新了.就会变成第一张图..选择其他的选项也会,因为页面会刷新嘛.. 怎么处理这个问题了? 答案是记录当 ...

  3. 项目element-ui checkbox里面获取选中项 实现批量删除 修改

    <el-table :data="tableData" stripe border style="width: 100%" @selection-chan ...

  4. jquery获取select多选框选中的文本值

    $("#select option:selected").text();

  5. jquery获取选中的文本和值

    jquery获取选中的文本和值 1.说明 (1)获取select下拉框选中的索引       $("#selection").get(0).selectedIndex; (2)获取 ...

  6. jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等

    简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...

  7. 【vue系列】elementUI 穿梭框右侧获取当前选中项的值的思路

    最近 做了一个需求 在查询结果的表格中,选取(可多选)一些值,获取到保单号后,打开一个elementUI的穿梭框,然后获取到所有业务员,选取一些业务员后,将上一步获取到的保单号传递给业务员. 画个示意 ...

  8. jquery 获取一组元素的选中项 - 函数、jquery获取复选框值、jquery获取单选按钮值

    做表单提交时,如果现在还在用form提交,用户体验很差,所以一般使用ajax提交. 其中需要获取每个表单输入元素的值,获取的时候像文本框这些还好说,Jquery提供了 .val() 方法,获取很方便, ...

  9. Js获取下拉框选定项的值和文本

    Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...

随机推荐

  1. [视频] Docker 安装 nginx + rtmp

    目录 拉取镜像 创建并运行容器,映射出两个端口1935.80 将视频文件推流至rtmp服务器 使用ffplay播放rtmp流 拉取镜像 docker pull alfg/nginx-rtmp 创建并运 ...

  2. cdn jsdelivr + github releases 以wordpress sakura主题manifest为例

    1 创建github repository 在本地创建文件,这里为文件夹 /manifest 在github创建库wordpresscdn,上传 /manifest到库中 2 github relea ...

  3. springboot demo(一)快速开始

    快速入门 maven构建项目 1.访问http://start.spring.io/ 2.选择构建工具Maven Project.Spring Boot版本2.26以及一些工程基本信息,点击" ...

  4. VSCode & outline & source code

    VSCode & outline & source code Dart 源码学习 outline 速览 dart-core List class instance-methods ht ...

  5. 三维码 & 二维码 & 一维码

    三维码 & 二维码 & 一维码 3D, 2D, 1D 防伪国家标准 -<结构三维码防伪技术条件> http://www.xinhuanet.com/tech/2019-12 ...

  6. React Hooks 内部实现原理

    React Hooks 内部实现原理 源码分析 // 链表 React Hooks 原理剖析 refs https://reactjs.org/docs/hooks-intro.html https: ...

  7. Micro Frontends & microservices

    Micro Frontends & microservices https://micro-frontends.org/ https://github.com/neuland/micro-fr ...

  8. taro taro 多端同步调试

    taro 多端同步调试 debug https://nervjs.github.io/taro/docs/envs-debug.html

  9. Node.js & ES modules & .mjs

    Node.js & ES modules & .mjs Node.js v13.9.0 https://nodejs.org/api/esm.html https://nodejs.o ...

  10. js clear copy

    js clear copy window.getSelection().empty() & window.getSelection().removeAllRanges() & docu ...