element时间日期选择器在日期上增加数字标记显示数字

需求中在日期选择器上增加每个天数显示数字的一个标记，后台人员操作时能够清楚的明白每一天的变化，可以通过匹配每一项的日期和数字数量来匹配，通过scss中的for循环生成样式，在通过element中的cellClassName增加类来动态匹配，样式和代码如下：

  <div class="block">
    <span class="demonstration">默认</span>
    <el-date-picker
      ref="datePicker"
      v-model="value1"
      type="datetime"
      placeholder="选择日期时间"
      default-time="10:00:00"
      :picker-options="pickerOptions"
    />
  </div>
</template>
<script>
export default {
  data () {
    return {
      value1: '',
      arr: [
        { date: '2023-2-1', num: '10' },
        { date: '2023-2-2', num: '20' },
        { date: '2023-2-10', num: '2' },
        { date: '2023-2-15', num: '5' },
        { date: '2023-2-16', num: '6' }
      ],
      pickerOptions: {
        cellClassName: (data) => {
          let _currentData = this.getDate(data)
          let _dataObj = {}
          this.arr.forEach(item => {
            _dataObj[item.date] = item.num
          })
          console.log(_dataObj[_currentData])
          if (_dataObj[_currentData] > -1) {
            return `cell-num ${
              _dataObj[_currentData] < 100
                ? 'cell-num-data-' + _dataObj[_currentData]
                : 'cell-num-data'
            }`
          }
        }
      }
    }
  },
  methods: {
    getDate (_nowDate) {
      let _nowYears = _nowDate.getFullYear()
      let _nowMonth = _nowDate.getMonth() + 1
      let _nowDay = _nowDate.getDate()
      return `${_nowYears}-${_nowMonth}-${_nowDay}`
    }
  }
}
</script>
<style lang="scss">
@for $i from 1 through 99 {
  .cell-num-data-#{$i} {
  &::after {
    content: "#{$i}";
    display: inline-block;
    position: absolute;
    font-size: 12px;
    color: #FFF;
    background-color: #f56c6c;
    top: -3px;
    right: -6px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 20px;
    z-index: 99;
  }
}
}
</style>