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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/207064.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Caliper对Fabric地basic链码进行性能测试

如果你需要对fabric网络中地合约进行吞吐量、延迟等性能进行评估&#xff0c;可以使用Caliper来实现&#xff0c;会返回给你一份网页版的直观测试报告。下面是对test-network网络地basic链码地测试过程。 目录 1. 建立caliper-workspace文件夹2. 安装npm等3. calipe安装4. 创建…

使用TransBigData组件实现个人手机定位功能

目录 一、引言 二、技术背景 三、实现逻辑 四、代码实现 五、优化与注意事项&#xff1a; 六、总结 摘要&#xff1a;随着现代社会对定位服务的需求日益增加&#xff0c;实现个人手机定位功能成为了开发者的研究热点。本文详细阐述了如何使用Python和TransBigData组件实现…

Python 从入门到精通 学习笔记 Day03

Python 从入门到精通 第三天 今日目标 流程控制语句、退出循环、练习学习的内容 一、流程控制语句 流程控制的三种方式&#xff1a;顺序语句、双分支语句、循环语句 双分支语句 Python 的双分支语句使用if-else语句实现。 其语法结构如下: if条件:#如果条作为真&#xff…

Facebook广告报告指标CPC

在Facebook广告中&#xff0c;CPC可以作为一个关键指标来评估广告效果和投资回报。较低的CPC意味着广告主能以更低的价格获得更多的点击量&#xff0c;从而降低广告投放成本。而较高的CPC可能暗示着广告主需要更大的预算才能获得相同数量的点击。本文小编将讲讲Facebook广告报告…

k8s上安装KubeSphere

安装KubeSphere 前置环境安装nfs-server文件系统配置nfs-client配置默认存储创建了一个存储类metrics-server集群指标监控组件 安装KubeSphere执行安装查看安装进度 前置环境 下载配置我都是以CentOS 7.9 安装 k8s(详细教程)文章的服务器作为示例&#xff0c;请自行修改为自己的…

2.vue学习笔记(目录结构+模板语法+属性绑定)

1.目录结构 1.vscode ——VSCode工具的配置文件夹 2.node_modules ——Vue项目的运行依赖文件夹 3.public ——资源文件夹&#xff08;浏览器图标&#xff09; 4.src ——源码文件夹 5..gitgnore ——git忽略文件 6.index.html ——如果html文件 7.package.json —…

基于SpringBoot+Vue学生成绩管理系统前后端分离(源码+数据库)

一、项目简介 本项目是一套基于SpringBootVue学生成绩管理系统&#xff0c;主要针对计算机相关专业的正在做bishe的学生和需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目可以直接作为bishe使用。 项目都经过严格调试&#xff0c;确…

虚幻学习笔记10—C++函数与蓝图的通信

一、前言 除了上一章C变量与蓝图通信讲的变量能与蓝图通信外&#xff0c;还有函数和枚举也可以和蓝图通信。函数的关键字为”UFUNCTION“、枚举的关键字为”UENUM“。 二、实现 2.1、BlueprintCallable蓝图中调用 该函数时带执行的&#xff0c;带入如下。编译成功后在蓝图中输…

来自Sui的温馨建议:保护您的Web3私钥

当您安装一个钱包并创建Sui账户时&#xff0c;钱包包含一个公钥和一个私钥。保护好私钥的安全非常重要&#xff0c;从而可以保护您的Sui资产&#xff0c;包括钱包中的任何tokens。 公钥加密技术是几十年前开发的&#xff0c;是当今互联网上大多数安全交易的基础&#xff0c;包…

Navicat Premium 16 for Mac/Windows:高效的数据库开发工具

Navicat Premium 16是一款功能强大的数据库开发工具&#xff0c;为开发人员提供了全面的工具和功能&#xff0c;帮助他们更高效地进行数据库开发和管理。不论是初学者还是专业开发人员&#xff0c;Navicat Premium 16都能满足他们的需求&#xff0c;并提供直观、易用的界面。 …

【深度学习】AlexNet网络实现猫狗分类

