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

Ant Design Vue 年选择器

文章目录

  • 参考文档
  • 效果展示
  • 实现过程


参考文档

提示:这里可以添加本文要记录的大概内容:

DatePicker 日期选择框

大佬:搬砖小匠(Ant Design vue 只选择年)


提示:以下是本篇文章正文内容,下面案例可供参考

效果展示

请添加图片描述

实现过程

  1. 用于实现一个年份选择器的功能
  • a-date-picker 组件的 mode 属性设置为 “year”,使其成为一个年份选择器。
  • v-model 双向绑定了一个名为 model.year 的变量,用于与选择的年份数据同步。
  • 通过监听 a-date-picker 组件的 openChangepanelChange 事件,控制选择年组件的显示和隐藏,并将选择的年份赋值给 model.year 变量。
    <a-col :span="12"><a-form-model-item :label="$t('maMatchItem.form.year')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="year"><a-date-pickerplaceholder="请选择年"mode="year"v-model="model.year":open="dataopen"format="YYYY":allowClear="false"@openChange="openChangeYear"@panelChange="panelChangeYear"style="width: 100%"/></a-form-model-item></a-col>

在上面代码中要格外注意引号里面的内容: 别照抄

v-model="model.year"

model:是不是与系统对应

year:是不是与数据库字段对应

  1. 引入了 moment 库,用于对时间和日期进行操作和格式化。
  • moment 是 JavaScript 日期处理库,可用于解析、验证、操作和显示日期和时间。在本例中,它被用于处理年份的数据类型和格式化显示。
import moment from "moment"
  1. 这段代码的作用是在当前 Vue 组件中注册 moment 库的全局组件,以便在组件中使用 moment 库提供的所有方法和属性。
  • 这个组件是在组件的内部注册的。这样就可以在 templates 中使用一些 moment 相关的过滤器,例如:{{ someDate | moment(‘YYYY-MM-DD’) }}。
  export default {components: {moment},}
  1. 这段代码定义了Vue组件中的data数据对象,用于存储组件中需要响应式更新的数据。具体来说,它包含以下几个属性:
  • dataopen: 用于表示弹框是否打开,初始值为false,意味着默认情况下不打开弹框。
  • year: 用于存储当前选中的年份,初始值为当前时间的moment对象,即当前年份。
  • model: 用于存储组件中需要发送给后台查询数据的参数,它是一个包含year属性的对象,初始值为当前时间的moment对象,即当前年份。

