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,一经查实,立即删除!

相关文章

光标虽小,但是能让其凭空消失的原因不少,需要仔细检查

在Windows 10中遇到鼠标光标有问题吗?我们已经为你提供了所需的修复程序。 光标消失的原因 光标不断消失可能是由各种原因引起的,因此有可能找到各种各样的解决方案。光标可能根本无法工作,或者在特定情况下可能会消失。鼠标按钮甚至可能在光标隐藏时工作。 以下是用户注…

如何验证一个URL是否合法

在JavaScript中&#xff0c;可以使用正则表达式&#xff08;RegExp&#xff09;或使用内置的URL对象来校验一个URL。下面是一些常用的方法以及对应的代码示例&#xff1a; 使用正则表达式进行校验&#xff1a; function validateURL(url) {const pattern /^(https?:\/\/)?…

使用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;请自行修改为自己的…

2024年软考科目怎么选?(选科指引)

新手在准备报考软考时&#xff0c;都会遇到这样的一个问题——科目这么多&#xff0c;我适合考什么&#xff1f;要想知道自己适合报什么科目&#xff0c;就需要了解每个科目是什么&#xff0c;考什么等一系列的问题。今天给大家分享一下。 软考包含什么科目&#xff1f; 软考…

facebook广告相比谷歌广告的优势

Facebook广告相比谷歌广告的优势主要体现在以下方面&#xff1a; 用户数据丰富&#xff1a;Facebook拥有庞大的用户数据&#xff0c;包括人口、兴趣、行为等多个维度&#xff0c;这些数据可以帮助广告主更准确地定位到目标受众。相比之下&#xff0c;谷歌广告的用户数据相对较…

android快速网络请求之android-networking

今天介绍一个知道的人不多的库&#xff0c;写个简单的页面什么的。用起来很爽&#xff1f;如果你疑惑那么多开源的网络库为啥不用&#xff1f; 因为这个简单方便。拿来就用。经过这几天的实践。确实可以。推荐一下 如果你需要 GITHUB 首先。引入依赖 implementation com.ami…

MySQL 数据迁移要点

目录 1. 相同版本的迁移 2. 不用版本的迁移 3. 不同数据库的迁移 数据库迁移就是把数据从一个系统移动到另一个系统上&#xff0c;迁移过程其实就是在源数据库备份和目标数据库恢复的过程组合。迁移的原因是多种多样的&#xff0c;比如&#xff1a; 需要安装新的数据库服务…

elasticsearch中LessThen遇到的坑

开发中&#xff0c;使用到LessThen-小于某个参数的逻辑查询&#xff0c;如下&#xff1a; /// <summary> /// 查询状态已发布&#xff08;状态小于2&#xff09;的政策要闻分页 /// </summary> /// <param name"input"></param> /// <re…

使用OkHttp上传本地图片及参数

下面以一个例子来讲解在项目中如何使用OKHttp来对本地图片做个最简单的上传功能&#xff0c;基本上无封装&#xff0c;只需要简单调用便可&#xff08;对于OKHttp的引入不再单独做介绍&#xff09;。 1&#xff1a;构建上传图片附带的参数&#xff08;params&#xff09; Map…

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;确…

ElasticSearch中的分析器是什么?

在Elasticsearch中&#xff0c;分析器&#xff08;Analyzer&#xff09;是一个用于文本分析的重要组件。它定义了如何将文本分解成单词和子词&#xff0c;这对于索引和搜索是非常重要的。 在Elasticsearch中&#xff0c;分析器定义了如何将文本转换为可以被索引和搜索的形式。…

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

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

macOS 获取文件夹大小

macOS 获取文件夹大小 获取文件夹大小的扩展如下&#xff1a; extension URL {var fileSize: Int? { // in bytesdo {let val try self.resourceValues(forKeys: [.totalFileAllocatedSizeKey, .fileAllocatedSizeKey])return val.totalFileAllocatedSize ?? val.fileAll…

来自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;并提供直观、易用的界面。 …