【深度学习】AlexNet网络实现猫狗分类 AlexNet简介 AlexNet是一种卷积神经网络&#xff08;Convolutional Neural Network&#xff0c;CNN&#xff09;模型&#xff0c;它在2012年的ImageNet图像分类挑战赛中取得了重大突破&#xff0c;引发了深度学习在计算机视觉领域的热潮…

为“异常”努力是值得的

异常是OO语言处理错误的方式,在C中&#xff0c;鼓励使用异常。侯捷再书中谈起异常&#xff0c;“十年前撰写“未将异常考虑在内的”函数是为一种美好实践&#xff0c;而今我们致力于写出“异常安全码”。”可见异常安全的重要。 说起异常安全&#xff0c;首先就要是异常的出现…

Leetcode—213.打家劫舍II【中等】

2023每日刷题&#xff08;五十二&#xff09; Leetcode—213.打家劫舍II 算法思路 实现代码 class Solution { public:// 左闭右开int rob1(vector<int>& nums, int start, int end) {int n nums.size();int f0 0, f1 0, new_f 0;for(int i start; i < end…

机器学习硬件十年:性能变迁与趋势

本文分析了机器学习硬件性能的最新趋势&#xff0c;重点关注不同GPU和加速器的计算性能、内存、互连带宽、性价比和能效等指标。这篇分析旨在提供关于ML硬件能力及其瓶颈的全面视图。本文作者来自调研机构Epoch&#xff0c;致力于研究AI发展轨迹与治理的关键问题和趋势。 &…

【送书活动四期】被GitHub 要求强制开启 2FA 双重身份验证,我该怎么办?

记得是因为fork了OpenZeppelin/openzeppelin-contracts的项目&#xff0c;之后就被GitHub 要求强制开启 2FA 双重身份验证了&#xff0c;一拖再拖&#xff0c;再过几天帐户操作将受到限制了&#xff0c;只能去搞一下了 目录 2FA是什么为什么要开启 2FA 验证GitHub 欲在整个平台…

消息队列 - RabbitMQ

消息队列 - RabbitMQ 1. 初识 MQ1.1 同步调用1.2 异步调用1.3.技术选型 2. RabbitMQ2.1 安装2.2 收发信息2.2.1 交换机(Exchange)2.2.2 队列2.2.3 绑定关系2.2.4 发送消息 2.3 数据隔离 1. 初识 MQ 微服务一旦拆分&#xff0c;必然涉及到服务之间的相互调用&#xff0c;之前讲…

编译 Android gradle-4.6-all.zip 报错问题记录

编译 Android gradle-4.6-all.zip 报错问题记录 方法一&#xff1a;替换资源&#xff1a;方法二&#xff1a;修改源方法三&#xff1a;修改版本 编译时候无法下载 gradle-4.6-all Downloading https://services.gradle.org/distributions/gradle-4.6-all.zip 方法一&#xf…

《一念关山》热度破万,爱奇艺古装赛道出尽风头

​刘诗诗重回古装剧、新式武侠公路片、质感细腻的镜头美学......看点满满的《一念关山》频频登上热搜&#xff0c;俘获了大批观众的心。 开播首日热度就刷新了爱奇艺2023年站内纪录&#xff0c;《一念关山》作为2023年爱奇艺在古装赛道的收官之作&#xff0c;口碑和热度兼收。…

一文详解Java反射

文章目录 反射是什么&#xff1f;反射的作用所有方法汇总一、加载Class对象二、加载类的构造器对象三、加载类的成员变量四、加载类的成员方法 反射是什么&#xff1f; 反射就是&#xff1a;加载类&#xff0c;并允许以编程的方式解剖类中的某个成分&#xff08;成员变量&#…

实战:Docker Compose 下 Nginx、Java、Mysql 和 Redis 服务协同部署(包含解决浏览器访问Linux部署服务器本地资源问题)

1. 背景 在该实战中&#xff0c;我们将探讨如何使用Docker Compose协同部署Nginx、Java、Mysql和Redis服务&#xff0c;实现一个视频上传与展示的应用。具体需求如下&#xff1a; Java应用负责上传视频和图片资源到Nginx目录下&#xff0c;作为资源服务器。Nginx服务作为静态…