码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • vue年季度月联动筛选(el-cascader实现)


     

     默认显示当年当季当月

    1. <label class="font-weight">时间范围</label>&nbsp;&nbsp;
    2. <el-cascader
    3. placeholder="请选择"
    4. :options="timeOption"
    5. filterable
    6. clearable
    7. change-on-select
    8. v-model="timeRange"
    9. :props="{
    10. emitPath: true
    11. }"
    12. @change="getPage()"
    13. ></el-cascader>

     

    1. timeRange:'',//默认当年当季当月
    2. timeOption:[{
    3. value: '2023年',
    4. label: '2023年',
    5. children: [{
    6. value: '第一季度',
    7. label: '第一季度',
    8. children: [{
    9. value: '1月',
    10. label: '1月'
    11. },{
    12. value: '2月',
    13. label: '2月'
    14. },{
    15. value: '3月',
    16. label: '3月'
    17. }]
    18. }, {
    19. value: '第二季度',
    20. label: '第二季度',
    21. children: [{
    22. value: '4月',
    23. label: '4月'
    24. },{
    25. value: '5月',
    26. label: '5月'
    27. },{
    28. value: '6月',
    29. label: '6月'
    30. }]
    31. }, {
    32. value: '第三季度',
    33. label: '第三季度',
    34. children: [{
    35. value: '7月',
    36. label: '7月'
    37. },{
    38. value: '8月',
    39. label: '8月'
    40. },{
    41. value: '9月',
    42. label: '9月'
    43. }]
    44. }, {
    45. value: '第四季度',
    46. label: '第四季度',
    47. children: [{
    48. value: '10月',
    49. label: '10月'
    50. },{
    51. value: '11月',
    52. label: '11月'
    53. },{
    54. value: '12月',
    55. label: '12月'
    56. }]
    57. }]
    58. }],
    1. created(){
    2. this.getNowTimeRange();
    3. },
    4. getNowTimeRange() {
    5. //获取当前年
    6. const year=new Date().getFullYear()+'年';
    7. // 获取当前季度:
    8. var currMonth = new Date().getMonth() + 1;
    9. var currQuarter = Math.floor(
    10. currMonth % 3 == 0 ? currMonth / 3 : currMonth / 3 + 1
    11. );
    12. const info = {
    13. 1: "第一季度",
    14. 2: "第二季度",
    15. 3: "第三季度",
    16. 4: "第四季度"
    17. };
    18. const quarter = info[currQuarter];
    19. //获取当前月
    20. const monthNum =new Date().getMonth() + 1;
    21. const nowMonth= monthNum+'月';
    22. this.timeRange=[year,quarter,nowMonth];
    23. console.log("%c Line:528 🍿", "color:#3f7cff",this.timeRange);
    24. },

  • 相关阅读:
    优秀的 Verilog/FPGA开源项目介绍(三十一)- OFDM
    Qt Creator实例之图标主题
    html--彩虹马
    Hadoop中的YARN组件
    不会Python迟早失业?Python何以成为找工作必备技能(资料下载)
    常用Linux内核调试手段介绍 03——— 内核笔记
    Codeforces Round 734
    k8s nfs-client 添加挂载参数 —— 筑梦之路
    nginx 安全配置
    自监督学习的新前沿:大型模型在自然语言处理中的应用
  • 原文地址:https://blog.csdn.net/aZHANGJIANZHENa/article/details/134509803
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号