网站开发与管理课程,seo推广是什么工作,商贸公司网站建设,凡科做网站怎么样文章目录 参考文档效果展示实现过程 参考文档
提示#xff1a;这里可以添加本文要记录的大概内容#xff1a;
DatePicker 日期选择框
大佬#xff1a;搬砖小匠#xff08;Ant Design vue 只选择年#xff09; 提示#xff1a;以下是本篇文章正文内容#xff0c;下面案… 文章目录 参考文档效果展示实现过程 参考文档
提示这里可以添加本文要记录的大概内容
DatePicker 日期选择框
大佬搬砖小匠Ant Design vue 只选择年 提示以下是本篇文章正文内容下面案例可供参考
效果展示 实现过程
用于实现一个年份选择器的功能
a-date-picker 组件的 mode 属性设置为 “year”使其成为一个年份选择器。v-model 双向绑定了一个名为 model.year 的变量用于与选择的年份数据同步。通过监听 a-date-picker 组件的 openChange 和 panelChange 事件控制选择年组件的显示和隐藏并将选择的年份赋值给 model.year 变量。 a-col :span12a-form-model-item :label$t(maMatchItem.form.year) :labelCollabelCol :wrapperColwrapperCol propyeara-date-pickerplaceholder请选择年modeyearv-modelmodel.year:opendataopenformatYYYY:allowClearfalseopenChangeopenChangeYearpanelChangepanelChangeYearstylewidth: 100%//a-form-model-item/a-col在上面代码中要格外注意引号里面的内容 别照抄
v-modelmodel.yearmodel是不是与系统对应
year是不是与数据库字段对应
引入了 moment 库用于对时间和日期进行操作和格式化。
moment 是 JavaScript 日期处理库可用于解析、验证、操作和显示日期和时间。在本例中它被用于处理年份的数据类型和格式化显示。
import moment from moment这段代码的作用是在当前 Vue 组件中注册 moment 库的全局组件以便在组件中使用 moment 库提供的所有方法和属性。
这个组件是在组件的内部注册的。这样就可以在 templates 中使用一些 moment 相关的过滤器例如{{ someDate | moment(‘YYYY-MM-DD’) }}。 export default {components: {moment},}这段代码定义了Vue组件中的data数据对象用于存储组件中需要响应式更新的数据。具体来说它包含以下几个属性
dataopen: 用于表示弹框是否打开初始值为false意味着默认情况下不打开弹框。year: 用于存储当前选中的年份初始值为当前时间的moment对象即当前年份。model: 用于存储组件中需要发送给后台查询数据的参数它是一个包含year属性的对象初始值为当前时间的moment对象即当前年份。
这些数据在组件中可以直接使用和修改。同时由于使用了Vue的响应式数据机制当这些数据发生改变时相关的组件视图也会自动更新。 data () {return {dataopen: false, // 默认是否打开弹框year: moment(),userId: , // 保存用户idmodel:{// 对当前年格式进行校验year:moment().format(YYYY),},} }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
