antd datePicker显示面板时候，直接通过 dom 操作获取其 tbody 的出现问题

Question

antd版本
1.6.2

vue版本
vue2

为什么去用 dom 操作
业务需要一个年份范围的选择，由两个年份选择去组成，但是 antd vue2版本，连年份选择都没有，只能通过 dom 去大改了。它的源码是用 jsx 语法（不知道还是react）写的，目前也没太多的时间去钻研。。。。

一、在 datePicker 提供的面板api，openChange（弹出日历和关闭日历的回调），当它为 true 的时候，nextTick去获取 tbody，第一次没有问题，以后就一直获取不到了

个人猜想：他组件应该是失去焦点时通过 emit 去触发，那么此时通过 nextTick 应该是能拿到的。但是这个现象不知道怎么解释。

二、在从第一个 datePick 处于焦点的时候，直接去点击第二个，此时它直接获取到两个 tbody。这个现象也不知咋解释，有可能跟 上个问题 有关系的，这个情况复杂些。

三、测试的代码也比较简单

<template>
  <div class="wrap">
    <a-row>
      <a-col span="5">
        <a-date-picker @openChange="change1" />
      </a-col>
      <a-col span="10">
        <a-date-picker @openChange="change2" />
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  methods: {
    change1 (status) {
      console.log('change111', status)
    },
    change2 (status) {
      console.log('change222', status)
      if (status) {
        this.$nextTick(() => {
          const tb = document.getElementsByClassName('ant-calendar-tbody')
          console.log(tb)
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .wrap {
    margin-top: 100px;
  }
</style>

有遇到类似的问题老哥么，请教一下，谢谢。

Answer 1

不是点击上面的年份月份就可以选择年份和月份吗,为啥还要自己写