这些数据在组件中可以直接使用和修改。同时由于使用了Vue的响应式数据机制,当这些数据发生改变时,相关的组件视图也会自动更新。

  data () {return {dataopen: false, // 默认是否打开弹框year: moment(),userId: '', // 保存用户idmodel:{// 对当前年格式进行校验year:moment().format("YYYY"),},}  }
  1. Vue组件中定义的两个方法,用于实现日期选择功能
  • openChangeYear(status):当点击选择框时,根据传入的状态打开或关闭日期组件用于选择年份。
  • panelChangeYear(value):当选择年份后,将用户选择的年份存储到model.year中,并关闭日期组件弹框。

这些方法主要用于在用户选择年份时,处理日期组件的打开和关闭、以及将选择的年份存储到可用于查询的参数中。

    methods: {// 点击选择框事件 弹出日期组件选择年openChangeYear(status) {if (status) {this.dataopen = true;} else {this.dataopen = false;}},// 选择年之后 关闭弹框panelChangeYear(value){this.model.year = value.format('YYYY');this.dataopen = false;},

这行代码是对格式进行校验

this.model.year = value.format('YYYY');

否则会出现下面报错:

Data truncation: Data too long for column ‘year’ at row 1

相关文章:

Ant Design Vue 年选择器

文章目录 参考文档效果展示实现过程 参考文档 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; DatePicker 日期选择框 大佬&#xff1a;搬砖小匠&#xff08;Ant Design vue 只选择年&#xff09; 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案…...

AGM CPLD 应用指南

AGM的部分料号跟Altera 硬件Pin to Pin兼容&#xff0c;映射关系表如下&#xff1a; EPM240T100CxN—>AG256SL100(CPLD) EPM240T100IxN---->AG256SL100(CPLD) EPM570T100CxN—>AG576SL100(CPLD) EPM570T100IxN---->AG576SL100(CPLD) EPM570T144CxN—>AG576SL144…...

(1)词法分析器

简单来说就是写一个函数&#xff0c;这个函数的输入是文字流&#xff0c;我们要把这个文字流的标签搞出来 比如某种语言标签如下 enum Token {tok_eof -1,// commandstok_def -2,tok_extern -3,// primarytok_identifier -4,tok_number -5, }; 然后词法分析器相当于一个…...

丢掉破解版,官方免费了!!!

哈喽&#xff01;大家好。 几天不见&#xff0c;今天给大家带来一款海外的神器&#xff0c;官方宣布完全免费&#xff0c;但仅限于个人与教育用途&#xff0c;切勿商用噢&#xff01; 不要看这个软件名字普普通通&#xff0c;实际上内蕴乾坤&#xff01; 接下来看我给大家炫一…...

Termux

touch myfile.txt termux-setup-storage 访问手机文件 参考地址 apt update apt upgrade 命令参考链接...

yolo目标检测+目标跟踪+车辆计数+车辆分割+车道线变更检测+速度估计

这个项目使用YOLO进行车辆检测&#xff0c;使用SORT&#xff08;简单在线实时跟踪器&#xff09;进行车辆跟踪。该项目实现了以下任务&#xff1a; 车辆计数车道分割车道变更检测速度估计将所有这些详细信息转储到CSV文件中 车辆计数是指在道路上安装相应设备&#xff0c;通过…...

基于Java酒店管理系统

基于Java酒店管理系统 功能需求 1、客房管理&#xff1a;系统需要提供客房的信息管理功能&#xff0c;包括客房的类型、数量、价格、状态&#xff08;如空闲、已预订、已入住等&#xff09;等信息。此外&#xff0c;系统还应支持对客房信息的修改和查询操作。 2、预订管理&a…...

GoLong的学习之路,进阶,微服务之原理,RPC

其实我早就很想写这篇文章了&#xff0c;RPC是一切现代计算机应用中非常重要的思想。也是微服务和分布式的总体设计思想。只能说是非常中要&#xff0c;远的不说&#xff0c;就说进的这个是面试必问的。不管用的上不&#xff0c;但是就是非常重要。 文章目录 RPC的原理本地调用…...

vLLM介绍

简介 vLLM 工程github地址 Paged attention论文地址 vLLM开发者介绍 Woosuk Kwon vLLM: A high-throughput and memory-efficient inference and serving engine for LLMs. SkyPilot: A framework for easily and cost effectively running machine learning workloads on …...

DevOps搭建(一)-之swappiness安装详细步骤

1、安装swappiness yum install procps 修改配置 vim /etc/sysctl.conf 在配置文件中添加参数 vm.swappiness10 使生效 sysctl -p 如何确认swap分区是否开启 # free -mtotal used free shared buff/cache available Mem: 971 …...

微软发布Orca2,“调教式”教会小规模大语言模型如何推理!

我们都知道在大多数情况下&#xff0c;语言模型的体量和其推理能力之间存在着正相关的关系&#xff1a;模型越大&#xff0c;其处理复杂任务的能力往往越强。 然而&#xff0c;这并不意味着小型模型就永远无法展现出色的推理性能。最近&#xff0c;奶茶发现了微软的Orca2公开了…...

JVM 内存回收算法

文章目录 JVM 内存回收算法有哪些&#xff1a;一、分代收集1.分代收集理论2.垃圾收集 二、垃圾收集算法1. 标记-清除算法2. 复制算法3. 标记-整理算法 JVM就是Java虚拟机&#xff0c;JVM的内回收对其原理的认识也是很有必要的&#xff0c;当底层的系统出现内存溢出或者内存泄漏…...

11.28~11.29基本二叉树的性质、定义、复习;排序算法;堆

完全二叉树&#xff08;Complete Binary Tree&#xff09;是一种特殊的二叉树结构&#xff0c;它具有以下特点&#xff1a; 所有的叶子节点都集中在树的最后两层&#xff1b;最后一层的叶子节点都靠左排列&#xff1b;除了最后一层&#xff0c;其他层的节点数都达到最大值。 …...

轮播插件Slick.js使用方法详解

相比于Swiper而选择使用Slick.js的原因主要是因为其兼容不错并且在手机端的滑动效果更顺畅 参数&#xff1a; 1.基本使用&#xff1a;一般使用只需前十个属性 $(.box ul).slick({autoplay: true, //是否自动播放pauseOnHover: false, //鼠标悬停暂停自动播放speed: 1500, //…...

postgresql pg_hba.conf 配置详解

配置文件之pg_hba.conf介绍 该文件用于控制访问安全性&#xff0c;管理客户端对于PostgreSQL服务器的访问权限&#xff0c;内容包括&#xff1a;允许哪些用户连接到哪个数据库&#xff0c;允许哪些IP或者哪个网段的IP连接到本服务器&#xff0c;以及指定连接时使用的身份验证模…...

使用粗糙贴图制作粗纹皮革手提包3D模型

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 当谈到游戏角色的3D模型风格时&#xff0c;有几种不同的风格&#xf…...

Chrome清除特定网站的Cookie,从而让网址能正常运行(例如GPT)

Chrome在使用某些网址的时候&#xff0c;例如GPT的时候&#xff0c;可能会出现无法访问这个网址的情况&#xff0c;就是点不动啥的 只需要把你需要重置的网址删除就好了...

history路由解决刷新出现404的问题

本文具体重点介绍怎么解决浏览器路由&#xff08;history模式&#xff09;解决404的问题。 在项目打包上线时&#xff0c;如果采用的是哈希模式&#xff0c;不会出现404&#xff0c;原因是 url 中 # 号后面的内容不会发给后端当作资源路径请求服务器。 具体流程&#xff08;哈…...

ubuntu22下使用nvidia 2080T显卡部署pytorch

1.直接到NVIDA官网下载相应的驱动&#xff0c;然后安装官方驱动 | NVIDIA 2.下载相应版本cuda&#xff0c;并安装&#xff0c;安装时不安装驱动 3.conda install pytorch2.1.0 torchvision0.16.0 torchaudio2.1.0 pytorch-cuda12.1 -c pytorch -c nvidia 安装pytorch。 安装…...

【Spark基础】-- 理解 Spark shuffle

目录 前言 1、什么是 Spark shuffle? 2、Spark 的三种 shuffle 实现 3、参考 前言 以前,Spark 有3种不同类型的 shuffle 实现。每种实现方式都有他们自己的优缺点。在我们理解 Spark shuffle 之前,需要先熟悉 Spark 的 execution model 和一些基础概念,如:MapReduce、…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

代码规范和架构【立芯理论一】(2025.06.08)

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

消防一体化安全管控平台:构建消防“一张图”和APP统一管理

在城市的某个角落&#xff0c;一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延&#xff0c;滚滚浓烟弥漫开来&#xff0c;周围群众的生命财产安全受到严重威胁。就在这千钧一发之际&#xff0c;消防救援队伍迅速行动&#xff0c;而豪越科技消防一体化安全管控平台构建的消防“…...

Pydantic + Function Calling的结合

1、Pydantic Pydantic 是一个 Python 库&#xff0c;用于数据验证和设置管理&#xff0c;通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发&#xff08;如 FastAPI&#xff09;、配置管理和数据解析&#xff0c;核心功能包括&#xff1a; 数据验证&#xff1a;通过…...