Ant Design vue 只选择年

前言

• 公司使用jeecg开发项目，但是jeecg 前端用Ant Design vue组件，没有选择年份的。需要手动改造
• 效果图如下

代码

<a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="年">
              <a-date-picker
                placeholder="请选择年"
                mode="year"
                v-model="queryParam.years"
                :open="dataopen"
                format="YYYY"
                :allowClear="false"
                @openChange="openChangeYear"
                @panelChange="panelChangeYear"
              />
            </a-form-item>
          </a-col>
<script>
 import moment from 'moment';
 export default {
 	components: {
 		moment
 	}
 }
 data () {
      return {
      	dataopen: false, // 默认是否打开弹框
      	year: moment(),
        queryParam:{
          years:moment(),
        },
      }
 }
 methods: {
 	// 点击选择框事件 弹出日期组件选择年
 	openChangeYear(status) {
        if (status) {
          this.dataopen = true;
        } else {
          this.dataopen = false;
        }
    },
    // 选择年之后 关闭弹框
    panelChangeYear(value){
        this.queryParam.years = value;
        this.dataopen = false;
    },
 }
</script>

注意点

• 选择日期之后传入到后台 还是年月日的日期 但是此日期不是UTC日期
• 需要通过特殊手段格式化下（平常的格式化对它没有用）
• 格式化操作地址 ：点击链接