低版本ant design vue 实现年度选择器

"ant-design-vue": "^1.6.5",
实现年度选择器, 绕了一大圈才找到解决办法,特在此记录

<a-form-item class="formItem_style"> <span class="form-item-title">年度</span> <a-date-picker v-model="searchForm.year" mode="year" placeholder="请选择年份" format="YYYY" :open='yearShowOne' @openChange="openChangeOne" @panelChange="handlePanelChange"/> </a-form-item>

在data中定义 yearShowOne:false, 用来控制选择面板的显示隐藏

handlePanelChange(value,mode){ console.log('面板变化:', value._d, mode); const date = new Date(value._d); const year = date.getFullYear(); console.log(year,"===year") this.searchForm.year = String(year); this.yearShowOne = false; }, openChangeOne(status){ if (status){ this.yearShowOne = true; } }

搞定

参照链接:https://juejin.cn/post/6844903859987415047?searchId=20251217085603EC206AE1C2D130D8503D

https://juejin.cn/post/6987679927185211429?searchId=20251217085603EC206AE1C2D130D8503D