Ant Design Vue 年选择器

文章目录


参考文档

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

DatePicker 日期选择框

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


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

效果展示

实现过程

  1. 用于实现一个年份选择器的功能
  • a-date-picker 组件的 mode 属性设置为 "year",使其成为一个年份选择器。
  • v-model 双向绑定了一个名为 model.year 的变量,用于与选择的年份数据同步。
  • 通过监听 a-date-picker 组件的 openChangepanelChange 事件,控制选择年组件的显示和隐藏,并将选择的年份赋值给 model.year 变量。
javascript 复制代码
    <a-col :span="12">
       <a-form-model-item :label="$t('maMatchItem.form.year')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="year">
        <a-date-picker
          placeholder="请选择年"
          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>

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

c 复制代码
v-model="model.year"

model:是不是与系统对应

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

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

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

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

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

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

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

javascript 复制代码
this.model.year = value.format('YYYY');

否则会出现下面报错:

Data truncation: Data too long for column 'year' at row 1

相关推荐
江号软件分享8 分钟前
无接触服务的关键:二维码生成识别技术详解
前端
江号软件分享8 分钟前
如何利用取色器实现跨平台色彩一致性
前端
灰海12 分钟前
封装WebSocket
前端·网络·websocket·网络协议·vue
前端小巷子23 分钟前
深入理解TCP协议
前端·javascript·面试
万少24 分钟前
鸿蒙外包的十大生存法则
前端·后端·面试
顽疲38 分钟前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
开开心心就好1 小时前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享1 小时前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css