[JavaScript知识库]ant-design-vue range-picker日期范围组件 mode=“[‘year‘ ‘year‘]“时 开始和结束日期的相互禁用失效的问题

ant-design-vue 的 range-picker组件，设置属性 :mode="[‘year’, ‘year’]" ，设置之后：开始和结束日期的相互禁用失效了，正常的效果应该是开始日期不能大于结束日期，结束日期不能小于开始日期，正常效果如图所示
由于官方提供的disabledDate api也是失效的，不知道有没有更好的解决方式，我这里是用的原生的dom操作添加css样式 达到禁用点击事件的方式实现类似的效果
解决如下：

<template>
  <div>
    <a-range-picker
      :placeholder="['开始时间', '结束时间']"
      format="YYYY年"
      :mode="['year', 'year']"
      @panelChange="handlePanelChange"
      @openChange="openChange"
    />
  </div>
</template>

<script>
import moment from 'moment'
    export default {
        data(){ 
            return { 
                start : 2021,
                end : 2025
            }
        },
        methods:{
            handlePanelChange(value){
                this.start = moment(value[0]).format('YYYY')
                this.end = moment(value[1]).format('YYYY')
                this.openChange()
            },
            openChange(){
                setTimeout(()=>{
                    this.endDisabled()
                    this.startDisabled()
                })
		    },
		// 年份开始日期禁用
		startDisabled() {
			this.$nextTick(() => {
				const table = document.getElementsByClassName('ant-calendar-year-panel-tbody')
				 // 所有开始年份
				const startList = table[0].querySelectorAll('td')
				startList.forEach(item => {
					if (item.innerText > this.end) {
						item.setAttribute('class', 'year-disabled')
					} else {
						item.classList.remove('year-disabled')
					}
				})
			})
		},
		// 年份禁用结束时间
		endDisabled() {
			this.$nextTick(() => {
				const table = document.getElementsByClassName('ant-calendar-year-panel-tbody')
				// 所有结束年份
				const endList = table[1].querySelectorAll('td') 
                    endList.forEach(item => {
                        if (item.innerText < this.start) {
                            item.setAttribute('class', 'year-disabled')
                        } else {
                            item.classList.remove('year-disabled')
                        }
                    })
                })
		    },

        }
    }
</script>

<style lang="less" scoped>
.year-disabled {
	pointer-events: none;
	cursor: not-allowed;
	a {
		color: rgba(0, 0, 0, 0.25);
		background: #f5f5f5;
	}
}
</style>