当前位置: 首页 > news >正文

vue elementui 年份列表和月份列表

简介

年份可以使用elementui自带的el-date-picker组件,月份列表会同时显示出年份,所以我用自定义列表写一个。

在这里插入图片描述

年份

  <el-date-picker
    v-model="listQuery.xxx"
    type="year"
    value-format="yyyy"
    placeholder="请选择年份">
  </el-date-picker>

月份

vue文件

 <el-select v-model="listQuery.submissionDataMonth" size="mini"
            filterable
            placeholder="请选择报送数据月份"
            clearable>
   <el-option
     v-for="item in monthList"
     :key="item.value"
     :label="item.label"
     :value="item.value"
   />
 </el-select>

js文件

  data() {
    return {
      // 月份
      monthList: [
        { label: "1月", value: 1 },
        { label: "2月", value: 2 },
        { label: "3月", value: 3 },
        { label: "4月", value: 4 },
        { label: "5月", value: 5 },
        { label: "6月", value: 6 },
        { label: "7月", value: 7 },
        { label: "8月", value: 8 },
        { label: "9月", value: 9 },
        { label: "10月", value: 10 },
        { label: "11月", value: 11 },
        { label: "12月", value: 12 }
      ],

相关文章:

  • sql语句导出到powerDesigner navicat导出到powerDesigner
  • doesn‘t work properly without JavaScript enabled. Please enable it to continue 的原因之一
  • vue axios修改content-type
  • phpstudy2018+vc运行库
  • springboot 文档
  • powerdesigner 平移的快捷键
  • 让win11右键默认显示更多选项的软件
  • jpa查询只返回需要的单个/多个字段
  • powerDesigner 生成SQL时没有注释问题
  • 用一个list去接收另一个list的元素
  • vue list列表新增元素
  • JAVA判断是否是Ajax请求
  • java判断User-Agent 是不是来自于手机
  • console.log只显示[object],怎么看对象里面内容
  • 正则表达式\S\s的意思
  • Consul Config 使用Git做版本控制的实现
  • ES6简单总结(搭配简单的讲解和小案例)
  • ES6系列(二)变量的解构赋值
  • IDEA常用插件整理
  • JavaScript DOM 10 - 滚动
  • javascript 总结(常用工具类的封装)
  • JavaScript中的对象个人分享
  • JS创建对象模式及其对象原型链探究(一):Object模式
  • js对象的深浅拷贝
  • React中的“虫洞”——Context
  • spring boot下thymeleaf全局静态变量配置
  • Spring Cloud Feign的两种使用姿势
  • SQLServer之索引简介
  • 前端之Sass/Scss实战笔记
  • 区块链技术特点之去中心化特性
  • 如何利用MongoDB打造TOP榜小程序
  • 三分钟教你同步 Visual Studio Code 设置
  • 为物联网而生:高性能时间序列数据库HiTSDB商业化首发!
  • 回归生活:清理微信公众号
  • 机器人开始自主学习,是人类福祉,还是定时炸弹? ...
  • #鸿蒙生态创新中心#揭幕仪式在深圳湾科技生态园举行
  • (2)STM32单片机上位机
  • (4)事件处理——(6)给.ready()回调函数传递一个参数(Passing an argument to the .ready() callback)...
  • (8)STL算法之替换
  • (C#)Windows Shell 外壳编程系列4 - 上下文菜单(iContextMenu)(二)嵌入菜单和执行命令...
  • (cljs/run-at (JSVM. :browser) 搭建刚好可用的开发环境!)
  • (vue)el-checkbox 实现展示区分 label 和 value(展示值与选中获取值需不同)
  • (搬运以学习)flask 上下文的实现
  • (超简单)构建高可用网络应用:使用Nginx进行负载均衡与健康检查
  • (论文阅读40-45)图像描述1
  • ***测试-HTTP方法
  • **PHP分步表单提交思路(分页表单提交)
  • .helper勒索病毒的最新威胁:如何恢复您的数据?
  • .Net 8.0 新的变化
  • .netcore如何运行环境安装到Linux服务器
  • .NET轻量级ORM组件Dapper葵花宝典
  • .net通用权限框架B/S (三)--MODEL层(2)
  • .php结尾的域名,【php】php正则截取url中域名后的内容
  • .sh文件怎么运行_创建优化的Go镜像文件以及踩过的坑
  • :如何用SQL脚本保存存储过程返回的结果集